페이징기능 옵션추가가

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

View File

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

View File

@ -42,6 +42,7 @@ interface PLMTableProps<T extends BaseRow> {
pageSize?: number;
enableCheckbox?: boolean;
onCheckedChange?: (checkedRows: T[]) => void;
onPageSizeChange?: (newPageSize: number) => void; // 새로운 prop 추가
}
type CustomExpandedState = Record<string | number, boolean>;
@ -52,7 +53,8 @@ export function PLMTable<T extends BaseRow>({
onRowClick,
pageSize = 20,
enableCheckbox = false,
onCheckedChange
onCheckedChange,
onPageSizeChange,
}: PLMTableProps<T>) {
const [expanded, setExpanded] = useState<CustomExpandedState>({});
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
@ -290,6 +292,18 @@ export function PLMTable<T extends BaseRow>({
setRowSelection({});
}, [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 (
<div>
<div
@ -319,25 +333,40 @@ export function PLMTable<T extends BaseRow>({
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className={`transition-colors hover:bg-gray-50 ${
row.depth > 0 ? "bg-slate-50/70" : ""
}`}
className={`transition-colors hover:bg-gray-50`}
>
{row.getVisibleCells().map((cell) => (
{row.getVisibleCells().map((cell) => {
const isFirstCell = cell.column.id === 'expander';
return (
<td
key={cell.id}
className={`py-3 px-4 border-b border-gray-200 overflow-hidden text-ellipsis ${
row.depth > 0 ? "text-gray-600" : ""
} ${cell.column.columnDef.meta?.className || ""}`}
className={`py-3 px-4 border-b border-gray-200 overflow-visible
${cell.column.columnDef.meta?.className || ""}
${isFirstCell ? 'relative' : ''}`}
style={{
width: cell.column.columnDef.meta?.width,
maxWidth: cell.column.columnDef.meta?.width,
textAlign: cell.column.columnDef.meta?.textAlign || 'left'
textAlign: cell.column.columnDef.meta?.textAlign || 'left',
paddingLeft: isFirstCell ? `${row.depth * 24 + 16}px` : undefined,
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</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>
))}
</tbody>
@ -345,7 +374,20 @@ export function PLMTable<T extends BaseRow>({
</div>
<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">
<button
onClick={() => {