@bsol-oss/react-datatable5 7.6.0 → 7.6.2

package/README.md

@@ -1,5 +1,7 @@
 # React Datatable
 
+The datetable package is built on top of `@tanstack/react-table` and `chakra-ui` to create a robust datatable. This hook simplifies to initialize the state management for controlling the datatable, and it offers several predefined tables and controls in to enhance data visualization.
+
 ## Installation
 
 ```bash
@@ -10,11 +12,11 @@ npm install @tanstack/react-table @chakra-ui/react @emotion/react @bsol-oss/reac
 
 ### Hook
 
-The `DataTable` and `DataTableServer` utilize hook to add props. 
+The `DataTable` and `DataTableServer` utilize hook to add props.
 
 ```tsx
 const datatable = useDataTable();
-const datatableServer = useDataTableServer({url: "<some-url>"});
+const datatableServer = useDataTableServer({ url: "<some-url>" });
 ```
 
 ### DataTable
@@ -43,10 +45,7 @@ const datatableServer = useDataTableServer({url: "<some-url>"});
 ### DataTableServer
 
 ```tsx
-<DataTableServer
-  columns={columns}
-  {...datatable}
->
+<DataTableServer columns={columns} {...datatable}>
   <Flex>
     <TablePagination />
     <EditViewButton />
@@ -76,7 +75,7 @@ const datatableServer = useDataTableServer({url: "<some-url>"});
 Example Url generated by the DataTableServer
 
 ```
-GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello
+GET http://localhost:8081/api/g/core_people?offset=0&limit=10&sorting[0][id]=id&sorting[0][desc]=false&where[0][id]=last_name&where[0][value]=nicenice&searching=good
 ```
 
 ### DefaultTable
@@ -112,6 +111,16 @@ GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"ro
 </DataTable>
 ```
 
+### DataDisplay
+
+```tsx
+<DataTable columns={columns} data={data} {...datatable}>
+  <DataDisplay />
+</DataTable>
+```
+
+For more details of props and examples, please review the stories in storybook platform.
+
 ## Development
 
 ```

package/dist/index.d.ts

