@ackplus/react-tanstack-data-table 1.0.19-beta-0.15 → 1.0.20

package/src/lib/components/toolbar/column-visibility-control.js

@@ -8,8 +8,9 @@ const react_1 = require("react");
 const menu_dropdown_1 = require("../droupdown/menu-dropdown");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function ColumnVisibilityControl() {
+function ColumnVisibilityControl(props = {}) {
     const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnIcon');
     const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
     const columns = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -22,10 +23,9 @@ function ColumnVisibilityControl() {
         var _a;
         (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
     });
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", sx: {
-                    flexShrink: 0,
-                }, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                p: 2,
-                minWidth: 200,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Show/Hide Columns" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small" })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] })) }));
+    const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
+        size: 'small',
+        sx: { flexShrink: 0 },
+    }, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnVisibilityControl) || {}, props);
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedProps, { children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, iconSlotProps)) })) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 200 }, mergedProps.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ mb: 1 }, mergedProps.titleSx), children: mergedProps.title || 'Show/Hide Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, Object.assign({ control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small" }, mergedProps.checkboxProps))), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, mergedProps.labelProps), column.id))) })] })) }));
 }

package/src/lib/components/toolbar/data-table-toolbar.d.ts

@@ -1,5 +1,6 @@
+import { ToolbarProps, SxProps } from '@mui/material';
 import { ReactNode } from 'react';
-export interface DataTableToolbarProps {
+export interface DataTableToolbarProps extends ToolbarProps {
     extraFilter?: ReactNode;
     enableGlobalFilter?: boolean;
     title?: string;
@@ -10,5 +11,11 @@ export interface DataTableToolbarProps {
     enableColumnFilter?: boolean;
     enableTableSizeControl?: boolean;
     enableColumnPinning?: boolean;
+    titleSx?: SxProps;
+    subtitleSx?: SxProps;
+    containerSx?: SxProps;
+    leftSectionSx?: SxProps;
+    rightSectionSx?: SxProps;
+    [key: string]: any;
 }
-export declare function DataTableToolbar({ extraFilter, enableGlobalFilter, title, subtitle, enableColumnVisibility, enableExport, enableReset, enableColumnFilter, enableTableSizeControl, enableColumnPinning, }: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableToolbar(props?: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/data-table-toolbar.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableToolbar = DataTableToolbar;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const column_filter_control_1 = require("./column-filter-control");
@@ -12,8 +13,17 @@ const table_search_control_1 = require("./table-search-control");
 const table_size_control_1 = require("./table-size-control");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, }) {
+function DataTableToolbar(props = {}) {
+    const { extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, titleSx, subtitleSx, containerSx, leftSectionSx, rightSectionSx } = props, otherProps = tslib_1.__rest(props, ["extraFilter", "enableGlobalFilter", "title", "subtitle", "enableColumnVisibility", "enableExport", "enableReset", "enableColumnFilter", "enableTableSizeControl", "enableColumnPinning", "titleSx", "subtitleSx", "containerSx", "leftSectionSx", "rightSectionSx"]);
     const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
+    const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'toolbar');
+    const searchInputSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'searchInput');
+    const tableSizeControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeControl');
+    const columnCustomFilterControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnCustomFilterControl');
+    const columnPinningControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnPinningControl');
+    const columnVisibilityControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnVisibilityControl');
+    const resetButtonSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'resetButton');
+    const exportButtonSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'exportButton');
     const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
     const TableSearchControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchInput', table_search_control_1.TableSearchControl);
     const TableSizeControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeControl', table_size_control_1.TableSizeControl);
@@ -22,5 +32,8 @@ function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title
     const ColumnVisibilityControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnVisibilityControl', column_visibility_control_1.ColumnVisibilityControl);
     const ColumnResetControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetButton', column_reset_control_1.ColumnResetControl);
     const TableExportControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportButton', table_export_control_1.TableExportControl);
