@xanui/ui 1.1.16 → 1.1.18

package/Datatable/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from '.'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n    rawRow: DataTableDefaultRow;\r\n    row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }: Props) => {\r\n    let selectesIds = state.selectedIds\r\n    const selected = row.id ? state.selectedIds.includes(row?.id) : false\r\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n    const [target, setTarget] = useState<any>()\r\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\r\n\r\n    return (\r\n        <TableRow disabled={isDisable}>\r\n            {!disableSelect && <TableCell width={40} bgcolor={selectedColor}>\r\n                {\r\n                    !!row.id && <Checkbox\r\n                        checked={selected}\r\n                        onChange={() => {\r\n                            if (isDisable || !row.id) return\r\n                            let ids = [...selectesIds]\r\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n                            let selectedLength = 0\r\n                            rows.forEach(r => {\r\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\r\n                                if (!isDisable) selectedLength++\r\n                            })\r\n\r\n                            update({\r\n                                selectAll: selectedLength === ids.length,\r\n                                selectedIds: ids\r\n                            })\r\n                        }}\r\n                    />\r\n                }\r\n\r\n            </TableCell>}\r\n            {\r\n                columns.map(({ label, field, ...rest }, idx) => {\r\n                    field = field || label\r\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\r\n                    return (\r\n                        <TableCell\r\n                            key={idx}\r\n                            textAlign=\"left\"\r\n                            {...rest}\r\n                            bgcolor={selectedColor}\r\n                        >\r\n                            {row[field]}\r\n                        </TableCell>\r\n                    )\r\n                })\r\n            }\r\n            <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n                {rowAction && <>\r\n                    <IconButton\r\n                        disabled={isDisable || selected}\r\n                        onClick={(e: any) => setTarget(e.currentTarget)}\r\n                        variant=\"text\"\r\n                        color=\"default\"\r\n                    >\r\n                        <ActionIcon />\r\n                    </IconButton>\r\n                    <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n                        <List\r\n                            bgcolor=\"background.primary\"\r\n                            minWidth={160}\r\n                            sx={{\r\n                                '& > li': {\r\n                                    borderBottom: 1,\r\n                                    '&:last-child': {\r\n                                        borderBottom: 0\r\n                                    }\r\n                                }\r\n                            }}\r\n                        >\r\n                            {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n                                return (\r\n                                    <ListItem\r\n                                        key={label}\r\n                                        startIcon={icon}\r\n                                        onClick={(e: any) => {\r\n                                            onClick && onClick(e)\r\n                                            setTarget(null)\r\n                                        }}\r\n                                    >{label}</ListItem>\r\n                                )\r\n                            })}\r\n                        </List>\r\n                    </Menu>\r\n                </>}\r\n            </TableCell>\r\n        </TableRow>\r\n    )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;AACI;;;;;AAMA;AAOwB;;AACA;AACA;;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.js","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;;"}

package/Datatable/Row.mjs

@@ -11,16 +11,15 @@ 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, disableSelect, columns, state, update }) => {
-    let selectesIds = state.selectedIds;
-    const selected = row.id ? state.selectedIds.includes(row === null || row === void 0 ? void 0 : row.id) : false;
+const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, state, update }) => {
+    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: [!disableSelect && jsx(TableCell, { width: 40, bgcolor: selectedColor, children: !!row.id && jsx(Checkbox, { checked: selected, onChange: () => {
+    return (jsxs(TableRow, { disabled: isDisable, children: [!hideCheckbox && jsx(TableCell, { width: 40, bgcolor: selectedColor, children: !!row.id && jsx(Checkbox, { checked: selected, onChange: () => {
                         if (isDisable || !row.id)
                             return;
-                        let ids = [...selectesIds];
+                        let ids = [...state.selected];
                         ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id);
                         let selectedLength = 0;
                         rows.forEach(r => {
@@ -30,10 +29,10 @@ const Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns,
                         });
                         update({
                             selectAll: selectedLength === ids.length,
-                            selectedIds: ids
+                            selected: ids
                         });
                     } }) }), columns.map((_a, idx) => {
-                var { label, field } = _a, rest = __rest(_a, ["label", "field"]);
+                var { label, field, sortable } = _a, rest = __rest(_a, ["label", "field", "sortable"]);
                 field = field || label;
                 if (!row[field])
                     return jsx(TableCell, {}, idx);

package/Datatable/Row.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Row.mjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from '.'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n    rawRow: DataTableDefaultRow;\r\n    row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, disableSelect, columns, state, update }: Props) => {\r\n    let selectesIds = state.selectedIds\r\n    const selected = row.id ? state.selectedIds.includes(row?.id) : false\r\n    let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n    const [target, setTarget] = useState<any>()\r\n    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false\r\n\r\n    return (\r\n        <TableRow disabled={isDisable}>\r\n            {!disableSelect && <TableCell width={40} bgcolor={selectedColor}>\r\n                {\r\n                    !!row.id && <Checkbox\r\n                        checked={selected}\r\n                        onChange={() => {\r\n                            if (isDisable || !row.id) return\r\n                            let ids = [...selectesIds]\r\n                            ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n                            let selectedLength = 0\r\n                            rows.forEach(r => {\r\n                                const isDisable = (disableRow ? disableRow(r, state) : false) || false\r\n                                if (!isDisable) selectedLength++\r\n                            })\r\n\r\n                            update({\r\n                                selectAll: selectedLength === ids.length,\r\n                                selectedIds: ids\r\n                            })\r\n                        }}\r\n                    />\r\n                }\r\n\r\n            </TableCell>}\r\n            {\r\n                columns.map(({ label, field, ...rest }, idx) => {\r\n                    field = field || label\r\n                    if (!row[field]) return <TableCell key={idx}></TableCell>\r\n                    return (\r\n                        <TableCell\r\n                            key={idx}\r\n                            textAlign=\"left\"\r\n                            {...rest}\r\n                            bgcolor={selectedColor}\r\n                        >\r\n                            {row[field]}\r\n                        </TableCell>\r\n                    )\r\n                })\r\n            }\r\n            <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n                {rowAction && <>\r\n                    <IconButton\r\n                        disabled={isDisable || selected}\r\n                        onClick={(e: any) => setTarget(e.currentTarget)}\r\n                        variant=\"text\"\r\n                        color=\"default\"\r\n                    >\r\n                        <ActionIcon />\r\n                    </IconButton>\r\n                    <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n                        <List\r\n                            bgcolor=\"background.primary\"\r\n                            minWidth={160}\r\n                            sx={{\r\n                                '& > li': {\r\n                                    borderBottom: 1,\r\n                                    '&:last-child': {\r\n                                        borderBottom: 0\r\n                                    }\r\n                                }\r\n                            }}\r\n                        >\r\n                            {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n                                return (\r\n                                    <ListItem\r\n                                        key={label}\r\n                                        startIcon={icon}\r\n                                        onClick={(e: any) => {\r\n                                            onClick && onClick(e)\r\n                                            setTarget(null)\r\n                                        }}\r\n                                    >{label}</ListItem>\r\n                                )\r\n                            })}\r\n                        </List>\r\n                    </Menu>\r\n                </>}\r\n            </TableCell>\r\n        </TableRow>\r\n    )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;AACI;;;;;AAMA;AAOwB;;AACA;AACA;;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, 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;;"}

package/Datatable/SelectedBox.js

@@ -8,11 +8,10 @@ var index$1 = require('../Text/index.js');
 
 const SelectedBox = (props) => {
     let { state, rowAction } = props;
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
+    let checked = state.selectAll || !!state.selected.length;
     if (!checked)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(index, { bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxRuntime.jsxs(index$1, { fontWeight: 600, children: ["Selected: ", selected.length] }), jsxRuntime.jsx(index, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
+    return (jsxRuntime.jsxs(index, { bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxRuntime.jsxs(index$1, { fontWeight: 600, children: ["Selected: ", state.selected.length] }), jsxRuntime.jsx(index, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
                     var { label, icon } = _a, bprops = tslib.__rest(_a, ["label", "icon"]);
                     return (jsxRuntime.jsx(index$2, Object.assign({ variant: "soft", color: "brand" }, bprops, { children: icon }), label));
                 }) })] }));

package/Datatable/SelectedBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\r\nimport Stack from '../Stack'\r\nimport Text from '../Text'\r\nimport { DatatablePropsWithState } from '.'\r\n\r\nconst SelectedBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      state,\r\n      rowAction\r\n   } = props\r\n\r\n   let selected = state.selectedIds\r\n   let checked = state.selectAll || !!selected.length\r\n\r\n   if (!checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         bgcolor=\"background.secondary\"\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n         px={1.5}\r\n      >\r\n         <Text fontWeight={600}>Selected: {selected.length}</Text>\r\n         <Stack\r\n            flexRow\r\n            gap={1}\r\n         >\r\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\r\n               return (\r\n                  <IconButton\r\n                     key={label}\r\n                     variant=\"soft\"\r\n                     color=\"brand\"\r\n                     {...bprops}\r\n                  >\r\n                     {icon}\r\n                  </IconButton>\r\n               )\r\n            })}\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default SelectedBox"],"names":["_jsx","_jsxs","Stack","Text","__rest","IconButton"],"mappings":";;;;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,WAAW;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM;AAElD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,uCAAK;AAE1B,IAAA,QACGC,eAAA,CAACC,KAAK,EAAA,EACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,aAEPD,eAAA,CAACE,OAAI,IAAC,UAAU,EAAE,GAAG,EAAA,QAAA,EAAA,CAAA,YAAA,EAAa,QAAQ,CAAC,MAAM,IAAQ,EACzDH,cAAA,CAACE,KAAK,EAAA,EACH,OAAO,QACP,GAAG,EAAE,CAAC,EAAA,QAAA,EAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAE,YAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGJ,cAAA,CAACK,OAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}
+{"version":3,"file":"SelectedBox.js","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs","Stack","Text","__rest","IconButton"],"mappings":";;;;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,uCAAK;AAE1B,IAAA,QACGC,eAAA,CAACC,KAAK,IACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,EAAA,QAAA,EAAA,CAEPD,gBAACE,OAAI,EAAA,EAAC,UAAU,EAAE,GAAG,2BAAa,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC/DH,eAACE,KAAK,EAAA,EACH,OAAO,EAAA,IAAA,EACP,GAAG,EAAE,CAAC,YAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAAE,YAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGJ,cAAA,CAACK,OAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}

package/Datatable/SelectedBox.mjs

@@ -6,11 +6,10 @@ import Text from '../Text/index.mjs';
 
 const SelectedBox = (props) => {
     let { state, rowAction } = props;
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
+    let checked = state.selectAll || !!state.selected.length;
     if (!checked)
         return jsx(Fragment, {});
-    return (jsxs(Stack, { bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxs(Text, { fontWeight: 600, children: ["Selected: ", selected.length] }), jsx(Stack, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
+    return (jsxs(Stack, { bgcolor: "background.secondary", direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", px: 1.5, children: [jsxs(Text, { fontWeight: 600, children: ["Selected: ", state.selected.length] }), jsx(Stack, { flexRow: true, gap: 1, children: rowAction && rowAction({ row: null, state }).map((_a) => {
                     var { label, icon } = _a, bprops = __rest(_a, ["label", "icon"]);
                     return (jsx(IconButton, Object.assign({ variant: "soft", color: "brand" }, bprops, { children: icon }), label));
                 }) })] }));

package/Datatable/SelectedBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedBox.mjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\r\nimport Stack from '../Stack'\r\nimport Text from '../Text'\r\nimport { DatatablePropsWithState } from '.'\r\n\r\nconst SelectedBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      state,\r\n      rowAction\r\n   } = props\r\n\r\n   let selected = state.selectedIds\r\n   let checked = state.selectAll || !!selected.length\r\n\r\n   if (!checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         bgcolor=\"background.secondary\"\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n         px={1.5}\r\n      >\r\n         <Text fontWeight={600}>Selected: {selected.length}</Text>\r\n         <Stack\r\n            flexRow\r\n            gap={1}\r\n         >\r\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\r\n               return (\r\n                  <IconButton\r\n                     key={label}\r\n                     variant=\"soft\"\r\n                     color=\"brand\"\r\n                     {...bprops}\r\n                  >\r\n                     {icon}\r\n                  </IconButton>\r\n               )\r\n            })}\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default SelectedBox"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,WAAW;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM;AAElD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,iBAAK;AAE1B,IAAA,QACGC,IAAA,CAAC,KAAK,EAAA,EACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,aAEPA,IAAA,CAAC,IAAI,IAAC,UAAU,EAAE,GAAG,EAAA,QAAA,EAAA,CAAA,YAAA,EAAa,QAAQ,CAAC,MAAM,IAAQ,EACzDD,GAAA,CAAC,KAAK,EAAA,EACH,OAAO,QACP,GAAG,EAAE,CAAC,EAAA,QAAA,EAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAA,MAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGA,GAAA,CAAC,UAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}
+{"version":3,"file":"SelectedBox.mjs","sources":["../../src/Datatable/SelectedBox.tsx"],"sourcesContent":["import IconButton from '../IconButton'\nimport Stack from '../Stack'\nimport Text from '../Text'\nimport { DatatablePropsWithState } from './types'\n\nconst SelectedBox = (props: DatatablePropsWithState) => {\n   let {\n      state,\n      rowAction\n   } = props\n\n   let checked = state.selectAll || !!state.selected.length\n   if (!checked) return <></>\n\n   return (\n      <Stack\n         bgcolor=\"background.secondary\"\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n         px={1.5}\n      >\n         <Text fontWeight={600}>Selected: {state.selected.length}</Text>\n         <Stack\n            flexRow\n            gap={1}\n         >\n            {rowAction && rowAction({ row: null, state }).map(({ label, icon, ...bprops }) => {\n               return (\n                  <IconButton\n                     key={label}\n                     variant=\"soft\"\n                     color=\"brand\"\n                     {...bprops}\n                  >\n                     {icon}\n                  </IconButton>\n               )\n            })}\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default SelectedBox"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAA8B,KAAI;AACpD,IAAA,IAAI,EACD,KAAK,EACL,SAAS,EACX,GAAG,KAAK;AAET,IAAA,IAAI,OAAO,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAOA,iBAAK;AAE1B,IAAA,QACGC,IAAA,CAAC,KAAK,IACH,OAAO,EAAC,sBAAsB,EAC9B,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,EAAE,EAAE,CAAC,EACL,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE,GAAG,EAAA,QAAA,EAAA,CAEPA,KAAC,IAAI,EAAA,EAAC,UAAU,EAAE,GAAG,2BAAa,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC/DD,IAAC,KAAK,EAAA,EACH,OAAO,EAAA,IAAA,EACP,GAAG,EAAE,CAAC,YAEL,SAAS,IAAI,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAA0B,KAAI;wBAA9B,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAAa,EAAR,MAAM,GAAA,MAAA,CAAA,EAAA,EAAxB,iBAA0B,CAAF;AACxE,oBAAA,QACGA,GAAA,CAAC,UAAU,kBAER,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,MAAM,EAAA,EAAA,QAAA,EAET,IAAI,KALA,KAAK,CAMA;AAEnB,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACH;AAEd;;;;"}

package/Datatable/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from '.'\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n   let {\r\n      rows,\r\n      renderRow,\r\n      state,\r\n      update,\r\n      slotProps\r\n   } = props\r\n\r\n   return (\r\n      <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n         <TableHead {...props} update={update} state={state} />\r\n         <TableBody\r\n            sx={{\r\n               '& tr:last-child td': {\r\n                  borderBottom: 0\r\n               }\r\n            }}\r\n         >\r\n            {\r\n               rows?.map((row: any, idx) => {\r\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\r\n                  return <Row\r\n                     key={row.id + idx}\r\n                     rawRow={row}\r\n                     row={_row}\r\n                     {...props}\r\n                     update={update}\r\n                     state={state}\r\n                  />\r\n               })\r\n            }\r\n         </TableBody>\r\n      </Table>\r\n   )\r\n}\r\n\r\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      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;;"}

package/Datatable/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from '.'\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n   let {\r\n      rows,\r\n      renderRow,\r\n      state,\r\n      update,\r\n      slotProps\r\n   } = props\r\n\r\n   return (\r\n      <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n         <TableHead {...props} update={update} state={state} />\r\n         <TableBody\r\n            sx={{\r\n               '& tr:last-child td': {\r\n                  borderBottom: 0\r\n               }\r\n            }}\r\n         >\r\n            {\r\n               rows?.map((row: any, idx) => {\r\n                  let _row = renderRow ? renderRow({ ...row }, state) : row\r\n                  return <Row\r\n                     key={row.id + idx}\r\n                     rawRow={row}\r\n                     row={_row}\r\n                     {...props}\r\n                     update={update}\r\n                     state={state}\r\n                  />\r\n               })\r\n            }\r\n         </TableBody>\r\n      </Table>\r\n   )\r\n}\r\n\r\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      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;;"}

package/Datatable/TableHead.js

@@ -8,13 +8,16 @@ var index$1 = require('../TableRow/index.js');
 var index$2 = require('../TableCell/index.js');
 var index$3 = require('../Checkbox/index.js');
 var IndeterminateCheckBoxIcon = require('@xanui/icons/IndeterminateCheckBox');
+var index$4 = require('../Stack/index.js');
+var ArrowDropDown = require('@xanui/icons/ArrowDropDown');
+var icons = require('@xanui/icons');
 
-const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }) => {
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
     if (!columns.length)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
-    return (jsxRuntime.jsx(index, { position: "relative", children: jsxRuntime.jsxs(index$1, { bgcolor: "default", borderBottom: 1, children: [!disableSelect && jsxRuntime.jsx(index$2, { th: true, width: 40, children: jsxRuntime.jsx(index$3, { checkIcon: selected.length && !state.selectAll ? jsxRuntime.jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    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: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -29,20 +32,27 @@ const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, upda
                             }
                             if (undefinedCount) {
                                 update({
-                                    selectedIds: selected.length ? [] : ids,
-                                    selectAll: !selected.length
+                                    selected: state.selected.length ? [] : ids,
+                                    selectAll: !state.selected.length
                                 });
                             }
                             else {
                                 update({
-                                    selectedIds: state.selectAll ? [] : ids,
+                                    selected: state.selectAll ? [] : ids,
                                     selectAll: !state.selectAll
                                 });
                             }
                         } }) }), columns.map((_a, idx) => {
-                    var { label, field: _f } = _a, rest = tslib.__rest(_a, ["label", "field"]);
-                    return jsxRuntime.jsx(index$2, Object.assign({ th: true, textAlign: "left" }, rest, { children: label }), idx);
-                }), jsxRuntime.jsx(index$2, { th: true, width: 30 })] }) }));
+                    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: () => {
+                                if (sortable) {
+                                    let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
+                                    update({
+                                        sortable: Object.assign(Object.assign({}, sortables), { [_f]: newSort })
+                                    });
+                                }
+                            }, 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 })] }) }));
 };
 
 module.exports = TableHeadRender;

package/Datatable/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport { DatatablePropsWithState } from '.'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }: DatatablePropsWithState) => {\r\n    if (!columns.length) return <></>\r\n    let selected = state.selectedIds\r\n    let checked = state.selectAll || !!selected.length\r\n\r\n    return (\r\n        <TableHead position=\"relative\">\r\n            <TableRow bgcolor=\"default\" borderBottom={1} >\r\n                {!disableSelect && <TableCell th width={40}>\r\n                    <Checkbox\r\n                        checkIcon={selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n                        checked={checked}\r\n                        onChange={() => {\r\n                            let ids: any = []\r\n                            let undefinedCount = 0\r\n                            for (let i = 0; i < rows.length; i++) {\r\n                                const row = rows[i]\r\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\r\n                                if (!isDisable && row.id) {\r\n                                    ids.push(row.id)\r\n                                } else {\r\n                                    undefinedCount += 1\r\n                                }\r\n                            }\r\n\r\n                            if (undefinedCount) {\r\n                                update({\r\n                                    selectedIds: selected.length ? [] : ids,\r\n                                    selectAll: !selected.length\r\n                                })\r\n                            } else {\r\n                                update({\r\n                                    selectedIds: state.selectAll ? [] : ids,\r\n                                    selectAll: !state.selectAll\r\n                                })\r\n                            }\r\n                        }}\r\n                    />\r\n                </TableCell>}\r\n                {\r\n                    columns.map(({ label, field: _f, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>{label}</TableCell>)\r\n                }\r\n                <TableCell th width={30}>\r\n\r\n                </TableCell>\r\n            </TableRow>\r\n        </TableHead>\r\n    )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;;;AASA;;AACyB;AACrB;;AAGA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;;AAEI;AACH;;;AAED;;AAEI;AACH;;AAET;;AAIgD;AAAsE;AAQ9I;;"}
+{"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;;"}

package/Datatable/TableHead.mjs

@@ -6,13 +6,16 @@ import TableRow from '../TableRow/index.mjs';
 import TableCell from '../TableCell/index.mjs';
 import Checkbox from '../Checkbox/index.mjs';
 import IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';
+import Stack from '../Stack/index.mjs';
+import ArrowDropDown from '@xanui/icons/ArrowDropDown';
+import { ArrowDropUp } from '@xanui/icons';
 
-const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }) => {
+const TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, state, update }) => {
     if (!columns.length)
         return jsx(Fragment, {});
-    let selected = state.selectedIds;
-    let checked = state.selectAll || !!selected.length;
-    return (jsx(TableHead, { position: "relative", children: jsxs(TableRow, { bgcolor: "default", borderBottom: 1, children: [!disableSelect && jsx(TableCell, { th: true, width: 40, children: jsx(Checkbox, { checkIcon: selected.length && !state.selectAll ? jsx(IndeterminateCheckBoxIcon, {}) : undefined, checked: checked, onChange: () => {
+    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: () => {
                             let ids = [];
                             let undefinedCount = 0;
                             for (let i = 0; i < rows.length; i++) {
@@ -27,20 +30,27 @@ const TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, upda
                             }
                             if (undefinedCount) {
                                 update({
-                                    selectedIds: selected.length ? [] : ids,
-                                    selectAll: !selected.length
+                                    selected: state.selected.length ? [] : ids,
+                                    selectAll: !state.selected.length
                                 });
                             }
                             else {
                                 update({
-                                    selectedIds: state.selectAll ? [] : ids,
+                                    selected: state.selectAll ? [] : ids,
                                     selectAll: !state.selectAll
                                 });
                             }
                         } }) }), columns.map((_a, idx) => {
-                    var { label, field: _f } = _a, rest = __rest(_a, ["label", "field"]);
-                    return jsx(TableCell, Object.assign({ th: true, textAlign: "left" }, rest, { children: label }), idx);
-                }), jsx(TableCell, { th: true, width: 30 })] }) }));
+                    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: () => {
+                                if (sortable) {
+                                    let newSort = sortables[_f] === 'asc' ? 'desc' : 'asc';
+                                    update({
+                                        sortable: Object.assign(Object.assign({}, sortables), { [_f]: newSort })
+                                    });
+                                }
+                            }, children: [label, sortable && jsx(Fragment, { children: sortables[_f] === 'asc' ? jsx(ArrowDropDown, {}) : jsx(ArrowDropUp, {}) })] }) }), idx);
+                }), rowAction && 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\";\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport { DatatablePropsWithState } from '.'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, disableSelect, state, update }: DatatablePropsWithState) => {\r\n    if (!columns.length) return <></>\r\n    let selected = state.selectedIds\r\n    let checked = state.selectAll || !!selected.length\r\n\r\n    return (\r\n        <TableHead position=\"relative\">\r\n            <TableRow bgcolor=\"default\" borderBottom={1} >\r\n                {!disableSelect && <TableCell th width={40}>\r\n                    <Checkbox\r\n                        checkIcon={selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n                        checked={checked}\r\n                        onChange={() => {\r\n                            let ids: any = []\r\n                            let undefinedCount = 0\r\n                            for (let i = 0; i < rows.length; i++) {\r\n                                const row = rows[i]\r\n                                const isDisable = (disableRow ? disableRow(row, state) : false) || false\r\n                                if (!isDisable && row.id) {\r\n                                    ids.push(row.id)\r\n                                } else {\r\n                                    undefinedCount += 1\r\n                                }\r\n                            }\r\n\r\n                            if (undefinedCount) {\r\n                                update({\r\n                                    selectedIds: selected.length ? [] : ids,\r\n                                    selectAll: !selected.length\r\n                                })\r\n                            } else {\r\n                                update({\r\n                                    selectedIds: state.selectAll ? [] : ids,\r\n                                    selectAll: !state.selectAll\r\n                                })\r\n                            }\r\n                        }}\r\n                    />\r\n                </TableCell>}\r\n                {\r\n                    columns.map(({ label, field: _f, ...rest }, idx) => <TableCell key={idx} th textAlign=\"left\" {...rest}>{label}</TableCell>)\r\n                }\r\n                <TableCell th width={30}>\r\n\r\n                </TableCell>\r\n            </TableRow>\r\n        </TableHead>\r\n    )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;AASA;;AACyB;AACrB;;AAGA;;;AAUwB;AACI;;AAEA;AACI;;;;;;;AAOJ;;AAEI;AACH;;;AAED;;AAEI;AACH;;AAET;;AAIgD;AAAsE;AAQ9I;;"}
+{"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;;"}

