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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.19-beta-0.15",
+  "version": "1.0.20",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

package/src/index.d.ts

@@ -14,7 +14,4 @@ export * from './lib/hooks';
 export * from './lib/types';
 export type { Column, ColumnDef, Row, Table, Header, Cell, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, PaginationState, } from '@tanstack/react-table';
 export * from './lib/features';
-export { ServerSideTest } from './lib/examples/server-side-test';
-export { CustomColumnFilterExample } from './lib/examples/custom-column-filter-example';
-export { SimpleLocalExample } from './lib/examples/simple-local-example';
-export { AdvancedFeaturesExample } from './lib/examples/advanced-features-example';
+export * from './lib/examples';

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.ServerSideTest = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
+exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
 const tslib_1 = require("tslib");
 var table_1 = require("./lib/components/table");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return table_1.DataTable; } });
@@ -23,11 +23,4 @@ tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
 tslib_1.__exportStar(require("./lib/hooks"), exports);
 tslib_1.__exportStar(require("./lib/types"), exports);
 tslib_1.__exportStar(require("./lib/features"), exports);
-var server_side_test_1 = require("./lib/examples/server-side-test");
-Object.defineProperty(exports, "ServerSideTest", { enumerable: true, get: function () { return server_side_test_1.ServerSideTest; } });
-var custom_column_filter_example_1 = require("./lib/examples/custom-column-filter-example");
-Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
-var simple_local_example_1 = require("./lib/examples/simple-local-example");
-Object.defineProperty(exports, "SimpleLocalExample", { enumerable: true, get: function () { return simple_local_example_1.SimpleLocalExample; } });
-var advanced_features_example_1 = require("./lib/examples/advanced-features-example");
-Object.defineProperty(exports, "AdvancedFeaturesExample", { enumerable: true, get: function () { return advanced_features_example_1.AdvancedFeaturesExample; } });
+tslib_1.__exportStar(require("./lib/examples"), exports);

package/src/lib/components/filters/filter-value-input.d.ts

@@ -1,9 +1,16 @@
+import { FormControlProps, TextFieldProps, SelectProps, SxProps } from '@mui/material';
 import { Column } from '@tanstack/react-table';
 import { ColumnFilterRule } from '../../features';
 interface FilterValueInputProps<T> {
     filter: ColumnFilterRule;
     column: Column<T, any>;
     onValueChange: (value: any) => void;
+    formControlProps?: FormControlProps;
+    textFieldProps?: TextFieldProps;
+    selectProps?: SelectProps;
+    datePickerProps?: any;
+    containerSx?: SxProps;
+    [key: string]: any;
 }
-export declare function FilterValueInput<T>({ filter, column, onValueChange, }: FilterValueInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FilterValueInput<T>(props: FilterValueInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/filter-value-input.js

@@ -9,50 +9,33 @@ const moment_1 = tslib_1.__importDefault(require("moment"));
 const column_helpers_1 = require("../../utils/column-helpers");
 const AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 const x_date_pickers_1 = require("@mui/x-date-pickers");
-function FilterValueInput({ filter, column, onValueChange, }) {
+function FilterValueInput(props) {
+    const { filter, column, onValueChange, formControlProps, textFieldProps, selectProps, datePickerProps, containerSx } = props, otherProps = tslib_1.__rest(props, ["filter", "column", "onValueChange", "formControlProps", "textFieldProps", "selectProps", "datePickerProps", "containerSx"]);
     const columnType = (0, column_helpers_1.getColumnType)(column);
     const customComponent = (0, column_helpers_1.getCustomFilterComponent)(column);
     const options = (0, column_helpers_1.getColumnOptions)(column);
     const operator = filter.operator;
     if (customComponent) {
         const CustomComponent = customComponent;
-        return ((0, jsx_runtime_1.jsx)(CustomComponent, { value: filter.value, onChange: onValueChange, filter: filter, column: column }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: containerSx, children: (0, jsx_runtime_1.jsx)(CustomComponent, Object.assign({ value: filter.value, onChange: onValueChange, filter: filter, column: column }, otherProps)) }));
     }
     if (columnType === 'boolean') {
-        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
-                flex: 1,
-                minWidth: 120,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'any', children: "Any" }, 'any'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'true', children: "True" }, 'true'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'false', children: "False" }, 'false')] })] }));
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, Object.assign({ value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value) }, selectProps, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'any', children: "Any" }, 'any'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'true', children: "True" }, 'true'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'false', children: "False" }, 'false')] }))] })));
     }
