@xanui/ui 1.1.26 → 1.1.28

package/Datatable/Row.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import TableRow from '../TableRow/index.mjs';
 import TableCell from '../TableCell/index.mjs';
@@ -11,12 +11,13 @@ import ListItem from '../ListItem/index.mjs';
 import ActionIcon from '@xanui/icons/MoreVert';
 import Menu from '../Menu/index.mjs';
 
-const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }) => {
+const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }) => {
+    var _a;
     const selected = row.id ? state.selected.includes(row === null || row === void 0 ? void 0 : row.id) : false;
     let selectedColor = selected ? "primary.soft" : "transparent";
     const [target, setTarget] = useState();
     const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
-    return (jsxs(TableRow, { disabled: isDisable, children: [!hideCheckbox && jsx(TableCell, { width: 40, bgcolor: selectedColor, children: !!row.id && jsx(Checkbox, { checked: selected, onChange: () => {
+    return (jsxs(TableRow, { children: [!hideCheckbox && jsx(TableCell, { width: 40, bgcolor: selectedColor, children: !!row.id && jsx(Checkbox, { size: compact ? "small" : "medium", checked: selected, onChange: () => {
                         if (isDisable || !row.id)
                             return;
                         let ids = [...state.selected];
@@ -37,19 +38,19 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns,
                 if (!row[field])
                     return jsx(TableCell, {}, idx);
                 return (jsx(TableCell, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor, children: row[field] }), idx));
-            }), jsx(TableCell, { width: 30, bgcolor: selectedColor, borderColor: "divider", children: rowAction && jsxs(Fragment, { children: [jsx(IconButton, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsx(ActionIcon, {}) }), jsx(Menu, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsx(List, { bgcolor: "background.primary", minWidth: 160, sx: {
-                                    '& > li': {
-                                        borderBottom: 1,
-                                        '&:last-child': {
-                                            borderBottom: 0
-                                        }
+            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxs(TableCell, { width: 30, bgcolor: selectedColor, borderColor: "divider", children: [jsx(IconButton, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsx(ActionIcon, {}) }), jsx(Menu, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsx(List, { bgcolor: "background.primary", minWidth: 160, sx: {
+                                '& > li': {
+                                    borderBottom: 1,
+                                    '&:last-child': {
+                                        borderBottom: 0
                                     }
-                                }, children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
-                                    return (jsx(ListItem, { startIcon: icon, onClick: (e) => {
-                                            onClick && onClick(e);
-                                            setTarget(null);
-                                        }, children: label }, label));
-                                }) }) })] }) })] }));
+                                }
+                            }, children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
+                                return (jsx(ListItem, { startIcon: icon, onClick: (e) => {
+                                        onClick && onClick(e);
+                                        setTarget(null);
+                                    }, children: label }, label));
+                            }) }) })] })] }));
 };
 
 export { Row as default };