-    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null, enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
+    const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
+        table,
+    }, toolbarSlotProps, otherProps);
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({}, mergedToolbarProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ width: '100%' }, containerSx), children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: titleSx, children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: subtitleSx, children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: Object.assign({ flex: 1 }, leftSectionSx), children: [enableTableSizeControl ? ((0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, tableSizeControlSlotProps, props.tableSizeControlProps || {})))) : null, enableColumnFilter ? ((0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnCustomFilterControlSlotProps, props.columnFilterProps || {})))) : null, enableColumnPinning ? ((0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnPinningControlSlotProps, props.columnPinningProps || {})))) : null, enableColumnVisibility ? ((0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnVisibilityControlSlotProps, props.columnVisibilityProps || {})))) : null, enableReset ? ((0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, resetButtonSlotProps, props.resetButtonProps || {})))) : null, enableExport ? ((0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, exportButtonSlotProps, props.exportButtonProps || {})))) : null, enableGlobalFilter ? ((0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, searchInputSlotProps, props.searchInputProps || {})))) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: rightSectionSx, children: extraFilter })] })] }) })));
 }

package/src/lib/components/toolbar/table-export-control.d.ts

@@ -1,3 +1,4 @@
+import { IconButtonProps, SxProps } from '@mui/material';
 import { TableFilters } from '../../types';
 import { SelectionState } from '../../features';
 interface TableExportControlProps {
@@ -20,6 +21,11 @@ interface TableExportControlProps {
         message: string;
         code: string;
     }) => void;
+    iconButtonProps?: IconButtonProps;
+    tooltipProps?: any;
+    menuSx?: SxProps;
+    menuItemProps?: any;
+    [key: string]: any;
 }
-export declare function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, }?: TableExportControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableExportControl(props?: TableExportControlProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/toolbar/table-export-control.js

@@ -8,97 +8,53 @@ const material_1 = require("@mui/material");
 const menu_dropdown_1 = require("../droupdown/menu-dropdown");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const icons_1 = require("../../icons");
-const export_utils_1 = require("../../utils/export-utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, } = {}) {
+function TableExportControl(props = {}) {
+    const { exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, iconButtonProps, tooltipProps, menuSx, menuItemProps } = props, otherProps = tslib_1.__rest(props, ["exportFilename", "onServerExport", "onExportProgress", "onExportComplete", "onExportError", "iconButtonProps", "tooltipProps", "menuSx", "menuItemProps"]);
     const { table, apiRef, slots, slotProps, dataMode, isExporting, onCancelExport, exportFilename: contextExportFilename, onServerExport: contextOnServerExport, onExportProgress: contextOnExportProgress, onExportComplete: contextOnExportComplete, onExportError: contextOnExportError, } = (0, data_table_context_1.useDataTableContext)();
     const exportFilename = propsExportFilename || contextExportFilename || 'export';
     const onServerExport = propsOnServerExport || contextOnServerExport;
     const onExportProgress = propsOnExportProgress || contextOnExportProgress;
     const onExportComplete = propsOnExportComplete || contextOnExportComplete;
     const onExportError = propsOnExportError || contextOnExportError;
+    const exportIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'exportIcon');
+    const csvIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'csvIcon');
+    const excelIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'excelIcon');
     const ExportIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportIcon', icons_material_1.CloudDownloadOutlined);
     const CsvIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'csvIcon', icons_1.CsvIcon);
     const ExcelIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'excelIcon', icons_1.ExcelIcon);
     const handleExport = (format) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