-    if (columnType === 'select' && options.length > 0) {
-        if (operator === 'in' || operator === 'notIn') {
-            return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, value: Array.isArray(filter.value) ? filter.value : [], label: "Value", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.map(val => {
-                            const opt = options.find(o => o.value === val);
-                            return opt ? opt.label : val;
-                        }).join(', '), children: options.map(option => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: option.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: Array.isArray(filter.value) && filter.value.indexOf(option.value) > -1 }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) })] }));
+    if (options && options.length > 0) {
+        if (operator === 'in') {
+            const currentValue = Array.isArray(filter.value) ? filter.value : [];
+            return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Values" }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ multiple: true, value: currentValue, label: "Values", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.join(', ') }, selectProps, { children: options.map(option => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: option.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: currentValue.includes(option.value) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) }))] })));
         }
-        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value), children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ size: "small", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, formControlProps, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value) }, selectProps, { children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) }))] })));
     }
     if (columnType === 'date') {
-        return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { value: filter.value ? (0, moment_1.default)(filter.value) : null, onChange: (e) => onValueChange(e === null || e === void 0 ? void 0 : e.toDate()), slotProps: {
-                    textField: {
-                        size: 'small',
-                        label: 'Value',
-                        sx: {
-                            flex: 1,
-                            minWidth: 120,
-                        },
-                    },
-                } }) }));
+        return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({ value: filter.value ? (0, moment_1.default)(filter.value) : null, onChange: (e) => onValueChange(e === null || e === void 0 ? void 0 : e.toDate()), slotProps: {
+                    textField: Object.assign({ size: 'small', label: 'Value', sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps),
+                } }, datePickerProps)) }));
     }
     if (columnType === 'number') {
-        return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: {
-                flex: 1,
-                minWidth: 120,
-            } }));
+        return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps)));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: {
-            flex: 1,
-            minWidth: 120,
-        } }));
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: Object.assign({ flex: 1, minWidth: 120 }, containerSx) }, textFieldProps)));
 }

package/src/lib/components/headers/draggable-header.d.ts

@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/material';
 import { Header } from '@tanstack/react-table';
 import React from 'react';
 interface DraggableHeaderProps<T> {
@@ -5,9 +6,12 @@ interface DraggableHeaderProps<T> {
     enableSorting?: boolean;
     draggable?: boolean;
     onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    containerSx?: SxProps;
+    sortIconProps?: any;
+    alignment?: 'left' | 'center' | 'right';
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
-    alignment?: 'left' | 'center' | 'right';
+    [key: string]: any;
 }
-export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, alignment, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+export declare function DraggableHeader<T>(props: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/headers/draggable-header.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraggableHeader = DraggableHeader;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, alignment, }) {
+function DraggableHeader(props) {
+    const { header, enableSorting = true, draggable = false, onColumnReorder, containerSx, sortIconProps, alignment, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["header", "enableSorting", "draggable", "onColumnReorder", "containerSx", "sortIconProps", "alignment", "slots", "slotProps"]);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragOver, setDragOver] = (0, react_1.useState)(false);
     const autoScrollIntervalRef = (0, react_1.useRef)(null);
     const dragStartPositionRef = (0, react_1.useRef)(null);
     const headerElementRef = (0, react_1.useRef)(null);
+    const sortIconAscSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'sortIconAsc');
+    const sortIconDescSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'sortIconDesc');
     const SortIconAscSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconAsc', icons_material_1.ArrowUpwardOutlined);
     const SortIconDescSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconDesc', icons_material_1.ArrowDownwardOutlined);
     const AUTO_SCROLL_THRESHOLD = 50;