package/Datatable/index.d.ts

@@ -1,71 +1,6 @@
-import React, { ReactElement } from 'react';
-import { TableColumnProps } from '../TableCell/index.js';
-import { IconButtonProps } from '../IconButton/index.js';
-import { InputProps } from '../Input/index.js';
-import { TablePaginationProps } from '../TablePagination/index.js';
-import { TableProps } from '../Table/index.js';
+import React from 'react';
+import { DatatableProps } from './types.js';
 
-type ColumnType = (Omit<TableColumnProps, "children"> & {
-    label: string;
-    field?: string;
-});
-type DataTableDefaultRow = {
-    id?: number;
-    [key: string | number]: any;
-};
-type RowActionType = Omit<IconButtonProps, "children"> & {
-    label: string;
-    icon: ReactElement;
-};
-type TabsProps = {
-    label: string;
-    value?: string;
-};
-type DatatableFilter = {
-    label: string;
-    value: string | number;
-};
-type DatatableProps = {
-    rows: DataTableDefaultRow[];
-    columns: ColumnType[];
-    tabs?: TabsProps[];
-    defaultActiveTab?: string;
-    rowAction?: (props: {
-        row: DataTableDefaultRow | null;
-        state: State;
-    }) => RowActionType[];
-    renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;
-    disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;
-    totalCount?: number;
-    page?: number;
-    perpages?: number[];
-    getState?: (state: State) => void;
-    onSearch?: (text: string, state: State) => void;
-    onTabChange?: (tab: string, state: State) => void;
-    filters?: {
-        [key: string]: DatatableFilter[];
-    };
-    fixedHeader?: boolean;
-    disablePagination?: boolean;
-    disableSearch?: boolean;
-    disableSelect?: boolean;
-    slotProps?: {
-        search?: Omit<InputProps, "value" | "onChange">;
-        table?: Omit<TableProps, 'children'>;
-        pagination?: TablePaginationProps;
-    };
-};
-type State = {
-    selectedIds: number[];
-    selectAll: boolean;
-    paginationState: {
-        page: number;
-        perpage: number;
-    };
-    activeTab: string;
-    search: string;
-};
 declare const DataTable: React.ForwardRefExoticComponent<DatatableProps & React.RefAttributes<HTMLDivElement>>;
 
 export { DataTable as default };
