@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
50 lines (49 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTablePagination = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
// data-table-pagination.tsx
const material_1 = require("@mui/material");
const react_1 = require("react");
const data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
exports.DataTablePagination = (0, react_1.memo)((props) => {
const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, ...otherProps } = props;
const { table, tableSize } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
// const paginationSlotProps = extractSlotProps(slotProps, 'pagination');
// Merge all props for maximum flexibility
const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
sx: {
display: 'flex',
alignItems: 'center',
gap: 1,
justifyContent: 'space-between',
px: 2,
...containerSx,
},
});
const mergedPaginationProps = (0, slot_helpers_1.mergeSlotProps)({
component: 'div',
size: tableSize === 'small' ? 'small' : 'medium',
count: totalRow,
rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize,
page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex,
onPageChange: (_, page) => {
// Use TanStack Table's native pagination methods
table.setPageIndex(page);
},
onRowsPerPageChange: (e) => {
const newPageSize = Number(e.target.value);
// Use TanStack Table's native pagination methods
table.setPageIndex(0);
table.setPageSize(newPageSize);
},
showFirstButton: true,
showLastButton: true,
labelRowsPerPage: 'Rows per page:',
labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
}, { ...paginationProps, ...otherProps });
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...mergedContainerProps, children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(material_1.TablePagination, { ...mergedPaginationProps })] }));
});
exports.DataTablePagination.displayName = 'DataTablePagination';