@@ -86,56 +90,46 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
     }, []);
     const checkAutoScroll = (0, react_1.useCallback)((clientX) => {
         const container = findScrollableContainer();
-        if (!container) {
+        if (!container)
             return;
-        }
-        const rect = container.getBoundingClientRect();
-        const distanceFromLeft = clientX - rect.left;
-        const distanceFromRight = rect.right - clientX;
-        stopAutoScroll();
-        if (distanceFromLeft < AUTO_SCROLL_THRESHOLD && container.scrollLeft > 0) {
+        const containerRect = container.getBoundingClientRect();
+        const leftEdge = containerRect.left + AUTO_SCROLL_THRESHOLD;
+        const rightEdge = containerRect.right - AUTO_SCROLL_THRESHOLD;
+        if (clientX < leftEdge) {
             startAutoScroll('left');
         }
-        else if (distanceFromRight < AUTO_SCROLL_THRESHOLD &&
-            container.scrollLeft < container.scrollWidth - container.clientWidth) {
+        else if (clientX > rightEdge) {
             startAutoScroll('right');
         }
-    }, [
-        findScrollableContainer,
-        startAutoScroll,
-        stopAutoScroll,
-    ]);
+        else {
+            stopAutoScroll();
+        }
+    }, [findScrollableContainer, startAutoScroll, stopAutoScroll]);
     const handleDragStart = (e) => {
         if (!draggable)
             return;
-        setIsDragging(true);
-        dragStartPositionRef.current = {
-            x: e.clientX,
-            y: e.clientY,
-        };
         e.dataTransfer.setData('text/plain', header.id);
         e.dataTransfer.effectAllowed = 'move';
+        setIsDragging(true);
+        dragStartPositionRef.current = { x: e.clientX, y: e.clientY };
     };
-    const handleDrag = (0, react_1.useCallback)((e) => {
-        if (!isDragging || !draggable)
+    const handleDrag = (e) => {
+        if (!draggable || !dragStartPositionRef.current)
             return;
-        if (e.clientX > 0 && e.clientY > 0) {
-            checkAutoScroll(e.clientX);
-        }
-    }, [
-        isDragging,
-        draggable,
-        checkAutoScroll,
-    ]);
+        checkAutoScroll(e.clientX);
+    };
     const getSortIcon = () => {
         if (!enableSorting)
             return null;
         const sortDirection = header.column.getIsSorted();
+        const mergedSortIconProps = (0, slot_helpers_1.mergeSlotProps)({
+            fontSize: 'small',
+        }, sortIconProps || {});
         if (sortDirection === 'asc') {
-            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconAsc)));
+            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconAscSlotProps))));
         }
         if (sortDirection === 'desc') {
-            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconDesc)));
+            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconDescSlotProps))));
         }
         return null;
     };
@@ -188,27 +182,25 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
             return 'pointer';
         return 'default';
     };
+    const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
+        ref: headerElementRef,
+        sx: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: justifyContent, gap: 1, cursor: getCursor(), userSelect: 'none', opacity: isDragging ? 0.5 : 1, backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent', borderLeft: dragOver ? '2px solid #1976d2' : 'none', padding: dragOver ? '0 0 0 -2px' : '0', width: '100%', height: '100%', '&:active': {
+                cursor: draggable ? 'grabbing' : 'pointer',
+            } }, containerSx),
+        draggable: draggable,
+        onDragStart: handleDragStart,
+        onDrag: handleDrag,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        onClick: enableSorting ? handleSort : undefined,
+    }, otherProps);
     if (!draggable && !enableSorting) {
         return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: headerElementRef, sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: justifyContent,
-            gap: 1,
-            cursor: getCursor(),
-            userSelect: 'none',
-            opacity: isDragging ? 0.5 : 1,
-            backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent',
-            borderLeft: dragOver ? '2px solid #1976d2' : 'none',
-            padding: dragOver ? '0 0 0 -2px' : '0',
-            width: '100%',
-            height: '100%',
-            '&:active': {
-                cursor: draggable ? 'grabbing' : 'pointer',
-            },
-        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedContainerProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: {
                 display: 'inline-flex',
                 gap: 1,
-            }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
+            }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) })));
 }

