페이징기능 옵션추가가
This commit is contained in:
parent
fbf234460a
commit
8fca4f8357
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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) => (
|
||||
<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 || ""}`}
|
||||
style={{
|
||||
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())}
|
||||
</td>
|
||||
))}
|
||||
{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-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',
|
||||
paddingLeft: isFirstCell ? `${row.depth * 24 + 16}px` : undefined,
|
||||
}}
|
||||
>
|
||||
{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={() => {
|
||||
|
Loading…
Reference in New Issue
Block a user