페이징기능 옵션추가가
This commit is contained in:
parent
fbf234460a
commit
8fca4f8357
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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={() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user