package/src/lib/components/headers/table-header.d.ts

@@ -1,10 +1,16 @@
-export interface TableHeaderProps {
+import { TableHeadProps, TableRowProps, TableCellProps, SxProps } from '@mui/material';
+export interface TableHeaderProps extends TableHeadProps {
     draggable?: boolean;
     enableColumnResizing?: boolean;
     enableStickyHeader?: boolean;
     fitToScreen?: boolean;
     onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    headerRowProps?: TableRowProps;
+    headerCellProps?: TableCellProps;
+    containerSx?: SxProps;
+    resizeHandleSx?: SxProps;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
+    [key: string]: any;
 }
-export declare function TableHeader<T>({ draggable, enableColumnResizing, enableStickyHeader, fitToScreen, onColumnReorder, slots, slotProps, }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader<T>(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/headers/table-header.js

@@ -1,25 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeader = TableHeader;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const draggable_header_1 = require("./draggable-header");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const utils_1 = require("../../utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function TableHeader({ draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, slots, slotProps, }) {
+function TableHeader(props) {
+    const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["draggable", "enableColumnResizing", "enableStickyHeader", "fitToScreen", "onColumnReorder", "headerRowProps", "headerCellProps", "containerSx", "resizeHandleSx", "slots", "slotProps"]);
     const theme = (0, material_1.useTheme)();
     const { table } = (0, data_table_context_1.useDataTableContext)();
+    const headerCellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerCell');
+    const headerRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerRow');
+    const headerSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'header');
     const HeaderCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerCell', material_1.TableCell);
     const HeaderRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerRow', material_1.TableRow);
     const HeaderSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'header', material_1.TableHead);
+    const mergedHeaderProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: containerSx,
+    }, headerSlotProps, otherProps);
+    const mergedHeaderRowProps = (0, slot_helpers_1.mergeSlotProps)({}, headerRowSlotProps, headerRowProps || {});
     const renderHeaderCell = (header) => {
         const isPinned = header.column.getIsPinned();
         const pinnedPosition = isPinned ? header.column.getStart('left') : undefined;
         const pinnedRightPosition = isPinned === 'right' ? header.column.getAfter('right') : undefined;
         const alignment = (0, utils_1.getColumnAlignment)(header.column.columnDef);
         const enableSorting = header.column.getCanSort();
-        return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
+        const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
+            align: alignment,
+            sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
                 width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
                 isPinned,
                 pinnedPosition,
@@ -28,21 +39,16 @@ function TableHeader({ draggable = false, enableColumnResizing = false, enableSt
                 pinnedRightPosition,
                 zIndex: isPinned ? 10 : 1,
                 disableStickyHeader: enableStickyHeader,
-            })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
-                        position: 'absolute',
-                        right: 0,
-                        top: '25%',
-                        height: '50%',
-                        width: '3px',
-                        cursor: 'col-resize',
-                        userSelect: 'none',
-                        touchAction: 'none',
-                        borderRadius: '4px',
-                        backgroundColor: header.column.getIsResizing() ? 'primary.main' : theme.palette.grey[300],
-                        '&:hover': {
-                            backgroundColor: theme.palette.primary.main,
-                        },
-                    } })) : null] }), header.id));
+            })),
+        }, headerCellSlotProps, headerCellProps || {});
+        const mergedResizeHandleProps = (0, slot_helpers_1.mergeSlotProps)({
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            sx: Object.assign({ position: 'absolute', right: 0, top: '25%', height: '50%', width: '3px', cursor: 'col-resize', userSelect: 'none', touchAction: 'none', borderRadius: '4px', backgroundColor: header.column.getIsResizing() ? 'primary.main' : theme.palette.grey[300], '&:hover': {
+                    backgroundColor: theme.palette.primary.main,
+                } }, resizeHandleSx),
+        });
+        return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, Object.assign({}, mergedHeaderCellProps, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedResizeHandleProps))) : null] }), header.id));
     };
-    return ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerRow, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
+    return ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, mergedHeaderProps, { children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, mergedHeaderRowProps, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
 }

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

@@ -1,4 +1,4 @@
-import { TablePaginationProps } from '@mui/material';
+import { TablePaginationProps, SxProps } from '@mui/material';
 import { ReactNode } from 'react';
 export interface DataTablePaginationProps extends Omit<TablePaginationProps, 'count' | 'rowsPerPage' | 'page' | 'onPageChange' | 'onRowsPerPageChange'> {
     totalRow: number;
@@ -7,5 +7,11 @@ export interface DataTablePaginationProps extends Omit<TablePaginationProps, 'co
         pageIndex: number;
         pageSize: number;
     };
+    containerSx?: SxProps;
+    paginationProps?: TablePaginationProps;
+    footerSx?: SxProps;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
 }
-export declare const DataTablePagination: import("react").MemoExoticComponent<({ footerFilter, pagination, totalRow, ...props }: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DataTablePagination: import("react").MemoExoticComponent<(props: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -6,20 +6,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const data_table_context_1 = require("../../contexts/data-table-context");
-exports.DataTablePagination = (0, react_1.memo)((_a) => {
-    var { footerFilter = null, pagination, totalRow } = _a, props = tslib_1.__rest(_a, ["footerFilter", "pagination", "totalRow"]);
+const slot_helpers_1 = require("../../utils/slot-helpers");
+exports.DataTablePagination = (0, react_1.memo)((props) => {
+    const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["footerFilter", "pagination", "totalRow", "containerSx", "paginationProps", "footerSx", "slots", "slotProps"]);
     const { table } = (0, data_table_context_1.useDataTableContext)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            justifyContent: 'space-between',
-            px: 2,
-        }, children: [footerFilter, (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({ component: "div", count: totalRow, rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize, page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex, onPageChange: (_, page) => {
-                    table.setPageIndex(page);
-                }, onRowsPerPageChange: e => {
-                    const newPageSize = Number(e.target.value);
-                    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}`}` }, props))] }));
+    const paginationSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pagination');
+    const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', material_1.TablePagination);
+    const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between', px: 2 }, containerSx),
+    });
+    const mergedPaginationProps = (0, slot_helpers_1.mergeSlotProps)({
+        component: 'div',
+        count: totalRow,
+        rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize,
+        page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex,
+        onPageChange: (_, page) => {
+            table.setPageIndex(page);
+        },
+        onRowsPerPageChange: (e) => {
+            const newPageSize = Number(e.target.value);
+            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}`}`,
+    }, paginationSlotProps, Object.assign(Object.assign({}, paginationProps), otherProps));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(PaginationSlot, Object.assign({}, mergedPaginationProps))] })));
 });

package/src/lib/components/rows/data-table-row.d.ts