-export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, RowActionType, State, TabsProps };

package/Datatable/index.js

@@ -13,24 +13,25 @@ var index$1 = require('../Stack/index.js');
 
 const DataTable = React.forwardRef((props, ref) => {
     let [_props] = core.useInterface("Datatable", props, {});
-    let { rows, tabs, defaultActiveTab, totalCount, page, perpages, getState, fixedHeader, disablePagination, slotProps, } = _props;
+    let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
     const [state, setState] = React.useState({
-        selectedIds: [],
-        selectAll: false,
-        paginationState: {
-            page: page || 1,
-            perpage: perpages ? perpages[0] : 30
+        selected: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selected) || [],
+        selectAll: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selectAll) || false,
+        pagination: {
+            page: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.page) || 1,
+            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,
+            from: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.from) || 1,
+            to: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.to) || (perpages && perpages.length > 0 ? perpages[0] : 10),
         },
-        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : "",
-        search: ""
+        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) || "",
     });
-    const update = (s) => {
-        setState(o => {
-            let ns = Object.assign(Object.assign({}, o), s);
-            getState && getState(ns);
-            return ns;
-        });
-    };
+    const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
+    React.useEffect(() => {
+        if (onStateChange) {
+            onStateChange(state);
+        }
+    }, [state]);
     return (jsxRuntime.jsxs(index, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
             '& thead': fixedHeader ? {
                 position: "sticky",
@@ -42,8 +43,8 @@ const DataTable = React.forwardRef((props, ref) => {
                 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.paginationState.page, perpages: perpages, onChange: (state) => {
-                        update({ paginationState: 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$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) => {
+                        update({ pagination: state });
                     } })) })] }));
 });
 