package/Datatable/Row.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Row.mjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\n\n\ntype Props = DatatablePropsWithState & {\n    rawRow: DataTableDefaultRow;\n    row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }: Props) => {\n    const selected = row.id ? state.selected.includes(row?.id) : false\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n    const [target, setTarget] = useState<any>()\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n    return (\n        <TableRow disabled={isDisable}>\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\n                {\n                    !!row.id && <Checkbox\n                        checked={selected}\n                        onChange={() => {\n                            if (isDisable || !row.id) return\n                            let ids = [...state.selected]\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n                            let selectedLength = 0\n                            rows.forEach(r => {\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\n                                if (!isDisable) selectedLength++\n                            })\n\n                            update({\n                                selectAll: selectedLength === ids.length,\n                                selected: ids\n                            })\n                        }}\n                    />\n                }\n\n            </TableCell>}\n            {\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\n                    field = field || label\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\n                    return (\n                        <TableCell\n                            key={idx}\n                            textAlign=\"left\"\n                            {...rest}\n                            bgcolor={selectedColor}\n                        >\n                            {row[field]}\n                        </TableCell>\n                    )\n                })\n            }\n            <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n                {rowAction && <>\n                    <IconButton\n                        disabled={isDisable || selected}\n                        onClick={(e: any) => setTarget(e.currentTarget)}\n                        variant=\"text\"\n                        color=\"default\"\n                    >\n                        <ActionIcon />\n                    </IconButton>\n                    <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n                        <List\n                            bgcolor=\"background.primary\"\n                            minWidth={160}\n                            sx={{\n                                '& > li': {\n                                    borderBottom: 1,\n                                    '&:last-child': {\n                                        borderBottom: 0\n                                    }\n                                }\n                            }}\n                        >\n                            {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n                                return (\n                                    <ListItem\n                                        key={label}\n                                        startIcon={icon}\n                                        onClick={(e: any) => {\n                                            onClick && onClick(e)\n                                            setTarget(null)\n                                        }}\n                                    >{label}</ListItem>\n                                )\n                            })}\n                        </List>\n                    </Menu>\n                </>}\n            </TableCell>\n        </TableRow>\n    )\n}\n\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;AAMI;AAOwB;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;AAWrB;AAiBgB;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAO5B;;"}
+{"version":3,"file":"Row.mjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from 'react'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IconButton from '../IconButton'\nimport List from '../List'\nimport ListItem from '../ListItem'\nimport ActionIcon from '@xanui/icons/MoreVert'\nimport Menu from '../Menu'\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\n\n\ntype Props = DatatablePropsWithState & {\n    rawRow: DataTableDefaultRow;\n    row: DataTableDefaultRow;\n}\n\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\n    const selected = row.id ? state.selected.includes(row?.id) : false\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\n    const [target, setTarget] = useState<any>()\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\n\n    return (\n        <TableRow >\n            {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\n                {\n                    !!row.id && <Checkbox\n                        size={compact ? \"small\" : \"medium\"}\n                        checked={selected}\n                        onChange={() => {\n                            if (isDisable || !row.id) return\n                            let ids = [...state.selected]\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\n                            let selectedLength = 0\n                            rows.forEach(r => {\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\n                                if (!isDisable) selectedLength++\n                            })\n\n                            update({\n                                selectAll: selectedLength === ids.length,\n                                selected: ids\n                            })\n                        }}\n                    />\n                }\n\n            </TableCell>}\n            {\n                columns.map(({ label, field, sortable, ...rest }, idx) => {\n                    field = field || label\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\n                    return (\n                        <TableCell\n                            key={idx}\n                            textAlign=\"left\"\n                            {...rest}\n                            bgcolor={selectedColor}\n                        >\n                            {row[field]}\n                        </TableCell>\n                    )\n                })\n            }\n            {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\n                <IconButton\n                    disabled={isDisable || selected}\n                    onClick={(e: any) => setTarget(e.currentTarget)}\n                    variant=\"text\"\n                    color=\"default\"\n                >\n                    <ActionIcon />\n                </IconButton>\n                <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\n                    <List\n                        bgcolor=\"background.primary\"\n                        minWidth={160}\n                        sx={{\n                            '& > li': {\n                                borderBottom: 1,\n                                '&:last-child': {\n                                    borderBottom: 0\n                                }\n                            }\n                        }}\n                    >\n                        {rowAction({ row, state }).map(({ label, icon, onClick }) => {\n                            return (\n                                <ListItem\n                                    key={label}\n                                    startIcon={icon}\n                                    onClick={(e: any) => {\n                                        onClick && onClick(e)\n                                        setTarget(null)\n                                    }}\n                                >{label}</ListItem>\n                            )\n                        })}\n                    </List>\n                </Menu>\n            </TableCell>\n            }\n        </TableRow>\n    )\n}\n\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}

package/Datatable/Table.js

@@ -8,14 +8,14 @@ var index$1 = require('../TableBody/index.js');
 var Row = require('./Row.js');
 
 const TableArea = (props) => {
-    let { rows, renderRow, state, update, slotProps } = props;
-    return (jsxRuntime.jsxs(index, Object.assign({ width: "100%", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsxRuntime.jsx(TableHead, Object.assign({}, props, { update: update, state: state })), jsxRuntime.jsx(index$1, { sx: {
+    let { rows, compact, renderRow, state, update, slotProps } = props;
+    return (jsxRuntime.jsxs(index, Object.assign({ width: "100%", size: compact ? "small" : "medium", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsxRuntime.jsx(TableHead, Object.assign({}, props, { update: update, state: state })), jsxRuntime.jsx(index$1, { sx: {
                     '& tr:last-child td': {
                         borderBottom: 0
                     }
                 }, children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
                     let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
-                    return jsxRuntime.jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
+                    return jsxRuntime.jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), `dt-row-${row.id}-${idx}`);
                 }) })] })));
 };
 

package/Datatable/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\n                  return <Row\n                     key={row.id + idx}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;AAQA;AAKY;AACG;AACF;AACH;AAIK;;AASH;AAKf;;"}
+{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Datatable/Table.mjs

@@ -6,14 +6,14 @@ import TableBody from '../TableBody/index.mjs';
 import Row from './Row.mjs';
 
 const TableArea = (props) => {
-    let { rows, renderRow, state, update, slotProps } = props;
-    return (jsxs(Table, Object.assign({ width: "100%", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, { sx: {
+    let { rows, compact, renderRow, state, update, slotProps } = props;
+    return (jsxs(Table, Object.assign({ width: "100%", size: compact ? "small" : "medium", border: "1px solid", borderColor: "divider" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.table, { children: [jsx(TableHeadRender, Object.assign({}, props, { update: update, state: state })), jsx(TableBody, { sx: {
                     '& tr:last-child td': {
                         borderBottom: 0
                     }
                 }, children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
                     let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
-                    return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id + idx);
+                    return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), `dt-row-${row.id}-${idx}`);
                 }) })] })));
 };
 

package/Datatable/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\n                  return <Row\n                     key={row.id + idx}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;AAQA;AAKY;AACG;AACF;AACH;AAIK;;AASH;AAKf;;"}
+{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n   let {\n      rows,\n      compact,\n      renderRow,\n      state,\n      update,\n      slotProps\n   } = props\n\n   return (\n      <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n         <TableHead {...props} update={update} state={state} />\n         <TableBody\n            sx={{\n               '& tr:last-child td': {\n                  borderBottom: 0\n               }\n            }}\n         >\n            {\n               rows?.map((row: any, idx) => {\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\n                  return <Row\n                     key={`dt-row-${row.id}-${idx}`}\n                     rawRow={row}\n                     row={_row}\n                     {...props}\n                     update={update}\n                     state={state}\n                  />\n               })\n            }\n         </TableBody>\n      </Table>\n   )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Datatable/TableHead.js

@@ -12,12 +12,13 @@ var index$4 = require('../Stack/index.js');
 var ArrowDropDown = require('@xanui/icons/ArrowDropDown');
 var icons = require('@xanui/icons');
 
-const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }) => {
+    var _a;
     if (!columns.length)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
     const sortables = state.sortable || {};
-    return (jsxRuntime.jsx(index, { position: "relative", children: jsxRuntime.jsxs(index$1, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsxRuntime.jsx(index$2, { th: true, width: 40, children: jsxRuntime.jsx(index$3, { checkIcon: state.selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    return (jsxRuntime.jsx(index, { position: "relative", children: jsxRuntime.jsxs(index$1, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsxRuntime.jsx(index$2, { th: true, width: 40, children: jsxRuntime.jsx(index$3, { size: compact ? "small" : "medium", checkIcon: state.selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -44,7 +45,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, s
                             }
                         } }) }), columns.map((_a, idx) => {
                     var { label, field: _f, sortable } = _a, rest = tslib.__rest(_a, ["label", "field", "sortable"]);
-                    return jsxRuntime.jsx(index$2, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxRuntime.jsxs(index$4, { flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
+                    return jsxRuntime.jsx(index$2, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxRuntime.jsxs(index$4, { disabled: skeleton ? true : false, flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
                                 if (sortable) {
                                     let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
                                     update({
@@ -52,7 +53,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, s
                                     });
                                 }
                             }, children: [label, sortable && jsxRuntime.jsx(jsxRuntime.Fragment, { children: sortables[_f] === 'asc' ? jsxRuntime.jsx(ArrowDropDown, {}) : jsxRuntime.jsx(icons.ArrowDropUp, {}) })] }) }), idx);
-                }), rowAction && jsxRuntime.jsx(index$2, { th: true, width: 30 })] }) }));
+                }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsx(index$2, { th: true, width: 30 })] }) }));
 };
 
 module.exports = TableHeadRender;

package/Datatable/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA;;AACyB;AACrB;AACA;AACA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;AAAiD;;AAS9C;AACA;;AAKC;;AAET;AASI;AAQhC;;"}
+{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        size={compact ? \"small\" : \"medium\"}\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            disabled={skeleton ? true : false}\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAUG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/TableHead.mjs

@@ -10,12 +10,13 @@ import Stack from '../Stack/index.mjs';
 import ArrowDropDown from '@xanui/icons/ArrowDropDown';
 import { ArrowDropUp } from '@xanui/icons';
 
-const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }) => {
+    var _a;
     if (!columns.length)
         return jsx(Fragment, {});
     let checked = state.selectAll || !!state.selected.length;
     const sortables = state.sortable || {};
-    return (jsx(TableHead, { position: "relative", children: jsxs(TableRow, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsx(TableCell, { th: true, width: 40, children: jsx(Checkbox, { checkIcon: state.selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    return (jsx(TableHead, { position: "relative", children: jsxs(TableRow, { bgcolor: "default", borderBottom: 1, children: [!hideCheckbox && jsx(TableCell, { th: true, width: 40, children: jsx(Checkbox, { size: compact ? "small" : "medium", checkIcon: state.selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -42,7 +43,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, s
                             }
                         } }) }), columns.map((_a, idx) => {
                     var { label, field: _f, sortable } = _a, rest = __rest(_a, ["label", "field", "sortable"]);
-                    return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxs(Stack, { flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
+                    return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: jsxs(Stack, { disabled: skeleton ? true : false, flexRow: true, alignItems: "center", cursor: sortable ? "pointer" : "default", userSelect: "none", onClick: () => {
                                 if (sortable) {
                                     let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
                                     update({
@@ -50,7 +51,7 @@ const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, s
                                     });
                                 }
                             }, children: [label, sortable && jsx(Fragment, { children: sortables[_f] === 'asc' ? jsx(ArrowDropDown, {}) : jsx(ArrowDropUp, {}) })] }) }), idx);
-                }), rowAction && jsx(TableCell, { th: true, width: 30 })] }) }));
+                }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsx(TableCell, { th: true, width: 30 })] }) }));
 };
 
 export { TableHeadRender as default };

package/Datatable/TableHead.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.mjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    rowAction && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;;AACyB;AACrB;AACA;AACA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;AAAiD;;AAS9C;AACA;;AAKC;;AAET;AASI;AAQhC;;"}
+{"version":3,"file":"TableHead.mjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\nimport TableHead from '../TableHead'\nimport TableRow from '../TableRow'\nimport TableCell from '../TableCell'\nimport Checkbox from '../Checkbox'\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\nimport { DatatablePropsWithState } from './types';\nimport Stack from '../Stack';\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\nimport { ArrowDropUp } from '@xanui/icons';\n\n\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\n    if (!columns.length) return <></>\n    let checked = state.selectAll || !!state.selected.length\n    const sortables = state.sortable || {}\n\n    return (\n        <TableHead position=\"relative\">\n            <TableRow bgcolor=\"default\" borderBottom={1} >\n                {!hideCheckbox && <TableCell th width={40}>\n                    <Checkbox\n                        size={compact ? \"small\" : \"medium\"}\n                        checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\n                        checked={checked}\n                        onChange={() => {\n                            let ids: any = []\n                            let undefinedCount = 0\n                            for (let i = 0; i < rows.length; i++) {\n                                const row = rows[i]\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\n                                if (!isDisable && row.id) {\n                                    ids.push(row.id)\n                                } else {\n                                    undefinedCount += 1\n                                }\n                            }\n\n                            if (undefinedCount) {\n                                update({\n                                    selected: state.selected.length ? [] : ids,\n                                    selectAll: !state.selected.length\n                                })\n                            } else {\n                                update({\n                                    selected: state.selectAll ? [] : ids,\n                                    selectAll: !state.selectAll\n                                })\n                            }\n                        }}\n                    />\n                </TableCell>}\n                {\n                    columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>\n                        <Stack\n                            disabled={skeleton ? true : false}\n                            flexRow\n                            alignItems=\"center\"\n                            cursor={sortable ? \"pointer\" : \"default\"}\n                            userSelect={\"none\"}\n                            onClick={() => {\n\n                                if (sortable) {\n                                    let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\n                                    update({\n                                        sortable: {\n                                            ...sortables,\n                                            [_f as any]: newSort\n                                        }\n                                    })\n                                }\n                            }}\n                        >\n                            {label}\n                            {sortable && <>\n                                {\n                                    sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\n                                }\n                            </>}\n                        </Stack>\n                    </TableCell>)\n                }\n                {\n                    !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\n                }\n            </TableRow>\n        </TableHead>\n    )\n}\n\nexport default TableHeadRender\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAUG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DatatableProps } from './types.js';
 
-declare const DataTable: React.ForwardRefExoticComponent<DatatableProps & React.RefAttributes<HTMLDivElement>>;
+declare const DataTable: React.ForwardRefExoticComponent<Omit<DatatableProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { DataTable as default };

package/Datatable/index.js

@@ -1,19 +1,56 @@
 "use client";
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../ViewBox/index.js');
+var index$1 = require('../ViewBox/index.js');
 var core = require('@xanui/core');
 var SelectedBox = require('./SelectedBox.js');
 var Table = require('./Table.js');
 var FilterBox = require('./FilterBox.js');
-var index$2 = require('../TablePagination/index.js');
-var index$1 = require('../Stack/index.js');
+var index$3 = require('../TablePagination/index.js');
+var index$2 = require('../Stack/index.js');
+var index = require('../Skeleton/index.js');
 
 const DataTable = React.forwardRef((props, ref) => {
-    let [_props] = core.useInterface("Datatable", props, {});
-    let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
+    let [p] = core.useInterface("Datatable", props, {});
+    let _props = React.useMemo(() => {
+        let np = Object.assign({}, p);
+        if (typeof np.skeleton === 'number' || np.skeleton === true) {
+            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10;
+            let length = np.skeleton === true ? limit : np.skeleton;
+            if (!np.hideCheckbox) {
+                np.columns = [{
+                        label: '', field: "__checkbox", width: 34
+                    }, ...np.columns];
+            }
+            if (np.rowAction) {
+                np.columns = [...np.columns, { label: "", field: "__actions", width: 34 }];
+            }
+            let columns = np.columns || [];
+            np.rows = [];
+            for (let i = 0; i < length; i++) {
+                let r = { id: i };
+                for (let col of columns) {
+                    r[col.field] = "";
+                }
+                np.rows.push(r);
+            }
+            np.renderRow = (r) => {
+                for (let col of columns) {
+                    r[col.field] = jsxRuntime.jsx(index, { animation: "wave", height: 16, radius: .5, width: "100%" });
+                }
+                return r;
+            };
+            np.hideCheckbox = true;
+            np.rowAction = undefined;
+        }
+        return np;
+    }, [p.skeleton]);
+    let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, defaultState = {}, onStateChange, fixedHeader, hidePagination, slotProps, 
+    // skip props for ViewBox
+    skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "defaultState", "onStateChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
     const [state, setState] = React.useState({
         selected: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selected) || [],
         selectAll: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selectAll) || false,
@@ -26,6 +63,7 @@ const DataTable = React.forwardRef((props, ref) => {
         tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
         search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
         sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
+        filters: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.filter) || {}
     });
     const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
     React.useEffect(() => {
@@ -33,20 +71,22 @@ const DataTable = React.forwardRef((props, ref) => {
             onStateChange(state);
         }
     }, [state]);
-    return (jsxRuntime.jsxs(index, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
-            '& thead': fixedHeader ? {
+    return (jsxRuntime.jsxs(index$1, Object.assign({ height: "100%" }, viewBoxProps, { baseClass: 'datatable', ref: ref, sx: Object.assign(Object.assign({}, viewBoxProps === null || viewBoxProps === void 0 ? void 0 : viewBoxProps.sx), { '& thead': fixedHeader ? {
                 position: "sticky",
                 top: 0,
                 bgcolor: "background.primary",
                 zIndex: 1
-            } : {},
-        }, startContent: (jsxRuntime.jsxs(core.Tag, { baseClass: 'datatable-header', sxr: {
+            } : {} }), startContent: (jsxRuntime.jsxs(core.Tag, { baseClass: 'datatable-header', sxr: {
                 display: "flex",
                 flexDirection: "row",
                 justifyContent: "space-between"
-            }, children: [jsxRuntime.jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsxRuntime.jsx(Table, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(index$1, { p: 1, alignItems: "flex-end", children: !disablePagination && jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, onChange: (state) => {
+            }, children: [jsxRuntime.jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsxRuntime.jsx(Table, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(index$2, { p: 1, alignItems: "flex-end", children: !hidePagination && jsxRuntime.jsx(index$3, Object.assign({ disabled: _props.skeleton ? true : false }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: total || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, slotProps: {
+                        select: {
+                            size: "small",
+                        }
+                    }, onChange: (state) => {
                         update({ pagination: state });
-                    } })) })] }));
+                    } })) })] })));
 });
 
 module.exports = DataTable;

package/Datatable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [p] = useInterface<any>(\"Datatable\", props, {})\n\n    let _props = useMemo(() => {\n        let np = { ...p }\n\n        if (typeof np.skeleton === 'number' || np.skeleton === true) {\n            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n            let length = np.skeleton === true ? limit : np.skeleton\n\n            if (!np.hideCheckbox) {\n                np.columns = [{\n                    label: '', field: \"__checkbox\", width: 34\n                }, ...np.columns]\n            }\n\n            if (np.rowAction) {\n                np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n            }\n\n            let columns = np.columns || []\n\n            np.rows = []\n            for (let i = 0; i < length; i++) {\n                let r: any = { id: i }\n                for (let col of columns) {\n                    r[col.field] = \"\"\n                }\n                np.rows.push(r)\n            }\n\n            np.renderRow = (r: any) => {\n                for (let col of columns) {\n                    r[col.field] = <Skeleton\n                        animation={\"wave\"}\n                        height={16}\n                        radius={.5}\n                        width={\"100%\"}\n                    />\n                }\n                return r\n            }\n            np.hideCheckbox = true\n            np.rowAction = undefined\n        }\n        return np\n    }, [p.skeleton])\n\n    let {\n        rows,\n        tabs,\n\n        pagination: { perpages = [30, 50, 100], total = 0 } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        hidePagination,\n        slotProps,\n\n\n        // skip props for ViewBox\n        skeleton,\n        rowAction,\n        disableRow,\n        renderRow,\n        filters,\n        hideCheckbox,\n        hideSearch,\n        columns,\n        compact,\n\n        ...viewBoxProps\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n        filters: defaultState?.filter || {}\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            height=\"100%\"\n            {...viewBoxProps}\n            baseClass='datatable'\n            ref={ref as any}\n            sx={{\n                ...viewBoxProps?.sx,\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!hidePagination && <TablePagination\n                    disabled={_props.skeleton ? true : false}\n                    {...slotProps?.pagination}\n                    total={total || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    slotProps={{\n                        select: {\n                            size: \"small\",\n                        }\n                    }}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}

package/Datatable/index.mjs

@@ -1,6 +1,7 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useEffect } from 'react';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo, useState, useEffect } from 'react';
 import ViewBox from '../ViewBox/index.mjs';
 import { useInterface, Tag } from '@xanui/core';
 import SelectedBox from './SelectedBox.mjs';
@@ -8,10 +9,46 @@ import TableArea from './Table.mjs';
 import FilterBox from './FilterBox.mjs';
 import TablePagination from '../TablePagination/index.mjs';
 import Stack from '../Stack/index.mjs';
+import Skeleton from '../Skeleton/index.mjs';
 
 const DataTable = React.forwardRef((props, ref) => {
-    let [_props] = useInterface("Datatable", props, {});
-    let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
+    let [p] = useInterface("Datatable", props, {});
+    let _props = useMemo(() => {
+        let np = Object.assign({}, p);
+        if (typeof np.skeleton === 'number' || np.skeleton === true) {
+            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10;
+            let length = np.skeleton === true ? limit : np.skeleton;
+            if (!np.hideCheckbox) {
+                np.columns = [{
+                        label: '', field: "__checkbox", width: 34
+                    }, ...np.columns];
+            }
+            if (np.rowAction) {
+                np.columns = [...np.columns, { label: "", field: "__actions", width: 34 }];
+            }
+            let columns = np.columns || [];
+            np.rows = [];
+            for (let i = 0; i < length; i++) {
+                let r = { id: i };
+                for (let col of columns) {
+                    r[col.field] = "";
+                }
+                np.rows.push(r);
+            }
+            np.renderRow = (r) => {
+                for (let col of columns) {
+                    r[col.field] = jsx(Skeleton, { animation: "wave", height: 16, radius: .5, width: "100%" });
+                }
+                return r;
+            };
+            np.hideCheckbox = true;
+            np.rowAction = undefined;
+        }
+        return np;
+    }, [p.skeleton]);
+    let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, defaultState = {}, onStateChange, fixedHeader, hidePagination, slotProps, 
+    // skip props for ViewBox
+    skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = __rest(_props, ["rows", "tabs", "pagination", "defaultState", "onStateChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
     const [state, setState] = useState({
         selected: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selected) || [],
         selectAll: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selectAll) || false,
@@ -24,6 +61,7 @@ const DataTable = React.forwardRef((props, ref) => {
         tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
         search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
         sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
+        filters: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.filter) || {}
     });
     const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
     useEffect(() => {
@@ -31,20 +69,22 @@ const DataTable = React.forwardRef((props, ref) => {
             onStateChange(state);
         }
     }, [state]);
-    return (jsxs(ViewBox, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
-            '& thead': fixedHeader ? {
+    return (jsxs(ViewBox, Object.assign({ height: "100%" }, viewBoxProps, { baseClass: 'datatable', ref: ref, sx: Object.assign(Object.assign({}, viewBoxProps === null || viewBoxProps === void 0 ? void 0 : viewBoxProps.sx), { '& thead': fixedHeader ? {
                 position: "sticky",
                 top: 0,
                 bgcolor: "background.primary",
                 zIndex: 1
-            } : {},
-        }, startContent: (jsxs(Tag, { baseClass: 'datatable-header', sxr: {
+            } : {} }), startContent: (jsxs(Tag, { baseClass: 'datatable-header', sxr: {
                 display: "flex",
                 flexDirection: "row",
                 justifyContent: "space-between"
-            }, children: [jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsx(TableArea, Object.assign({}, _props, { update: update, state: state })), jsx(Stack, { p: 1, alignItems: "flex-end", children: !disablePagination && jsx(TablePagination, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, onChange: (state) => {
+            }, children: [jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] })), children: [jsx(TableArea, Object.assign({}, _props, { update: update, state: state })), jsx(Stack, { p: 1, alignItems: "flex-end", children: !hidePagination && jsx(TablePagination, Object.assign({ disabled: _props.skeleton ? true : false }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: total || rows.length, page: state.pagination.page, perpage: state.pagination.perpage, perpages: perpages, slotProps: {
+                        select: {
+                            size: "small",
+                        }
+                    }, onChange: (state) => {
                         update({ pagination: state });
-                    } })) })] }));
+                    } })) })] })));
 });
 
 export { DataTable as default };

package/Datatable/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        totalCount,\n\n        pagination: { perpages = [30, 50, 100] } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo, useState } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [p] = useInterface<any>(\"Datatable\", props, {})\n\n    let _props = useMemo(() => {\n        let np = { ...p }\n\n        if (typeof np.skeleton === 'number' || np.skeleton === true) {\n            const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n            let length = np.skeleton === true ? limit : np.skeleton\n\n            if (!np.hideCheckbox) {\n                np.columns = [{\n                    label: '', field: \"__checkbox\", width: 34\n                }, ...np.columns]\n            }\n\n            if (np.rowAction) {\n                np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n            }\n\n            let columns = np.columns || []\n\n            np.rows = []\n            for (let i = 0; i < length; i++) {\n                let r: any = { id: i }\n                for (let col of columns) {\n                    r[col.field] = \"\"\n                }\n                np.rows.push(r)\n            }\n\n            np.renderRow = (r: any) => {\n                for (let col of columns) {\n                    r[col.field] = <Skeleton\n                        animation={\"wave\"}\n                        height={16}\n                        radius={.5}\n                        width={\"100%\"}\n                    />\n                }\n                return r\n            }\n            np.hideCheckbox = true\n            np.rowAction = undefined\n        }\n        return np\n    }, [p.skeleton])\n\n    let {\n        rows,\n        tabs,\n\n        pagination: { perpages = [30, 50, 100], total = 0 } = {},\n        defaultState = {},\n        onStateChange,\n\n        fixedHeader,\n        hidePagination,\n        slotProps,\n\n\n        // skip props for ViewBox\n        skeleton,\n        rowAction,\n        disableRow,\n        renderRow,\n        filters,\n        hideCheckbox,\n        hideSearch,\n        columns,\n        compact,\n\n        ...viewBoxProps\n    } = _props\n\n    const [state, setState] = useState<DatatableState>({\n        selected: defaultState?.selected || [],\n        selectAll: defaultState?.selectAll || false,\n        pagination: {\n            page: defaultState?.page || 1,\n            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n            from: defaultState?.from || 1,\n            to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n        },\n        tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: defaultState?.search || \"\",\n        sortable: defaultState?.sortable || {},\n        filters: defaultState?.filter || {}\n    })\n\n    const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n    useEffect(() => {\n        if (onStateChange) {\n            onStateChange(state)\n        }\n    }, [state])\n\n    return (\n        <ViewBox\n            height=\"100%\"\n            {...viewBoxProps}\n            baseClass='datatable'\n            ref={ref as any}\n            sx={{\n                ...viewBoxProps?.sx,\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!hidePagination && <TablePagination\n                    disabled={_props.skeleton ? true : false}\n                    {...slotProps?.pagination}\n                    total={total || rows.length}\n                    page={state.pagination.page}\n                    perpage={state.pagination.perpage}\n                    perpages={perpages}\n                    slotProps={{\n                        select: {\n                            size: \"small\",\n                        }\n                    }}\n                    onChange={(state: TablePaginationState) => {\n                        update({ pagination: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}

package/Datatable/types.d.ts

@@ -4,6 +4,8 @@ import { IconButtonProps } from '../IconButton/index.js';
 import { InputProps } from '../Input/index.js';
 import { TableProps } from '../Table/index.js';
 import { TablePaginationState, TablePaginationProps } from '../TablePagination/index.js';
+import { ViewBoxProps } from '../ViewBox/index.js';
+import { DataFilterProps } from '../DataFilter/types.js';
 
 type ColumnType = (Omit<TableColumnProps, "children"> & {
     label: string;
@@ -22,11 +24,7 @@ type TabsProps = {
     label: string;
     value?: string;
 };
-type DatatableFilter = {
-    label: string;
-    value: string | number;
-};
-type DatatableProps = {
+type DatatableProps = Omit<ViewBoxProps, "children"> & {
     rows: DataTableDefaultRow[];
     columns: ColumnType[];
     tabs?: TabsProps[];
@@ -42,13 +40,13 @@ type DatatableProps = {
     };
     defaultState?: DatatableStatePartial;
     onStateChange?: (state: DatatableState) => void;
-    filters?: {
-        [key: string]: DatatableFilter[];
-    };
+    filters?: DataFilterProps['options'];
     fixedHeader?: boolean;
     hidePagination?: boolean;
     hideSearch?: boolean;
     hideCheckbox?: boolean;
+    skeleton?: boolean | number;
+    compact?: boolean;
     slotProps?: {
         search?: Omit<InputProps, "value" | "onChange">;
         table?: Omit<TableProps, 'children'>;
@@ -64,6 +62,9 @@ type DatatableState = {
     sortable: {
         [field: string]: 'asc' | 'desc';
     };
+    filters: {
+        [key: string]: any;
+    };
 };
 type DatatableStatePartial = {
     selected?: number[];
@@ -74,6 +75,9 @@ type DatatableStatePartial = {
     sortable?: {
         [field: string]: 'asc' | 'desc';
     };
+    filters?: {
+        [key: string]: any;
+    };
 };
 
-export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, DatatableStatePartial, RowActionType, TabsProps };
+export type { ColumnType, DataTableDefaultRow, DatatableProps, DatatableState, DatatableStatePartial, RowActionType, TabsProps };

package/Drawer/index.js

@@ -32,9 +32,9 @@ const Drawer = (_a) => {
     size = p.size || "medium";
     let isSide = placement === 'left' || placement === 'right';
     let sizes = {
-        small: 200,
-        medium: 300,
-        large: 400
+        small: 220,
+        medium: 330,
+        large: 440
     };
     let _size = sizes[size] || size;
     return (jsxRuntime.jsx(index, Object.assign({}, layerProps, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer, { transition: getVariant(placement), children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {