페이징기능 옵션추가가

This commit is contained in:
pgb 2024-12-27 11:14:38 +09:00
parent fbf234460a
commit 8fca4f8357
3 changed files with 68 additions and 20 deletions

View File

@ -248,6 +248,7 @@ const CommonCodePage = () => {
const [deleteAlertOpen, setDeleteAlertOpen] = useState(false); const [deleteAlertOpen, setDeleteAlertOpen] = useState(false);
const [codeToDelete, setCodeToDelete] = useState<string | null>(null); const [codeToDelete, setCodeToDelete] = useState<string | null>(null);
const [selectedRows, setSelectedRows] = useState<CommonCode[]>([]); const [selectedRows, setSelectedRows] = useState<CommonCode[]>([]);
const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { toast } = useToast(); const { toast } = useToast();
@ -503,6 +504,8 @@ const CommonCodePage = () => {
<PLMTable<CommonCode> <PLMTable<CommonCode>
columns={columns} columns={columns}
data={filteredCodes} data={filteredCodes}
pageSize={currentPageSize} // 페이지 크기 prop 전달
onPageSizeChange={setCurrentPageSize} // 페이지 크기 변경 핸들러 전달
onRowClick={(row) => { onRowClick={(row) => {
setSelectedCode(row); setSelectedCode(row);
setIsOpen(true); setIsOpen(true);

View File

@ -306,6 +306,7 @@ const MenusPage = () => {
const [deleteAlertOpen, setDeleteAlertOpen] = useState(false); const [deleteAlertOpen, setDeleteAlertOpen] = useState(false);
const [menuToDelete, setMenuToDelete] = useState<string | null>(null); const [menuToDelete, setMenuToDelete] = useState<string | null>(null);
const [selectedRows, setSelectedRows] = useState<DBMenuItem[]>([]); const [selectedRows, setSelectedRows] = useState<DBMenuItem[]>([]);
const [currentPageSize, setCurrentPageSize] = useState(20); // 페이지 크기 상태 추가
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { toast } = useToast(); const { toast } = useToast();
@ -575,6 +576,8 @@ const MenusPage = () => {
<PLMTable<DBMenuItem> <PLMTable<DBMenuItem>
columns={columns} columns={columns}
data={filteredMenus} data={filteredMenus}
pageSize={currentPageSize} // 페이지 크기 prop 전달
onPageSizeChange={setCurrentPageSize} // 페이지 크기 변경 핸들러 전달
onRowClick={(row) => { onRowClick={(row) => {
setSelectedMenu(row); setSelectedMenu(row);
setIsOpen(true); setIsOpen(true);

View File

@ -42,6 +42,7 @@ interface PLMTableProps<T extends BaseRow> {
pageSize?: number; pageSize?: number;
enableCheckbox?: boolean; enableCheckbox?: boolean;
onCheckedChange?: (checkedRows: T[]) => void; onCheckedChange?: (checkedRows: T[]) => void;
onPageSizeChange?: (newPageSize: number) => void; // 새로운 prop 추가
} }
type CustomExpandedState = Record<string | number, boolean>; type CustomExpandedState = Record<string | number, boolean>;
@ -52,7 +53,8 @@ export function PLMTable<T extends BaseRow>({
onRowClick, onRowClick,
pageSize = 20, pageSize = 20,
enableCheckbox = false, enableCheckbox = false,
onCheckedChange onCheckedChange,
onPageSizeChange,
}: PLMTableProps<T>) { }: PLMTableProps<T>) {
const [expanded, setExpanded] = useState<CustomExpandedState>({}); const [expanded, setExpanded] = useState<CustomExpandedState>({});
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({}); const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
@ -290,6 +292,18 @@ export function PLMTable<T extends BaseRow>({
setRowSelection({}); setRowSelection({});
}, [currentPageIndex]); }, [currentPageIndex]);
const pageSizeOptions = [20, 50, 75, 100];
// 페이지 크기 변경 핸들러
const handlePageSizeChange = (newSize: number) => {
const newPageSize = Number(newSize);
setCurrentPageIndex(0);
table.setPageSize(newPageSize);
if (onPageSizeChange) {
onPageSizeChange(newPageSize);
}
};
return ( return (
<div> <div>
<div <div
@ -319,25 +333,40 @@ export function PLMTable<T extends BaseRow>({
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
<tr <tr
key={row.id} key={row.id}
className={`transition-colors hover:bg-gray-50 ${ className={`transition-colors hover:bg-gray-50`}
row.depth > 0 ? "bg-slate-50/70" : ""
}`}
> >
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => {
<td const isFirstCell = cell.column.id === 'expander';
key={cell.id} return (
className={`py-3 px-4 border-b border-gray-200 overflow-hidden text-ellipsis ${ <td
row.depth > 0 ? "text-gray-600" : "" key={cell.id}
} ${cell.column.columnDef.meta?.className || ""}`} className={`py-3 px-4 border-b border-gray-200 overflow-visible
style={{ ${cell.column.columnDef.meta?.className || ""}
width: cell.column.columnDef.meta?.width, ${isFirstCell ? 'relative' : ''}`}
maxWidth: cell.column.columnDef.meta?.width, style={{
textAlign: cell.column.columnDef.meta?.textAlign || 'left' width: cell.column.columnDef.meta?.width,
}} maxWidth: cell.column.columnDef.meta?.width,
> textAlign: cell.column.columnDef.meta?.textAlign || 'left',
{flexRender(cell.column.columnDef.cell, cell.getContext())} paddingLeft: isFirstCell ? `${row.depth * 24 + 16}px` : undefined,
</td> }}
))} >
{isFirstCell && Array.from({ length: row.depth }).map((_, index) => (
<span
key={`line-${index}`}
className="absolute h-full w-px bg-gray-200"
style={{
left: `${(index + 1) * 24}px`,
top: 0,
zIndex: 1
}}
/>
))}
<div className={isFirstCell ? 'relative z-10' : ''}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</td>
);
})}
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -345,7 +374,20 @@ export function PLMTable<T extends BaseRow>({
</div> </div>
<div className="flex items-center justify-between py-3 text-sm text-gray-700"> <div className="flex items-center justify-between py-3 text-sm text-gray-700">
<div className="w-1/3" /> <div className="w-1/3 flex items-center gap-2">
<span> :</span>
<select
value={pageSize}
onChange={(e) => handlePageSizeChange(Number(e.target.value))}
className="border border-gray-200 rounded-md px-2 py-1 bg-white text-gray-700"
>
{pageSizeOptions.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</div>
<div className="flex items-center justify-center gap-2 flex-1"> <div className="flex items-center justify-center gap-2 flex-1">
<button <button
onClick={() => { onClick={() => {