@@ -117,7 +117,7 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-interface DataTableProps<TData> {
+interface DataTableProps<TData = unknown> {
     children?: ReactNode | ReactNode[];
     data: TData[];
     columns: ColumnDef<TData, unknown>[];
@@ -292,6 +292,15 @@ interface TableHeaderProps {
 }
 declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, isSticky, alwaysShowSelector, tHeadProps, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
 
+interface TableProps extends TableRootProps {
+    showLoading?: boolean;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    canResize?: boolean;
+    children: ReactNode;
+}
+declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
 interface DefaultTableProps {
     showFooter?: boolean;
     showSelector?: boolean;
@@ -311,15 +320,6 @@ interface ReloadButtonProps {
 }
 declare const ReloadButton: ({ text, variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface TableProps extends TableRootProps {
-    showLoading?: boolean;
-    loadingComponent?: ReactNode;
-    emptyComponent?: ReactNode;
-    canResize?: boolean;
-    children: ReactNode;
-}
-declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
-
 interface TableCardContainerProps extends GridProps {
     children: ReactNode;
     variant?: "carousel" | "";
@@ -366,7 +366,7 @@ interface TextCellProps {
 }
 declare const TextCell: ({ label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
 
-interface DataTableContext<TData> {
+interface DataTableContext<TData = unknown> {
     table: Table$1<TData>;
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;

package/dist/index.js

@@ -11,16 +11,16 @@ var fa6 = require('react-icons/fa6');
 var bi = require('react-icons/bi');
 var cg = require('react-icons/cg');
 var io = require('react-icons/io');
+var adapter = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');
+var invariant = require('tiny-invariant');
 var hi2 = require('react-icons/hi2');
 var reactTable = require('@tanstack/react-table');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var bs = require('react-icons/bs');
 var gr = require('react-icons/gr');
+var hi = require('react-icons/hi');
 var reactQuery = require('@tanstack/react-query');
 var io5 = require('react-icons/io5');
-var hi = require('react-icons/hi');
-var adapter = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');
-var invariant = require('tiny-invariant');
 var axios = require('axios');
 var usehooks = require('@uidotdev/usehooks');
 var reactHookForm = require('react-hook-form');
@@ -458,6 +458,107 @@ const EditSortingButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineSort, {}),
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { children: jsxRuntime.jsxs(react.Button, { as: "div", variant: "ghost", onClick: sortingModal.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
 };
 
+const CheckboxCard = React__namespace.forwardRef(function CheckboxCard(props, ref) {
+    const { inputProps, label, description, icon, addon, indicator = jsxRuntime.jsx(react.CheckboxCard.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? react.CheckboxCard.Content : React__namespace.Fragment;
+    return (jsxRuntime.jsxs(react.CheckboxCard.Root, { ...rest, children: [jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsxs(react.CheckboxCard.Control, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxRuntime.jsxs(ContentWrapper, { children: [icon, label && (jsxRuntime.jsx(react.CheckboxCard.Label, { children: label })), description && (jsxRuntime.jsx(react.CheckboxCard.Description, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsxRuntime.jsx(react.CheckboxCard.Addon, { children: addon })] }));
+});
+react.CheckboxCard.Indicator;
+
+function ColumnCard({ columnId }) {
+    const ref = React.useRef(null);
+    const [dragging, setDragging] = React.useState(false); // NEW
+    const { table } = useDataTableContext();
+    const displayName = columnId;
+    const column = table.getColumn(columnId);
+    invariant(column);
+    React.useEffect(() => {
+        const el = ref.current;
+        invariant(el);
+        return adapter.draggable({
+            element: el,
+            getInitialData: () => {
+                return { column: table.getColumn(columnId) };
+            },
+            onDragStart: () => setDragging(true), // NEW
+            onDrop: () => setDragging(false), // NEW
+        });
+    }, [columnId, table]);
+    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+}
+function CardContainer({ location, children }) {
+    const ref = React.useRef(null);
+    const [isDraggedOver, setIsDraggedOver] = React.useState(false);
+    React.useEffect(() => {
+        const el = ref.current;
+        invariant(el);
+        return adapter.dropTargetForElements({
+            element: el,
+            getData: () => ({ location }),
+            onDragEnter: () => setIsDraggedOver(true),
+            onDragLeave: () => setIsDraggedOver(false),
+            onDrop: () => setIsDraggedOver(false),
+        });
+    }, [location]);
+    // const isDark = (location + location) % 2 === 1;
+    function getColor(isDraggedOver) {
+        if (isDraggedOver) {
+            return {
+                backgroundColor: "blue.400",
+                _dark: {
+                    backgroundColor: "blue.400",
+                },
+            };
+        }
+        // return isDark ? "lightgrey" : "white";
+        return {
+            backgroundColor: undefined,
+            _dark: {
+                backgroundColor: undefined,
+            },
+        };
+    }
+    return (jsxRuntime.jsx(react.Box, { ...getColor(isDraggedOver), ref: ref, children: children }));
+}
+const TableViewer = () => {
+    const { table } = useDataTableContext();
+    const [order, setOrder] = React.useState(table.getAllLeafColumns().map((column) => {
+        return column.id;
+    }));
+    React.useEffect(() => {
+        return adapter.monitorForElements({
+            onDrop({ source, location }) {
+                const destination = location.current.dropTargets[0];
+                if (!destination) {
+                    return;
+                }
+                const destinationLocation = destination.data.location;
+                // const sourceLocation = source.data.location;
+                const sourceColumn = source.data.column;
+                const columnOrder = order.map((id) => {
+                    if (id == sourceColumn.id) {
+                        return "<marker>";
+                    }
+                    return id;
+                });
+                const columnBefore = columnOrder.slice(0, destinationLocation + 1);
+                const columnAfter = columnOrder.slice(destinationLocation + 1, columnOrder.length);
+                const newOrder = [
+                    ...columnBefore,
+                    sourceColumn.id,
+                    ...columnAfter,
+                ].filter((id) => id != "<marker>");
+                table.setColumnOrder(newOrder);
+                setOrder(newOrder);
+            },
+        });
+    }, [order, table]);
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
+            return (jsxRuntime.jsx(CardContainer, { location: index, children: jsxRuntime.jsx(ColumnCard, { columnId: columnId }) }));
+        }) }));
+};
+
 const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
     const viewModel = react.useDisclosure();
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
@@ -833,7 +934,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
         onColumnVisibilityChange: setColumnVisibility,
     });
     return (jsxRuntime.jsx(DataTableContext.Provider, { value: {
-            table: { ...table },
+            table: table,
             globalFilter: globalFilter,
             setGlobalFilter: setGlobalFilter,
             type: "client",
@@ -1156,6 +1257,20 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
 
+const EmptyState$1 = React__namespace.forwardRef(function EmptyState(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
+});
+
+const EmptyResult = (jsxRuntime.jsx(EmptyState$1, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
+const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
+    const { table } = useDataTableContext();
+    if (table.getRowModel().rows.length <= 0) {
+        return emptyComponent;
+    }
+    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
+};
+
 const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, controlProps = {}, tableFooterProps = {}, variant = "", }) => {
     if (variant === "greedy") {
         return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { canResize: false, ...tableProps, children: [jsxRuntime.jsx(TableHeader, { canResize: false, ...tableHeaderProps }), jsxRuntime.jsx(TableBody, { canResize: false, ...tableBodyProps }), showFooter && (jsxRuntime.jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
@@ -1183,20 +1298,6 @@ const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
         }, children: [jsxRuntime.jsx(io5.IoReload, {}), " ", text] }));
 };
 
-const EmptyState$1 = React__namespace.forwardRef(function EmptyState(props, ref) {
-    const { title, description, icon, children, ...rest } = props;
-    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
-});
-
-const EmptyResult = (jsxRuntime.jsx(EmptyState$1, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
-const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
-    const { table } = useDataTableContext();
-    if (table.getRowModel().rows.length <= 0) {
-        return emptyComponent;
-    }
-    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
-};
-
 const TableCardContainer = ({ children, variant = "", ...props }) => {
     if (variant === "carousel") {
         return (jsxRuntime.jsx(react.Flex, { overflow: "scroll", gap: "1rem", children: children }));
@@ -1261,107 +1362,6 @@ const TableSelector = () => {
                 }, "aria-label": "reset selection", children: jsxRuntime.jsx(md.MdClear, {}) }))] }));
 };
 
-const CheckboxCard = React__namespace.forwardRef(function CheckboxCard(props, ref) {
-    const { inputProps, label, description, icon, addon, indicator = jsxRuntime.jsx(react.CheckboxCard.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
-    const hasContent = label || description || icon;
-    const ContentWrapper = indicator ? react.CheckboxCard.Content : React__namespace.Fragment;
-    return (jsxRuntime.jsxs(react.CheckboxCard.Root, { ...rest, children: [jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsxs(react.CheckboxCard.Control, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxRuntime.jsxs(ContentWrapper, { children: [icon, label && (jsxRuntime.jsx(react.CheckboxCard.Label, { children: label })), description && (jsxRuntime.jsx(react.CheckboxCard.Description, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsxRuntime.jsx(react.CheckboxCard.Addon, { children: addon })] }));
-});
-react.CheckboxCard.Indicator;
-
-function ColumnCard({ columnId }) {
-    const ref = React.useRef(null);
-    const [dragging, setDragging] = React.useState(false); // NEW
-    const { table } = useDataTableContext();
-    const displayName = columnId;
-    const column = table.getColumn(columnId);
-    invariant(column);
-    React.useEffect(() => {
-        const el = ref.current;
-        invariant(el);
-        return adapter.draggable({
-            element: el,
-            getInitialData: () => {
-                return { column: table.getColumn(columnId) };
-            },
-            onDragStart: () => setDragging(true), // NEW
-            onDrop: () => setDragging(false), // NEW
-        });
-    }, [columnId, table]);
-    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
-}
-function CardContainer({ location, children }) {
-    const ref = React.useRef(null);
-    const [isDraggedOver, setIsDraggedOver] = React.useState(false);
-    React.useEffect(() => {
-        const el = ref.current;
-        invariant(el);
-        return adapter.dropTargetForElements({
-            element: el,
-            getData: () => ({ location }),
-            onDragEnter: () => setIsDraggedOver(true),
-            onDragLeave: () => setIsDraggedOver(false),
-            onDrop: () => setIsDraggedOver(false),
-        });
-    }, [location]);
-    // const isDark = (location + location) % 2 === 1;
-    function getColor(isDraggedOver) {
-        if (isDraggedOver) {
-            return {
-                backgroundColor: "blue.400",
-                _dark: {
-                    backgroundColor: "blue.400",
-                },
-            };
-        }
-        // return isDark ? "lightgrey" : "white";
-        return {
-            backgroundColor: undefined,
-            _dark: {
-                backgroundColor: undefined,
-            },
-        };
-    }
-    return (jsxRuntime.jsx(react.Box, { ...getColor(isDraggedOver), ref: ref, children: children }));
-}
-const TableViewer = () => {
-    const { table } = useDataTableContext();
-    const [order, setOrder] = React.useState(table.getAllLeafColumns().map((column) => {
-        return column.id;
-    }));
-    React.useEffect(() => {
-        return adapter.monitorForElements({
-            onDrop({ source, location }) {
-                const destination = location.current.dropTargets[0];
-                if (!destination) {
-                    return;
-                }
-                const destinationLocation = destination.data.location;
-                // const sourceLocation = source.data.location;
-                const sourceColumn = source.data.column;
-                const columnOrder = order.map((id) => {
-                    if (id == sourceColumn.id) {
-                        return "<marker>";
-                    }
-                    return id;
-                });
-                const columnBefore = columnOrder.slice(0, destinationLocation + 1);
-                const columnAfter = columnOrder.slice(destinationLocation + 1, columnOrder.length);
-                const newOrder = [
-                    ...columnBefore,
-                    sourceColumn.id,
-                    ...columnAfter,
-                ].filter((id) => id != "<marker>");
-                table.setColumnOrder(newOrder);
-                setOrder(newOrder);
-            },
-        });
-    }, [order, table]);
-    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
-            return (jsxRuntime.jsx(CardContainer, { location: index, children: jsxRuntime.jsx(ColumnCard, { columnId: columnId }) }));
-        }) }));
-};
-
 const TextCell = ({ label, containerProps = {}, textProps = {}, children, }) => {
     if (label) {
         return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", children: label }), children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }) }));
@@ -1706,7 +1706,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
-    const [page, setPage] = React.useState(1);
+    const [page, setPage] = React.useState(0);
     const [idMap, setIdMap] = React.useState({});
     const ref = React.useRef(null);
     const selectedIds = watch(column) ?? [];
@@ -1767,7 +1767,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const isDirty = (searchText?.length ?? 0) > 0;
     const onSearchChange = async (event) => {
         setSearchText(event.target.value);
-        setPage(1);
+        setPage(0);
         setLimit(10);
     };
     const watchId = watch(column);
@@ -1820,7 +1820,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                                                             }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
                                                                 ? renderDisplay(item)
                                                                 : item[display_column] }, item[column_ref]));
-                                                    }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(react.Text, { children: "Empty Search Result" }), " "] }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page, onPageChange: (e) => setPage(e.page), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+                                                    }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(react.Text, { children: "Empty Search Result" }), " "] }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
 const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, Menu, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, CheckboxCard as CheckboxCard$1, Alert, Group, InputElement, Popover, Field as Field$1, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, Group, InputElement, Popover, Field as Field$1, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
@@ -10,16 +10,16 @@ import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
+import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import invariant from 'tiny-invariant';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
 import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { BsExclamationCircleFill } from 'react-icons/bs';
 import { GrAscend, GrDescend } from 'react-icons/gr';
+import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
 import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
-import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
-import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import invariant from 'tiny-invariant';
 import axios from 'axios';
 import { useDebounce } from '@uidotdev/usehooks';
 import { useFormContext, useForm, FormProvider } from 'react-hook-form';
@@ -438,6 +438,107 @@ const EditSortingButton = ({ text, icon = jsx(MdOutlineSort, {}), title = "Edit
     return (jsx(Fragment, { children: jsxs(DialogRoot, { size: ["full", "full", "md", "md"], children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { children: jsxs(Button$1, { as: "div", variant: "ghost", onClick: sortingModal.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsxs(DialogHeader, { children: [jsx(DialogTitle, {}), title] }), jsx(DialogBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) }), jsx(DialogFooter, {})] })] }) }));
 };
 
+const CheckboxCard = React.forwardRef(function CheckboxCard(props, ref) {
+    const { inputProps, label, description, icon, addon, indicator = jsx(CheckboxCard$1.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? CheckboxCard$1.Content : React.Fragment;
+    return (jsxs(CheckboxCard$1.Root, { ...rest, children: [jsx(CheckboxCard$1.HiddenInput, { ref: ref, ...inputProps }), jsxs(CheckboxCard$1.Control, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxs(ContentWrapper, { children: [icon, label && (jsx(CheckboxCard$1.Label, { children: label })), description && (jsx(CheckboxCard$1.Description, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsx(CheckboxCard$1.Addon, { children: addon })] }));
+});
+CheckboxCard$1.Indicator;
+
+function ColumnCard({ columnId }) {
+    const ref = useRef(null);
+    const [dragging, setDragging] = useState(false); // NEW
+    const { table } = useDataTableContext();
+    const displayName = columnId;
+    const column = table.getColumn(columnId);
+    invariant(column);
+    useEffect(() => {
+        const el = ref.current;
+        invariant(el);
+        return draggable({
+            element: el,
+            getInitialData: () => {
+                return { column: table.getColumn(columnId) };
+            },
+            onDragStart: () => setDragging(true), // NEW
+            onDrop: () => setDragging(false), // NEW
+        });
+    }, [columnId, table]);
+    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", children: jsx(FaGripLinesVertical, { color: "gray.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+}
+function CardContainer({ location, children }) {
+    const ref = useRef(null);
+    const [isDraggedOver, setIsDraggedOver] = useState(false);
+    useEffect(() => {
+        const el = ref.current;
+        invariant(el);
+        return dropTargetForElements({
+            element: el,
+            getData: () => ({ location }),
+            onDragEnter: () => setIsDraggedOver(true),
+            onDragLeave: () => setIsDraggedOver(false),
+            onDrop: () => setIsDraggedOver(false),
+        });
+    }, [location]);
+    // const isDark = (location + location) % 2 === 1;
+    function getColor(isDraggedOver) {
+        if (isDraggedOver) {
+            return {
+                backgroundColor: "blue.400",
+                _dark: {
+                    backgroundColor: "blue.400",
+                },
+            };
+        }
+        // return isDark ? "lightgrey" : "white";
+        return {
+            backgroundColor: undefined,
+            _dark: {
+                backgroundColor: undefined,
+            },
+        };
+    }
+    return (jsx(Box, { ...getColor(isDraggedOver), ref: ref, children: children }));
+}
+const TableViewer = () => {
+    const { table } = useDataTableContext();
+    const [order, setOrder] = useState(table.getAllLeafColumns().map((column) => {
+        return column.id;
+    }));
+    useEffect(() => {
+        return monitorForElements({
+            onDrop({ source, location }) {
+                const destination = location.current.dropTargets[0];
+                if (!destination) {
+                    return;
+                }
+                const destinationLocation = destination.data.location;
+                // const sourceLocation = source.data.location;
+                const sourceColumn = source.data.column;
+                const columnOrder = order.map((id) => {
+                    if (id == sourceColumn.id) {
+                        return "<marker>";
+                    }
+                    return id;
+                });
+                const columnBefore = columnOrder.slice(0, destinationLocation + 1);
+                const columnAfter = columnOrder.slice(destinationLocation + 1, columnOrder.length);
+                const newOrder = [
+                    ...columnBefore,
+                    sourceColumn.id,
+                    ...columnAfter,
+                ].filter((id) => id != "<marker>");
+                table.setColumnOrder(newOrder);
+                setOrder(newOrder);
+            },
+        });
+    }, [order, table]);
+    return (jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
+            return (jsx(CardContainer, { location: index, children: jsx(ColumnCard, { columnId: columnId }) }));
+        }) }));
+};
+
 const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
     const viewModel = useDisclosure();
     return (jsx(Fragment, { children: jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsxs(DialogHeader, { children: [jsx(DialogTitle, {}), title] }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }) }));
@@ -813,7 +914,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
         onColumnVisibilityChange: setColumnVisibility,
     });
     return (jsx(DataTableContext.Provider, { value: {
-            table: { ...table },
+            table: table,
             globalFilter: globalFilter,
             setGlobalFilter: setGlobalFilter,
             type: "client",
@@ -1136,6 +1237,20 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
 
+const EmptyState$1 = React.forwardRef(function EmptyState(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return (jsx(EmptyState$2.Root, { ref: ref, ...rest, children: jsxs(EmptyState$2.Content, { children: [icon && (jsx(EmptyState$2.Indicator, { children: icon })), description ? (jsxs(VStack, { textAlign: "center", children: [jsx(EmptyState$2.Title, { children: title }), jsx(EmptyState$2.Description, { children: description })] })) : (jsx(EmptyState$2.Title, { children: title })), children] }) }));
+});
+
+const EmptyResult = (jsx(EmptyState$1, { icon: jsx(HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxs(List.Root, { variant: "marker", children: [jsx(List.Item, { children: "Try removing filters" }), jsx(List.Item, { children: "Try different keywords" })] }) }));
+const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
+    const { table } = useDataTableContext();
+    if (table.getRowModel().rows.length <= 0) {
+        return emptyComponent;
+    }
+    return (jsx(Table$1.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
+};
+
 const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, controlProps = {}, tableFooterProps = {}, variant = "", }) => {
     if (variant === "greedy") {
         return (jsx(TableControls, { ...controlProps, children: jsxs(Table, { canResize: false, ...tableProps, children: [jsx(TableHeader, { canResize: false, ...tableHeaderProps }), jsx(TableBody, { canResize: false, ...tableBodyProps }), showFooter && (jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
@@ -1163,20 +1278,6 @@ const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
         }, children: [jsx(IoReload, {}), " ", text] }));
 };
 
-const EmptyState$1 = React.forwardRef(function EmptyState(props, ref) {
-    const { title, description, icon, children, ...rest } = props;
-    return (jsx(EmptyState$2.Root, { ref: ref, ...rest, children: jsxs(EmptyState$2.Content, { children: [icon && (jsx(EmptyState$2.Indicator, { children: icon })), description ? (jsxs(VStack, { textAlign: "center", children: [jsx(EmptyState$2.Title, { children: title }), jsx(EmptyState$2.Description, { children: description })] })) : (jsx(EmptyState$2.Title, { children: title })), children] }) }));
-});
-
-const EmptyResult = (jsx(EmptyState$1, { icon: jsx(HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxs(List.Root, { variant: "marker", children: [jsx(List.Item, { children: "Try removing filters" }), jsx(List.Item, { children: "Try different keywords" })] }) }));
-const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
-    const { table } = useDataTableContext();
-    if (table.getRowModel().rows.length <= 0) {
-        return emptyComponent;
-    }
-    return (jsx(Table$1.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
-};
-
 const TableCardContainer = ({ children, variant = "", ...props }) => {
     if (variant === "carousel") {
         return (jsx(Flex, { overflow: "scroll", gap: "1rem", children: children }));
@@ -1241,107 +1342,6 @@ const TableSelector = () => {
                 }, "aria-label": "reset selection", children: jsx(MdClear, {}) }))] }));
 };
 
-const CheckboxCard = React.forwardRef(function CheckboxCard(props, ref) {
-    const { inputProps, label, description, icon, addon, indicator = jsx(CheckboxCard$1.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
-    const hasContent = label || description || icon;
-    const ContentWrapper = indicator ? CheckboxCard$1.Content : React.Fragment;
-    return (jsxs(CheckboxCard$1.Root, { ...rest, children: [jsx(CheckboxCard$1.HiddenInput, { ref: ref, ...inputProps }), jsxs(CheckboxCard$1.Control, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxs(ContentWrapper, { children: [icon, label && (jsx(CheckboxCard$1.Label, { children: label })), description && (jsx(CheckboxCard$1.Description, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsx(CheckboxCard$1.Addon, { children: addon })] }));
-});
-CheckboxCard$1.Indicator;
-
-function ColumnCard({ columnId }) {
-    const ref = useRef(null);
-    const [dragging, setDragging] = useState(false); // NEW
-    const { table } = useDataTableContext();
-    const displayName = columnId;
-    const column = table.getColumn(columnId);
-    invariant(column);
-    useEffect(() => {
-        const el = ref.current;
-        invariant(el);
-        return draggable({
-            element: el,
-            getInitialData: () => {
-                return { column: table.getColumn(columnId) };
-            },
-            onDragStart: () => setDragging(true), // NEW
-            onDrop: () => setDragging(false), // NEW
-        });
-    }, [columnId, table]);
-    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", children: jsx(FaGripLinesVertical, { color: "gray.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
-}
-function CardContainer({ location, children }) {
-    const ref = useRef(null);
-    const [isDraggedOver, setIsDraggedOver] = useState(false);
-    useEffect(() => {
-        const el = ref.current;
-        invariant(el);
-        return dropTargetForElements({
-            element: el,
-            getData: () => ({ location }),
-            onDragEnter: () => setIsDraggedOver(true),
-            onDragLeave: () => setIsDraggedOver(false),
-            onDrop: () => setIsDraggedOver(false),
-        });
-    }, [location]);
-    // const isDark = (location + location) % 2 === 1;
-    function getColor(isDraggedOver) {
-        if (isDraggedOver) {
-            return {
-                backgroundColor: "blue.400",
-                _dark: {
-                    backgroundColor: "blue.400",
-                },
-            };
-        }
-        // return isDark ? "lightgrey" : "white";
-        return {
-            backgroundColor: undefined,
-            _dark: {
-                backgroundColor: undefined,
-            },
-        };
-    }
-    return (jsx(Box, { ...getColor(isDraggedOver), ref: ref, children: children }));
-}
-const TableViewer = () => {
-    const { table } = useDataTableContext();
-    const [order, setOrder] = useState(table.getAllLeafColumns().map((column) => {
-        return column.id;
-    }));
-    useEffect(() => {
-        return monitorForElements({
-            onDrop({ source, location }) {
-                const destination = location.current.dropTargets[0];
-                if (!destination) {
-                    return;
-                }
-                const destinationLocation = destination.data.location;
-                // const sourceLocation = source.data.location;
-                const sourceColumn = source.data.column;
-                const columnOrder = order.map((id) => {
-                    if (id == sourceColumn.id) {
-                        return "<marker>";
-                    }
-                    return id;
-                });
-                const columnBefore = columnOrder.slice(0, destinationLocation + 1);
-                const columnAfter = columnOrder.slice(destinationLocation + 1, columnOrder.length);
-                const newOrder = [
-                    ...columnBefore,
-                    sourceColumn.id,
-                    ...columnAfter,
-                ].filter((id) => id != "<marker>");
-                table.setColumnOrder(newOrder);
-                setOrder(newOrder);
-            },
-        });
-    }, [order, table]);
-    return (jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
-            return (jsx(CardContainer, { location: index, children: jsx(ColumnCard, { columnId: columnId }) }));
-        }) }));
-};
-
 const TextCell = ({ label, containerProps = {}, textProps = {}, children, }) => {
     if (label) {
         return (jsx(Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsx(Tooltip, { content: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", children: label }), children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }) }));
@@ -1686,7 +1686,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const [searchText, setSearchText] = useState();
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
-    const [page, setPage] = useState(1);
+    const [page, setPage] = useState(0);
     const [idMap, setIdMap] = useState({});
     const ref = useRef(null);
     const selectedIds = watch(column) ?? [];
@@ -1747,7 +1747,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     const isDirty = (searchText?.length ?? 0) > 0;
     const onSearchChange = async (event) => {
         setSearchText(event.target.value);
-        setPage(1);
+        setPage(0);
         setLimit(10);
     };
     const watchId = watch(column);
@@ -1800,7 +1800,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                                                             }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
                                                                 ? renderDisplay(item)
                                                                 : item[display_column] }, item[column_ref]));
-                                                    }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Text, { children: "Empty Search Result" }), " "] }))] }), jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page, onPageChange: (e) => setPage(e.page), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+                                                    }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Text, { children: "Empty Search Result" }), " "] }))] }), jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
 const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {

package/dist/types/components/DataTable/DataTable.d.ts

@@ -10,7 +10,7 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-export interface DataTableProps<TData> {
+export interface DataTableProps<TData = unknown> {
     children?: ReactNode | ReactNode[];
     data: TData[];
     columns: ColumnDef<TData, unknown>[];

package/dist/types/components/DataTable/DefaultTable.d.ts

@@ -1,9 +1,9 @@
 import { TableHeaderProps as ChakraHeaderProps } from "@chakra-ui/react";
-import { TableProps } from "../../index";
 import { TableBodyProps } from "./TableBody";
 import { TableControlsProps } from "./TableControls";
 import { TableFooterProps } from "./TableFooter";
 import { TableHeaderProps } from "./TableHeader";
+import { TableProps } from "./Table";
 export interface DefaultTableProps {
     showFooter?: boolean;
     showSelector?: boolean;

package/dist/types/components/DataTable/context/DataTableContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { OnChangeFn, Table } from "@tanstack/react-table";
-export interface DataTableContext<TData> {
+export interface DataTableContext<TData = unknown> {
     table: Table<TData>;
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",