+        if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
+            return;
         try {
-            if (dataMode === 'server' && onServerExport) {
-                const currentState = table.getState();
-                const currentFilters = {
-                    globalFilter: currentState.globalFilter,
-                    sorting: currentState.sorting,
-                    columnFilters: currentState.columnFilters,
-                };
-                const selectionData = (_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.getSelectionState();
-                yield (0, export_utils_1.exportServerData)(table, {
-                    format,
+            if (format === 'csv') {
+                yield apiRef.current.export.exportCSV({
                     filename: exportFilename,
-                    fetchData: (filters, selection) => onServerExport(filters || currentFilters, selection),
-                    currentFilters,
-                    selection: selectionData,
-                    onProgress: onExportProgress,
-                    onComplete: onExportComplete,
-                    onError: onExportError,
                 });
             }
             else {
-                yield (0, export_utils_1.exportClientData)(table, {
-                    format,
+                yield apiRef.current.export.exportExcel({
                     filename: exportFilename,
-                    onProgress: onExportProgress,
-                    onComplete: onExportComplete,
-                    onError: onExportError,
                 });
             }
         }
         catch (error) {
             console.error('Export failed:', error);
-            onExportError === null || onExportError === void 0 ? void 0 : onExportError({
-                message: error instanceof Error ? error.message : 'Export failed',
-                code: 'PROCESSING_ERROR',
-            });
         }
     });
-    const selectedRowCount = table.getSelectedCount ? table.getSelectedCount() : 0;
-    const hasSelection = table.getIsSomeRowsSelected ? table.getIsSomeRowsSelected() : false;
-    const visibleColumns = table.getVisibleLeafColumns().filter(col => col.getIsVisible());
-    const exportableColumns = visibleColumns.filter(col => {
-        const columnDef = col.columnDef;
-        return columnDef.hideInExport !== true;
-    });
-    const hiddenFromExportColumns = visibleColumns.filter(col => {
-        const columnDef = col.columnDef;
-        return columnDef.hideInExport === true;
-    });
-    const summary = {
-        filteredRows: table.getFilteredRowModel().rows.length,
-        totalColumns: exportableColumns.length,
-        hiddenColumns: hiddenFromExportColumns.length,
-        selectedRows: selectedRowCount,
-        hasSelection: hasSelection,
-    };
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Export data", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: isExporting, sx: {
-                    flexShrink: 0,
-                    color: isExporting ? 'warning.main' : 'text.secondary',
-                }, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                p: 1,
-                minWidth: 280,
-            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                        mb: 2,
-                        p: 1,
-                        bgcolor: 'grey.50',
-                        borderRadius: 1,
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: [summary.hasSelection
-                                    ? `${summary.selectedRows} selected • ${summary.totalColumns} exportable columns`
-                                    : `${summary.filteredRows} filtered • ${summary.totalColumns} exportable columns`, summary.hiddenColumns > 0 && ((0, jsx_runtime_1.jsxs)("span", { style: { color: 'orange' }, children: [' ', "\u2022 ", summary.hiddenColumns, " hidden from export"] }))] }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
-                        onCancelExport === null || onCancelExport === void 0 ? void 0 : onCancelExport();
+    const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
+        size: 'small',
+        disabled: isExporting,
+        sx: { flexShrink: 0 },
+    }, exportIconSlotProps, iconButtonProps || {});
+    const mergedMenuItemProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: { minWidth: 150 },
+    }, menuItemProps || {});
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: isExporting ? 'Export in progress...' : 'Export data' }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, exportIconSlotProps)) })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ minWidth: 200 }, menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: () => {
+                        handleExport('csv');
+                        handleClose();
+                    }, disabled: isExporting }, mergedMenuItemProps, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({}, csvIconSlotProps)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: () => {
+                        handleExport('excel');
                         handleClose();
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({ fontSize: "small", color: "warning" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                                yield handleExport('csv');
-                                handleClose();
-                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.csvIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as CSV", secondary: ".csv format" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                                yield handleExport('excel');
-                                handleClose();
-                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.excelIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as Excel", secondary: ".xlsx format" })] })] }))] })) }));
+                    }, disabled: isExporting }, mergedMenuItemProps, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({}, excelIconSlotProps)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] })), isExporting && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, pt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', textAlign: 'center' }, children: "Export in progress..." }) }))] })) }));
 }

package/src/lib/components/toolbar/table-search-control.d.ts