@@ -1,13 +1,20 @@
+import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
 import { Row } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-export interface DataTableRowProps<T> {
+export interface DataTableRowProps<T> extends TableRowProps {
     row: Row<T>;
     enableHover?: boolean;
     enableStripes?: boolean;
     isOdd?: boolean;
     renderSubComponent?: (row: Row<T>) => ReactNode;
     disableStickyHeader?: boolean;
+    cellProps?: TableCellProps;
+    expandedRowProps?: TableRowProps;
+    expandedCellProps?: TableCellProps;
+    containerSx?: SxProps;
+    expandedContainerSx?: SxProps;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
+    [key: string]: any;
 }
-export declare function DataTableRow<T>({ row, enableHover, enableStripes, isOdd, renderSubComponent, disableStickyHeader, slots, slotProps, }: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableRow<T>(props: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/data-table-row.js

@@ -1,23 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableRow = DataTableRow;
+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 utils_1 = require("../../utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, slots, slotProps, }) {
+function DataTableRow(props) {
+    const { row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, cellProps, expandedRowProps, expandedCellProps, containerSx, expandedContainerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["row", "enableHover", "enableStripes", "isOdd", "renderSubComponent", "disableStickyHeader", "cellProps", "expandedRowProps", "expandedCellProps", "containerSx", "expandedContainerSx", "slots", "slotProps"]);
+    const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
+    const expandedRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'expandedRow');
+    const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
     const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
     const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
     const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, { hover: enableHover, sx: {
-                    backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent',
-                }, children: row.getVisibleCells().map(cell => {
+    const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
+        hover: enableHover,
+        sx: Object.assign({ backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent' }, containerSx),
+    }, rowSlotProps, otherProps);
+    const mergedExpandedRowProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: expandedContainerSx,
+    }, expandedRowSlotProps, expandedRowProps || {});
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, mergedRowProps, { children: row.getVisibleCells().map(cell => {
                     const isPinned = cell.column.getIsPinned();
                     const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
                     const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
                     const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
-                    return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
+                    const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
+                        align: alignment,
+                        sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
                             width: cell.column.getSize() || 'auto',
                             isPinned,
                             pinnedPosition,
@@ -26,6 +38,8 @@ function DataTableRow({ row, enableHover = true, enableStripes = false, isOdd =
                             disableStickyHeader,
                             isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
                             isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
-                        })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.cell, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
-                }) }), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, { children: (0, jsx_runtime_1.jsx)(CellSlot, { colSpan: row.getVisibleCells().length + 1, sx: { py: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
+                        })),
+                    }, cellSlotProps, cellProps || {});
+                    return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({}, mergedCellProps, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
+                }) })), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, Object.assign({}, mergedExpandedRowProps, { children: (0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ colSpan: row.getVisibleCells().length + 1, sx: Object.assign({ py: 0 }, expandedCellProps === null || expandedCellProps === void 0 ? void 0 : expandedCellProps.sx) }, (0, slot_helpers_1.mergeSlotProps)({}, cellSlotProps, expandedCellProps || {}), { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) })) }))) : null] }));
 }

package/src/lib/components/rows/empty-data-row.d.ts

@@ -1,6 +1,13 @@
-export declare function EmptyDataRow({ colSpan, message, slots, slotProps }: {
+import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
+export interface EmptyDataRowProps {
     colSpan: number;
     message: string;
-    slots: Record<string, any>;
-    slotProps: Record<string, any>;
-}): import("react/jsx-runtime").JSX.Element;
+    rowProps?: TableRowProps;
+    cellProps?: TableCellProps;
+    containerSx?: SxProps;
+    messageSx?: SxProps;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
+}
+export declare function EmptyDataRow(props: EmptyDataRowProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/rows/empty-data-row.js

@@ -1,11 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyDataRow = EmptyDataRow;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function EmptyDataRow({ colSpan, message, slots, slotProps }) {
+function EmptyDataRow(props) {
+    const { colSpan, message, rowProps, cellProps, containerSx, messageSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["colSpan", "message", "rowProps", "cellProps", "containerSx", "messageSx", "slots", "slotProps"]);
+    const emptyRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'emptyRow');
+    const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
     const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', material_1.TableRow);
     const EmptyCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
-    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, { children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, Object.assign({ colSpan: colSpan, align: "center", sx: { py: 4 } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.emptyCell, { children: message })) }));
+    const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: containerSx,
+    }, emptyRowSlotProps, rowProps || {});
+    const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
+        colSpan,
+        align: 'center',
+        sx: Object.assign({ py: 4 }, messageSx),
+    }, cellSlotProps, cellProps || {});
+    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, Object.assign({}, mergedRowProps, { children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, Object.assign({}, mergedCellProps, { children: message })) })));
 }

package/src/lib/components/rows/loading-rows.d.ts

@@ -1,5 +1,12 @@
-export declare function LoadingRows({ rowCount, slots, slotProps, }: {
+import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
+export interface LoadingRowsProps {
     rowCount?: number;
+    rowProps?: TableRowProps;
+    cellProps?: TableCellProps;
+    skeletonProps?: any;
+    containerSx?: SxProps;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
-}): import("react/jsx-runtime").JSX.Element;
+    [key: string]: any;
+}
+export declare function LoadingRows(props: LoadingRowsProps): import("react/jsx-runtime").JSX.Element;