@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
493 lines (492 loc) • 28.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTable = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_table_1 = require("@tanstack/react-table");
const custom_column_filter_feature_1 = require("../../features/custom-column-filter.feature");
const features_1 = require("../../features");
const react_virtual_1 = require("@tanstack/react-virtual");
const react_1 = require("react");
const data_table_context_1 = require("../../contexts/data-table-context");
const use_data_table_api_1 = require("../../hooks/use-data-table-api");
const utils_1 = require("../../utils");
const debounced_fetch_utils_1 = require("../../utils/debounced-fetch.utils");
const slot_helpers_1 = require("../../utils/slot-helpers");
const headers_1 = require("../headers");
const pagination_1 = require("../pagination");
const rows_1 = require("../rows");
const toolbar_1 = require("../toolbar");
const special_columns_utils_1 = require("../../utils/special-columns.utils");
const DEFAULT_INITIAL_STATE = {
sorting: [],
pagination: {
pageIndex: 0,
pageSize: 10,
},
rowSelection: {},
globalFilter: '',
expanded: {},
columnOrder: [],
columnPinning: {
left: [],
right: [],
},
customColumnFilter: {
filters: [],
logic: 'AND',
pendingFilters: [],
pendingLogic: 'AND',
},
};
exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions = null, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onDataChange, slots = {}, slotProps = {}, }, ref) {
var _a;
const isServerMode = dataMode === 'server';
const isServerPagination = paginationMode === 'server' || isServerMode;
const isServerFiltering = filterMode === 'server' || isServerMode;
const isServerSorting = sortingMode === 'server' || isServerMode;
const tableContainerRef = (0, react_1.useRef)(null);
const initialStateConfig = (0, react_1.useMemo)(() => {
return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
}, [initialState]);
const [sorting, setSorting] = (0, react_1.useState)(initialStateConfig.sorting);
const [pagination, setPagination] = (0, react_1.useState)(initialStateConfig.pagination);
const [globalFilter, setGlobalFilter] = (0, react_1.useState)(initialStateConfig.globalFilter);
const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || { ids: [], type: 'include' });
const [customColumnsFilter, setCustomColumnsFilter] = (0, react_1.useState)({
filters: [],
logic: 'AND',
pendingFilters: [],
pendingLogic: 'AND'
});
const [expanded, setExpanded] = (0, react_1.useState)(initialStateConfig.expanded);
const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize);
const [columnOrder, setColumnOrder] = (0, react_1.useState)(initialStateConfig.columnOrder);
const [columnPinning, setColumnPinning] = (0, react_1.useState)(initialStateConfig.columnPinning);
const internalApiRef = (0, react_1.useRef)(null);
const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
const [serverData, setServerData] = (0, react_1.useState)([]);
const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
if (!onFetchData)
return;
const filters = Object.assign({ globalFilter,
pagination,
customColumnsFilter,
sorting }, overrides);
const result = yield debouncedFetch(filters);
if ((result === null || result === void 0 ? void 0 : result.data) && (result === null || result === void 0 ? void 0 : result.total) !== undefined) {
setServerData(result.data);
setServerTotal(result.total);
}
}), [
onFetchData,
globalFilter,
pagination,
customColumnsFilter,
sorting,
debouncedFetch,
]);
const fetchDataRef = (0, react_1.useRef)(fetchData);
fetchDataRef.current = fetchData;
const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
setSelectionState((prevState) => {
const newSelectionState = typeof updaterOrValue === 'function'
? updaterOrValue(prevState)
: updaterOrValue;
if (onSelectionChange) {
onSelectionChange(newSelectionState);
}
return newSelectionState;
});
}, [onSelectionChange]);
const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
if (filterState && typeof filterState === 'object') {
setCustomColumnsFilter(filterState);
if (onColumnFiltersChange) {
onColumnFiltersChange(filterState);
}
}
}, [
onColumnFiltersChange,
]);
const enhancedColumns = (0, react_1.useMemo)(() => {
let columnsMap = [...columns];
if (enableExpanding) {
const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
columnsMap = [expandingColumnMap, ...columnsMap];
}
if (enableRowSelection) {
const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
columnsMap = [selectionColumnMap, ...columnsMap];
}
return columnsMap;
}, [
columns,
slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
enableRowSelection,
enableExpanding,
enableMultiRowSelection,
]);
const notifyDataStateChange = (0, react_1.useCallback)((overrides = {}) => {
if (onDataStateChange) {
const currentState = Object.assign({ globalFilter,
customColumnsFilter,
sorting,
pagination,
columnOrder,
columnPinning }, overrides);
onDataStateChange(currentState);
}
}, [
onDataStateChange,
globalFilter,
customColumnsFilter,
sorting,
pagination,
columnOrder,
columnPinning,
]);
const stateChangeRef = (0, react_1.useRef)(notifyDataStateChange);
stateChangeRef.current = notifyDataStateChange;
const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
let newSorting = typeof updaterOrValue === 'function'
? updaterOrValue(sorting)
: updaterOrValue;
console.log('handleSortingChange', newSorting);
newSorting = newSorting.filter((sort) => sort.id);
setSorting(newSorting);
if (onSortingChange) {
onSortingChange(newSorting);
}
if (isServerMode || isServerSorting) {
stateChangeRef.current({ sorting: newSorting });
fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
sorting: newSorting,
});
}
else if (onDataStateChange) {
stateChangeRef.current({ sorting: newSorting });
}
}, [
sorting,
onSortingChange,
isServerMode,
isServerSorting,
onDataStateChange,
]);
const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
setColumnOrder(updatedColumnOrder);
if (onColumnDragEnd) {
onColumnDragEnd(updatedColumnOrder);
}
}, [onColumnDragEnd]);
const handleColumnPinningChange = (0, react_1.useCallback)((updatedColumnPinning) => {
setColumnPinning(updatedColumnPinning);
if (onColumnPinningChange) {
onColumnPinningChange(updatedColumnPinning);
}
}, [onColumnPinningChange]);
const handlePaginationChange = (0, react_1.useCallback)((updater) => {
setPagination(updater);
const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
if (isServerMode || isServerPagination) {
setTimeout(() => {
stateChangeRef.current({ pagination: newPagination });
fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ pagination: newPagination });
}, 0);
}
else if (onDataStateChange) {
setTimeout(() => {
stateChangeRef.current({ pagination: newPagination });
}, 0);
}
}, [pagination, isServerMode, isServerPagination, onDataStateChange]);
const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
const newFilter = typeof updaterOrValue === 'function'
? updaterOrValue(globalFilter)
: updaterOrValue;
setGlobalFilter(newFilter);
if (isServerMode || isServerFiltering) {
stateChangeRef.current({ globalFilter: newFilter });
fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
}
else if (onDataStateChange) {
stateChangeRef.current({ globalFilter: newFilter });
}
}, [globalFilter, isServerMode, isServerFiltering, onDataStateChange]);
const onCustomColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
const currentState = customColumnsFilter;
const newState = typeof updater === 'function'
? updater(currentState)
: updater;
const legacyFilterState = {
filters: newState.filters,
logic: newState.logic,
pendingFilters: newState.pendingFilters,
pendingLogic: newState.pendingLogic
};
handleColumnFilterStateChange(legacyFilterState);
}, [customColumnsFilter, handleColumnFilterStateChange]);
const onCustomColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
if (isServerFiltering) {
const serverFilterState = {
filters: appliedState.filters,
logic: appliedState.logic,
pendingFilters: appliedState.pendingFilters,
pendingLogic: appliedState.pendingLogic,
};
stateChangeRef.current({
customColumnsFilter: serverFilterState,
});
fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
customColumnsFilter: serverFilterState,
});
}
}, [isServerFiltering]);
const table = (0, react_table_1.useReactTable)({
_features: [custom_column_filter_feature_1.CustomColumnFilterFeature, features_1.CustomSelectionFeature],
data: tableData,
columns: enhancedColumns,
initialState: Object.assign({}, initialStateConfig),
state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sorting }, (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { customColumnFilter: customColumnsFilter } : {})), (enableRowSelection ? { selectionState } : {})),
selectMode: selectMode,
enableCustomSelection: !!enableRowSelection,
isRowSelectable: isRowSelectable,
onSelectionStateChange: enableRowSelection ? handleSelectionStateChange : undefined,
onSortingChange: enableSorting ? handleSortingChange : undefined,
onPaginationChange: enablePagination ? handlePaginationChange : undefined,
onRowSelectionChange: enableRowSelection ? handleSelectionStateChange : undefined,
onGlobalFilterChange: enableGlobalFilter ? handleGlobalFilterChange : undefined,
onExpandedChange: enableExpanding ? setExpanded : undefined,
onColumnOrderChange: enableColumnDragging ? handleColumnOrderChange : undefined,
onColumnPinningChange: enableColumnPinning ? handleColumnPinningChange : undefined,
onCustomColumnFilterChange: onCustomColumnFilterChangeHandler,
onCustomColumnFilterApply: onCustomColumnFilterApplyHandler,
getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
getSortedRowModel: (enableSorting && !isServerSorting) ? (0, react_table_1.getSortedRowModel)() : undefined,
getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, custom_column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
getPaginationRowModel: (enablePagination && !isServerPagination) ? (0, react_table_1.getPaginationRowModel)() : undefined,
enableSorting: enableSorting,
manualSorting: isServerSorting,
manualFiltering: isServerFiltering,
enableColumnResizing: enableColumnResizing,
columnResizeMode: columnResizeMode,
enableColumnPinning: enableColumnPinning,
getRowCanExpand: enableExpanding ? getRowCanExpand : undefined,
manualPagination: isServerPagination,
autoResetPageIndex: false,
rowCount: tableTotalRow,
getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey),
debugAll: false,
});
const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
count: rows.length,
getScrollElement: () => tableContainerRef.current,
estimateSize: () => estimateRowHeight,
overscan: 10,
enabled: enableVirtualization && !enablePagination && rows.length > 0,
});
const tableWidth = (0, react_1.useMemo)(() => {
if (fitToScreen) {
return '100%';
}
if (enableColumnResizing) {
return table.getCenterTotalSize();
}
return '100%';
}, [
table,
enableColumnResizing,
fitToScreen,
]);
const tableStyle = (0, react_1.useMemo)(() => ({
width: tableWidth,
minWidth: '100%',
}), [tableWidth]);
const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
if (col.id)
return col.id;
const anyCol = col;
if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
return anyCol.accessorKey;
}
return `column_${index}`;
});
const draggedIndex = currentOrder.indexOf(draggedColumnId);
const targetIndex = currentOrder.indexOf(targetColumnId);
if (draggedIndex === -1 || targetIndex === -1)
return;
const newOrder = [...currentOrder];
newOrder.splice(draggedIndex, 1);
newOrder.splice(targetIndex, 0, draggedColumnId);
handleColumnOrderChange(newOrder);
}, [columnOrder, enhancedColumns, handleColumnOrderChange]);
(0, react_1.useEffect)(() => {
if (initialLoadData && onFetchData) {
fetchDataRef.current();
}
}, [initialLoadData]);
(0, react_1.useEffect)(() => {
if (enableColumnDragging && columnOrder.length === 0) {
const initialOrder = enhancedColumns.map((col, index) => {
if (col.id)
return col.id;
const anyCol = col;
if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
return anyCol.accessorKey;
}
return `column_${index}`;
});
setColumnOrder(initialOrder);
}
}, [
enableColumnDragging,
enhancedColumns,
columnOrder.length,
]);
const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
const renderTableRows = (0, react_1.useCallback)(() => {
var _a, _b, _c, _d;
if (tableLoading) {
return ((0, jsx_runtime_1.jsx)(LoadingRowSlot, Object.assign({ rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loadingRow)));
}
if (rows.length === 0) {
return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, Object.assign({ colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.emptyRow)));
}
if (enableVirtualization && !enablePagination && rows.length > 0) {
const virtualItems = rowVirtualizer.getVirtualItems();
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
height: `${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px`,
padding: 0,
border: 0,
} }) })), virtualItems.map((virtualRow) => {
const row = rows[virtualRow.index];
if (!row)
return null;
return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, Object.assign({ row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.row), row.id));
}), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
height: `${rowVirtualizer.getTotalSize() -
((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
padding: 0,
border: 0,
} }) }))] }));
}
return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, slots: slots, slotProps: slotProps }, row.id)));
}, [
tableLoading,
rows,
enableVirtualization,
enablePagination,
LoadingRowSlot,
pagination.pageSize,
skeletonRows,
table,
slotProps,
EmptyRowSlot,
emptyMessage,
rowVirtualizer,
enableHover,
enableStripes,
renderSubComponent,
enableStickyHeaderOrFooter,
slots,
]);
const [exportController, setExportController] = (0, react_1.useState)(null);
const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
const handleCancelExport = (0, react_1.useCallback)(() => {
if (exportController) {
exportController.abort();
setExportController(null);
if (onExportCancel) {
onExportCancel();
}
}
}, [exportController, onExportCancel]);
(0, use_data_table_api_1.useDataTableApi)({
table,
data: tableData,
idKey,
globalFilter,
customColumnsFilter,
sorting,
pagination,
columnOrder,
columnPinning,
enhancedColumns,
enablePagination,
enableColumnPinning,
initialPageIndex: pagination.pageIndex,
initialPageSize: pagination.pageSize,
pageSize: pagination.pageSize,
selectMode,
onSelectionChange: handleSelectionStateChange,
handleColumnFilterStateChange,
onDataStateChange,
onFetchData: onFetchData,
onDataChange,
exportFilename,
onExportProgress,
onExportComplete,
onExportError,
onServerExport,
exportController,
setExportController,
isExporting,
dataMode,
}, internalApiRef);
(0, react_1.useImperativeHandle)(ref, () => internalApiRef.current, []);
const isSomeRowsSelected = (0, react_1.useMemo)(() => {
if (!enableBulkActions || !enableRowSelection)
return false;
if (selectionState.type === 'exclude') {
return selectionState.ids.length < tableTotalRow;
}
else {
return selectionState.ids.length > 0;
}
}, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
const selectedRowCount = (0, react_1.useMemo)(() => {
if (!enableBulkActions || !enableRowSelection)
return 0;
if (selectionState.type === 'exclude') {
return tableTotalRow - selectionState.ids.length;
}
else {
return selectionState.ids.length;
}
}, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
const RootSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'root', material_1.Box);
const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', toolbar_1.DataTableToolbar);
const BulkActionsSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar);
const TableContainerSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableContainer', material_1.TableContainer);
const TableSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'table', material_1.Table);
const BodySlot = (0, slot_helpers_1.getSlotComponent)(slots, 'body', material_1.TableBody);
const FooterSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'footer', material_1.Box);
const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', pagination_1.DataTablePagination);
return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
position: 'relative',
zIndex: 2,
} }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar))) : null, (0, jsx_runtime_1.jsx)(TableContainerSlot, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {
maxHeight: maxHeight,
overflowY: 'auto',
})), (enableVirtualization && {
maxHeight: maxHeight,
overflowY: 'auto',
})), tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) }, tableContainerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableContainer, { children: (0, jsx_runtime_1.jsxs)(TableSlot, Object.assign({ size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: Object.assign(Object.assign(Object.assign({}, tableStyle), { tableLayout: fitToScreen ? 'fixed' : 'auto' }), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }, tableProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodySlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.body, { children: renderTableRows() }))] })) })), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterSlot, Object.assign({ sx: Object.assign({}, (enableStickyHeaderOrFooter && {
position: 'sticky',
bottom: 0,
backgroundColor: 'background.paper',
borderTop: '1px solid',
borderColor: 'divider',
zIndex: 1,
})) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.footer, { children: (0, jsx_runtime_1.jsx)(PaginationSlot, Object.assign({ footerFilter: footerFilter }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { pagination: pagination, totalRow: tableTotalRow })) }))) : null] })) }));
});