package/Datatable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react'\r\nimport { TableColumnProps } from '../TableCell'\r\nimport { IconButtonProps } from '../IconButton'\r\nimport { InputProps } from '../Input'\r\nimport ViewBox from '../ViewBox'\r\nimport { Tag, useInterface } from '@xanui/core';\r\nimport SelectedBox from './SelectedBox'\r\nimport TableArea from './Table'\r\nimport FilterBox from './FilterBox'\r\nimport TablePagination, { TablePaginationProps } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { TableProps } from '../Table'\r\n\r\n\r\nexport type ColumnType = (Omit<TableColumnProps, \"children\"> & { label: string, field?: string })\r\nexport type DataTableDefaultRow = { id?: number, [key: string | number]: any }\r\nexport type RowActionType = Omit<IconButtonProps, \"children\"> & {\r\n    label: string;\r\n    icon: ReactElement;\r\n}\r\nexport type TabsProps = {\r\n    label: string;\r\n    value?: string\r\n}\r\nexport type DatatableFilter = {\r\n    label: string;\r\n    value: string | number\r\n}\r\n\r\nexport type DatatableProps = {\r\n    rows: DataTableDefaultRow[];\r\n    columns: ColumnType[];\r\n    tabs?: TabsProps[];\r\n    defaultActiveTab?: string;\r\n    rowAction?: (props: { row: DataTableDefaultRow | null, state: State }) => RowActionType[];\r\n    renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;\r\n    disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;\r\n    totalCount?: number;\r\n    page?: number;\r\n    perpages?: number[];\r\n    getState?: (state: State) => void;\r\n    onSearch?: (text: string, state: State) => void;\r\n    onTabChange?: (tab: string, state: State) => void;\r\n    filters?: { [key: string]: DatatableFilter[] }\r\n    fixedHeader?: boolean;\r\n    disablePagination?: boolean;\r\n    disableSearch?: boolean;\r\n    disableSelect?: boolean;\r\n    slotProps?: {\r\n        search?: Omit<InputProps, \"value\" | \"onChange\">;\r\n        table?: Omit<TableProps, 'children'>;\r\n        pagination?: TablePaginationProps;\r\n    }\r\n}\r\n\r\nexport type State = {\r\n    selectedIds: number[];\r\n    selectAll: boolean;\r\n    paginationState: {\r\n        page: number,\r\n        perpage: number\r\n    },\r\n    activeTab: string;\r\n    search: string;\r\n}\r\n\r\nexport type DatatablePropsWithState = DatatableProps & {\r\n    state: State,\r\n    update: (state: Partial<State>) => void;\r\n}\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\r\n    let {\r\n        rows,\r\n        tabs,\r\n        defaultActiveTab,\r\n        totalCount,\r\n        page,\r\n        perpages,\r\n        getState,\r\n\r\n        fixedHeader,\r\n        disablePagination,\r\n        slotProps,\r\n    } = _props\r\n\r\n    const [state, setState] = useState<State>({\r\n        selectedIds: [],\r\n        selectAll: false,\r\n        paginationState: {\r\n            page: page || 1,\r\n            perpage: perpages ? perpages[0] : 30\r\n        },\r\n        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\r\n        search: \"\"\r\n    })\r\n\r\n    const update = (s: Partial<State>) => {\r\n        setState(o => {\r\n            let ns = { ...o, ...s }\r\n            getState && getState(ns)\r\n            return ns\r\n        })\r\n    }\r\n\r\n    return (\r\n        <ViewBox\r\n            baseClass='datatable'\r\n            ref={ref as any}\r\n            height=\"100%\"\r\n            sx={{\r\n                '& thead': fixedHeader ? {\r\n                    position: \"sticky\",\r\n                    top: 0,\r\n                    bgcolor: \"background.primary\",\r\n                    zIndex: 1\r\n                } : {},\r\n            }}\r\n            startContent={(\r\n                <Tag\r\n                    baseClass='datatable-header'\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        justifyContent: \"space-between\"\r\n                    }}\r\n                >\r\n                    <SelectedBox {..._props} update={update} state={state} />\r\n                    <FilterBox {..._props} update={update} state={state} />\r\n                </Tag>\r\n            )}\r\n        >\r\n            <TableArea\r\n                {..._props}\r\n                update={update}\r\n                state={state}\r\n            />\r\n            <Stack\r\n                p={1}\r\n                alignItems=\"flex-end\"\r\n            >\r\n                {!disablePagination && <TablePagination\r\n                    {...slotProps?.pagination}\r\n                    total={totalCount || rows.length}\r\n                    page={state.paginationState.page}\r\n                    perpages={perpages}\r\n                    onChange={(state: any) => {\r\n                        update({ paginationState: state })\r\n                    }}\r\n                />}\r\n            </Stack>\r\n        </ViewBox>\r\n    )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAyEA;AACI;;AAeA;AACI;AACA;AACA;;AAEI;AACH;AACD;AACA;AACH;AAED;;AAEQ;AACA;AACA;AACJ;AACJ;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAuBA;AACJ;AAKpB;;"}
+{"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    })\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;;AAEH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}

package/Datatable/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ViewBox from '../ViewBox/index.mjs';
 import { useInterface, Tag } from '@xanui/core';
 import SelectedBox from './SelectedBox.mjs';
@@ -11,24 +11,25 @@ import Stack from '../Stack/index.mjs';
 
 const DataTable = React.forwardRef((props, ref) => {
     let [_props] = useInterface("Datatable", props, {});
-    let { rows, tabs, defaultActiveTab, totalCount, page, perpages, getState, fixedHeader, disablePagination, slotProps, } = _props;
+    let { rows, tabs, totalCount, pagination: { perpages = [30, 50, 100] } = {}, defaultState = {}, onStateChange, fixedHeader, disablePagination, slotProps, } = _props;
     const [state, setState] = useState({
-        selectedIds: [],
-        selectAll: false,
-        paginationState: {
-            page: page || 1,
-            perpage: perpages ? perpages[0] : 30
+        selected: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selected) || [],
+        selectAll: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.selectAll) || false,
+        pagination: {
+            page: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.page) || 1,
+            perpage: perpages && perpages.length > 0 ? perpages[0] : 10,
+            from: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.from) || 1,
+            to: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.to) || (perpages && perpages.length > 0 ? perpages[0] : 10),
         },
-        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : "",
-        search: ""
+        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) || "",
     });
-    const update = (s) => {
-        setState(o => {
-            let ns = Object.assign(Object.assign({}, o), s);
-            getState && getState(ns);
-            return ns;
-        });
-    };
+    const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
+    useEffect(() => {
+        if (onStateChange) {
+            onStateChange(state);
+        }
+    }, [state]);
     return (jsxs(ViewBox, { baseClass: 'datatable', ref: ref, height: "100%", sx: {
             '& thead': fixedHeader ? {
                 position: "sticky",
@@ -40,8 +41,8 @@ const DataTable = React.forwardRef((props, ref) => {
                 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.paginationState.page, perpages: perpages, onChange: (state) => {
-                        update({ paginationState: 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: !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) => {
+                        update({ pagination: state });
                     } })) })] }));
 });