@@ -1 +1,12 @@
-export declare function TableSearchControl(): import("react/jsx-runtime").JSX.Element;
+import { IconButtonProps, OutlinedInputProps, SxProps } from '@mui/material';
+export interface TableSearchControlProps {
+    placeholder?: string;
+    autoFocus?: boolean;
+    searchIconProps?: IconButtonProps;
+    clearIconProps?: IconButtonProps;
+    inputProps?: OutlinedInputProps;
+    containerSx?: SxProps;
+    tooltipProps?: any;
+    [key: string]: any;
+}
+export declare function TableSearchControl(props?: TableSearchControlProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/table-search-control.js

@@ -4,19 +4,17 @@ exports.TableSearchControl = TableSearchControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const material_2 = require("@mui/material");
-const material_3 = require("@mui/material");
-const material_4 = require("@mui/material");
-const material_5 = 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");
-function TableSearchControl() {
+function TableSearchControl(props = {}) {
     const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
     const [searchVisible, setSearchVisible] = (0, react_1.useState)(false);
     const searchInputRef = (0, react_1.useRef)(null);
     const globalFilter = table.getState().globalFilter || '';
     const hasSearch = globalFilter.length > 0;
+    const searchIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'searchIcon');
+    const clearIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'clearIcon');
     const SearchIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchIcon', icons_material_1.Search);
     const ClearIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'clearIcon', icons_material_1.Clear);
     const handleChange = (0, react_1.useCallback)((e) => {
@@ -52,10 +50,25 @@ function TableSearchControl() {
         }
         return undefined;
     }, [searchVisible]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-        }, children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchToggle, color: hasSearch ? 'primary' : 'default', sx: {
-                        flexShrink: 0,
-                    }, children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) }) })), (0, jsx_runtime_1.jsx)(material_3.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_4.OutlinedInput, { inputRef: searchInputRef, placeholder: "Search...", value: globalFilter, onChange: handleChange, size: "small", onBlur: handleSearchBlur, sx: { minWidth: 200 }, endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Clear search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchClear, edge: "end", children: (0, jsx_runtime_1.jsx)(ClearIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clearIcon)) }) }) })) : null, startAdornment: searchVisible || hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) })) : null }) })] }));
+    const mergedSearchIconProps = (0, slot_helpers_1.mergeSlotProps)({
+        size: 'small',
+        onClick: handleSearchToggle,
+        color: hasSearch ? 'primary' : 'default',
+        sx: { flexShrink: 0 },
+    }, searchIconSlotProps, props.searchIconProps || {});
+    const mergedClearIconProps = (0, slot_helpers_1.mergeSlotProps)({
+        size: 'small',
+        onClick: handleSearchClear,
+    }, clearIconSlotProps, props.clearIconProps || {});
+    const mergedInputProps = (0, slot_helpers_1.mergeSlotProps)({
+        inputRef: searchInputRef,
+        size: 'small',
+        placeholder: props.placeholder || 'Search...',
+        value: globalFilter,
+        onChange: handleChange,
+        onBlur: handleSearchBlur,
+        autoFocus: props.autoFocus,
+        sx: { minWidth: 200 },
+    }, props.inputProps || {});
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ display: 'flex', alignItems: 'center' }, props.containerSx), children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Search" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedSearchIconProps, { children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({}, searchIconSlotProps)) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", timeout: 200, children: (0, jsx_runtime_1.jsx)(material_1.OutlinedInput, Object.assign({}, mergedInputProps, { endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedClearIconProps, { children: (0, jsx_runtime_1.jsx)(ClearIconSlot, Object.assign({}, clearIconSlotProps)) })) })) : null })) })] }));
 }

package/src/lib/components/toolbar/table-size-control.d.ts

@@ -1 +1,9 @@
-export declare function TableSizeControl(): import("react/jsx-runtime").JSX.Element;
+import { IconButtonProps, SxProps } from '@mui/material';
+export interface TableSizeControlProps {
+    iconButtonProps?: IconButtonProps;
+    menuProps?: any;
+    tooltipProps?: any;
+    containerSx?: SxProps;
+    [key: string]: any;
+}
+export declare function TableSizeControl(props?: TableSizeControlProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/table-size-control.js

@@ -8,8 +8,11 @@ const menu_dropdown_1 = require("../droupdown/menu-dropdown");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const icons_1 = require("../../icons");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function TableSizeControl() {
+function TableSizeControl(props = {}) {
     const { tableSize, onTableSizeChange, slotProps, slots } = (0, data_table_context_1.useDataTableContext)();
+    const tableSizeIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeIcon');
+    const tableSizeSmallIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeSmallIcon');
+    const tableSizeMediumIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeMediumIcon');
     const TableSizeIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeIcon', icons_material_1.LineWeightOutlined);
     const TableSizeSmallIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeSmallIcon', icons_1.ViewCompactIcon);
     const TableSizeMediumIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeMediumIcon', icons_1.ViewComfortableIcon);
@@ -18,19 +21,24 @@ function TableSizeControl() {
             value: 'small',
             label: 'Compact',
             description: 'Small padding, compact rows',
-            icon: (0, jsx_runtime_1.jsx)(TableSizeSmallIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeSmallIcon)),
+            icon: (0, jsx_runtime_1.jsx)(TableSizeSmallIconSlot, Object.assign({}, tableSizeSmallIconSlotProps)),
         },
         {
             value: 'medium',
             label: 'Standard',
             description: 'Default padding and spacing',
-            icon: (0, jsx_runtime_1.jsx)(TableSizeMediumIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeMediumIcon)),
+            icon: (0, jsx_runtime_1.jsx)(TableSizeMediumIconSlot, Object.assign({}, tableSizeMediumIconSlotProps)),
         },
     ];
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Table size", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", sx: {
-                    flexShrink: 0,
-                }, children: (0, jsx_runtime_1.jsx)(TableSizeIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SIZE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { selected: tableSize === option.value, onClick: () => {
-                    onTableSizeChange === null || onTableSizeChange === void 0 ? void 0 : onTableSizeChange(option.value);
-                    handleClose();
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: option.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label, secondary: option.description })] }, option.value))) })) }));
+    const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
+        size: 'small',
+        sx: { flexShrink: 0 },
+    }, tableSizeIconSlotProps, props.iconButtonProps || {});
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Table size" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: (0, jsx_runtime_1.jsx)(TableSizeIconSlot, Object.assign({}, tableSizeIconSlotProps)) })) }))), children: SIZE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { selected: tableSize === option.value, onClick: () => onTableSizeChange(option.value), sx: Object.assign({ minWidth: 200 }, props.containerSx), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { sx: { minWidth: 36 }, children: option.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label, secondary: option.description, primaryTypographyProps: {
+                        variant: 'body2',
+                        fontWeight: tableSize === option.value ? 600 : 400,
+                    }, secondaryTypographyProps: {
+                        variant: 'caption',
+                        color: 'text.secondary',
+                    } })] }, option.value))) }));
 }

package/src/lib/examples/index.d.ts

@@ -4,3 +4,5 @@ export { AdvancedFeaturesExample } from './advanced-features-example';
 export { SimpleLocalExample } from './simple-local-example';
 export { BulkActionsTest } from './bulk-actions-test';
 export { ServerSideFetchingExample } from './server-side-fetching-example';
+export { SimpleEnhancedSlotsExample } from './simple-slots-example';
+export { ServerSideTest } from './server-side-test';

package/src/lib/examples/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerSideFetchingExample = exports.BulkActionsTest = exports.SimpleLocalExample = exports.AdvancedFeaturesExample = exports.SelectionTestExample = exports.CustomColumnFilterExample = void 0;
+exports.ServerSideTest = exports.SimpleEnhancedSlotsExample = exports.ServerSideFetchingExample = exports.BulkActionsTest = exports.SimpleLocalExample = exports.AdvancedFeaturesExample = exports.SelectionTestExample = exports.CustomColumnFilterExample = void 0;
 var custom_column_filter_example_1 = require("./custom-column-filter-example");
 Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
 var selection_test_example_1 = require("./selection-test-example");
@@ -13,3 +13,7 @@ var bulk_actions_test_1 = require("./bulk-actions-test");
 Object.defineProperty(exports, "BulkActionsTest", { enumerable: true, get: function () { return bulk_actions_test_1.BulkActionsTest; } });
 var server_side_fetching_example_1 = require("./server-side-fetching-example");
 Object.defineProperty(exports, "ServerSideFetchingExample", { enumerable: true, get: function () { return server_side_fetching_example_1.ServerSideFetchingExample; } });
+var simple_slots_example_1 = require("./simple-slots-example");
+Object.defineProperty(exports, "SimpleEnhancedSlotsExample", { enumerable: true, get: function () { return simple_slots_example_1.SimpleEnhancedSlotsExample; } });
+var server_side_test_1 = require("./server-side-test");
+Object.defineProperty(exports, "ServerSideTest", { enumerable: true, get: function () { return server_side_test_1.ServerSideTest; } });

package/src/lib/examples/simple-slots-example.d.ts

@@ -0,0 +1 @@
+export declare function SimpleEnhancedSlotsExample(): import("react/jsx-runtime").JSX.Element;

package/src/lib/examples/simple-slots-example.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleEnhancedSlotsExample = SimpleEnhancedSlotsExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const data_table_1 = require("../components/table/data-table");
+const sampleData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'active' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'inactive' },
+];
+const columns = [
+    { id: 'name', accessorKey: 'name', header: 'Name' },
+    { id: 'email', accessorKey: 'email', header: 'Email' },
+    {
+        id: 'status',
+        accessorKey: 'status',
+        header: 'Status',
+        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), color: getValue() === 'active' ? 'success' : 'default', size: "small" }))
+    },
+];
+const CustomSearchIcon = (props) => ((0, jsx_runtime_1.jsx)(icons_material_1.Star, Object.assign({}, props, { sx: Object.assign({ color: 'warning.main' }, props.sx) })));
+const CustomFilterIcon = (props) => ((0, jsx_runtime_1.jsx)(icons_material_1.Favorite, Object.assign({}, props, { sx: Object.assign({ color: 'error.main' }, props.sx) })));
+function SimpleEnhancedSlotsExample() {
+    const theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Enhanced Slots System" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", paragraph: true, children: "This example demonstrates the key improvements in the enhanced slot system:" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Key Improvements:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Better Prop Merging:" }), " Special handling for sx, style, and className props"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Full Customization:" }), " Override any component without limitations"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Enhanced Type Safety:" }), " Better TypeScript support with proper typing"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Flexible Props:" }), " Pass any props to slot components"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Priority System:" }), " User props override slot props override defaults"] })] })] }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { data: sampleData, columns: columns, enableGlobalFilter: true, enableColumnVisibility: true, enableColumnFilter: true, slots: {
+                    searchIcon: CustomSearchIcon,
+                    filterIcon: CustomFilterIcon,
+                }, slotProps: {
+                    searchIcon: {
+                        fontSize: 'large',
+                        sx: {
+                            animation: 'pulse 2s infinite',
+                            '@keyframes pulse': {
+                                '0%': { transform: 'scale(1)' },
+                                '50%': { transform: 'scale(1.1)' },
+                                '100%': { transform: 'scale(1)' },
+                            },
+                        },
+                    },
+                    filterIcon: {
+                        fontSize: 'medium',
+                        sx: {
+                            transform: 'rotate(0deg)',
+                            transition: 'transform 0.3s ease',
+                            '&:hover': {
+                                transform: 'rotate(180deg)',
+                            },
+                        },
+                    },
+                    tableContainer: {
+                        sx: {
+                            maxHeight: '400px',
+                            '&::-webkit-scrollbar': {
+                                width: '8px',
+                            },
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: (0, material_1.alpha)(theme.palette.grey[300], 0.5),
+                                borderRadius: '4px',
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                backgroundColor: theme.palette.primary.main,
+                                borderRadius: '4px',
+                                '&:hover': {
+                                    backgroundColor: theme.palette.primary.dark,
+                                },
+                            },
+                        },
+                    },
+                    toolbar: {
+                        sx: {
+                            background: `linear-gradient(135deg, ${(0, material_1.alpha)(theme.palette.primary.main, 0.1)} 0%, ${(0, material_1.alpha)(theme.palette.secondary.main, 0.1)} 100%)`,
+                            border: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, 0.2)}`,
+                            borderRadius: 2,
+                            padding: 2,
+                            margin: '0 0 16px 0',
+                        },
+                    },
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 4 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Enhanced Slot Helper Functions:" }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "pre", sx: {
+                            backgroundColor: 'grey.100',
+                            p: 2,
+                            borderRadius: 1,
+                            fontSize: '0.875rem',
+                            overflow: 'auto',
+                        }, children: `// Enhanced prop merging with special handling
+export function mergeSlotProps(
+    defaultProps = {},
+    slotProps = {},
+    userProps = {}
+) {
+    // Handles sx, style, and className merging
+    // User props have highest priority
+}
+
+// Enhanced slot component retrieval
+export function getSlotComponentWithProps(
+    slots,
+    slotProps,
+    slotName,
+    fallback,
+    defaultProps = {}
+) {
+    return {
+        component: getSlotComponent(slots, slotName, fallback),
+        props: mergeSlotProps(defaultProps, slotProps[slotName], {})
+    };
+}
+
+// Usage in components:
+const { component: IconSlot, props: iconProps } = 
+    getSlotComponentWithProps(slots, slotProps, 'searchIcon', DefaultIcon);
+
+return <IconSlot {...iconProps} />;` })] })] }));
+}

package/src/lib/types/data-table-api.d.ts

@@ -1,4 +1,4 @@
-import { ColumnPinningState, SortingState, ColumnOrderState, TableState, Row } from '@tanstack/react-table';
+import { ColumnPinningState, SortingState, ColumnOrderState, TableState, Row, Table } from '@tanstack/react-table';
 import { ColumnFilterState } from './table.types';
 import { SelectionState } from '../features';
 export interface DataTableApi<T = any> {
@@ -10,6 +10,9 @@ export interface DataTableApi<T = any> {
         hideAllColumns: () => void;
         resetColumnVisibility: () => void;
     };
+    table: {
+        getTable: () => Table<T>;
+    };
     columnOrdering: {
         setColumnOrder: (columnOrder: ColumnOrderState) => void;
         moveColumn: (columnId: string, toIndex: number) => void;