@bsol-oss/react-datatable5 7.5.1 → 7.6.1

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>[];
@@ -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

@@ -570,7 +570,7 @@ const PaginationItems = (props) => {
             return page.type === "ellipsis" ? (jsxRuntime.jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsxRuntime.jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
         }) }));
 };
-React__namespace.forwardRef(function PaginationPageText(props, ref) {
+const PaginationPageText = React__namespace.forwardRef(function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
     const { page, totalPages, pageRange, count } = react.usePaginationContext();
     const content = React__namespace.useMemo(() => {
@@ -833,7 +833,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",
@@ -1660,7 +1660,7 @@ const useSchemaContext = () => {
     };
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, }) => {
+const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
     if (serverUrl === undefined || serverUrl.length == 0) {
         throw new Error("The serverUrl is missing");
     }
@@ -1678,6 +1678,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
             searching,
             where,
             limit,
+            offset
         },
     };
     try {
@@ -1700,22 +1701,24 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     if (schema.properties == undefined) {
         throw new Error("schema properties when using DatePicker");
     }
-    const { total, showing, close, typeToSearch, showMore } = displayText;
+    const { total, showing, typeToSearch } = displayText;
     const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
+    const [page, setPage] = React.useState(0);
     const [idMap, setIdMap] = React.useState({});
     const ref = React.useRef(null);
     const selectedIds = watch(column) ?? [];
     const query = reactQuery.useQuery({
-        queryKey: [`idpicker`, searchText, in_table, limit],
+        queryKey: [`idpicker`, { searchText, in_table, limit, page }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
                 searching: searchText ?? "",
                 in_table: in_table,
                 limit: limit,
+                offset: page * 10,
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
                 return [
@@ -1731,15 +1734,15 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
             return data;
         },
         enabled: (searchText ?? "")?.length > 0,
-        staleTime: 10000,
+        staleTime: 300000,
     });
     reactQuery.useQuery({
-        queryKey: [`idpicker`, ...selectedIds],
+        queryKey: [`idpicker`, { selectedIds }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
                 in_table: in_table,
-                limit: limit,
+                limit: 1,
                 where: [{ id: column_ref, value: watchId }],
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
@@ -1756,7 +1759,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
             return data;
         },
         enabled: (selectedIds ?? []).length > 0,
-        staleTime: 10000,
+        staleTime: 300000,
     });
     const { isLoading, isFetching, data, isPending, isError } = query;
     const dataList = React.useMemo(() => data?.data ?? [], [data]);
@@ -1764,6 +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(0);
         setLimit(10);
     };
     const watchId = watch(column);
@@ -1793,40 +1797,30 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                             setOpenSearchResult(true);
                         }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch, onChange: (event) => {
+                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch ?? "Type To Search", onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
-                                                setOpenSearchResult(false);
-                                            }, children: close ?? "Close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
-                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                            dataList.map((item) => {
-                                                const selected = isMultiple
-                                                    ? watchIds.some((id) => item[column_ref] === id)
-                                                    : watchId === item[column_ref];
-                                                return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
-                                                        if (!isMultiple) {
-                                                            setOpenSearchResult(false);
-                                                            setValue(column, item[column_ref]);
-                                                            return;
-                                                        }
-                                                        const newSet = new Set([
-                                                            ...(watchIds ?? []),
-                                                            item[column_ref],
-                                                        ]);
-                                                        setValue(column, [...newSet]);
-                                                    }, 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(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Button, { onClick: async () => {
-                                                    setLimit((limit) => limit + 10);
-                                                    await getTableData({
-                                                        serverUrl,
-                                                        searching: searchText ?? "",
-                                                        in_table: in_table,
-                                                        limit: limit + 10,
-                                                    });
-                                                }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
+                                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                    dataList.map((item) => {
+                                                        const selected = isMultiple
+                                                            ? watchIds.some((id) => item[column_ref] === id)
+                                                            : watchId === item[column_ref];
+                                                        return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
+                                                                if (!isMultiple) {
+                                                                    setOpenSearchResult(false);
+                                                                    setValue(column, item[column_ref]);
+                                                                    return;
+                                                                }
+                                                                const newSet = new Set([
+                                                                    ...(watchIds ?? []),
+                                                                    item[column_ref],
+                                                                ]);
+                                                                setValue(column, [...newSet]);
+                                                            }, 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 + 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) {
@@ -2259,10 +2253,20 @@ const FilePicker = ({ column }) => {
                 }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+function filterArray(array, searchTerm) {
+    // Convert the search term to lower case for case-insensitive comparison
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    // Use the filter method to return an array of matching items
+    return array.filter((item) => {
+        // Convert each item to a string and check if it includes the search term
+        return item.toString().toLowerCase().includes(lowerCaseSearchTerm);
+    });
+}
+
 const EnumPicker = ({ column, isMultiple = false }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { schema, displayText } = useSchemaContext();
-    const { fieldRequired } = displayText;
+    const { fieldRequired, total, showing, typeToSearch } = displayText;
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     if (schema.properties == undefined) {
@@ -2297,12 +2301,10 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                             setOpenSearchResult(true);
                         }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
+                }, children: watchEnum })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch ?? "Type to search", onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
-                                                setOpenSearchResult(false);
-                                            }, children: "close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${total ?? "Total"}: ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
                                                 const selected = isMultiple
                                                     ? watchEnums.some((enumValue) => item === enumValue)
                                                     : watchEnum == item;

package/dist/index.mjs

@@ -550,7 +550,7 @@ const PaginationItems = (props) => {
             return page.type === "ellipsis" ? (jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
         }) }));
 };
-React.forwardRef(function PaginationPageText(props, ref) {
+const PaginationPageText = React.forwardRef(function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
     const { page, totalPages, pageRange, count } = usePaginationContext();
     const content = React.useMemo(() => {
@@ -813,7 +813,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",
@@ -1640,7 +1640,7 @@ const useSchemaContext = () => {
     };
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, }) => {
+const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
     if (serverUrl === undefined || serverUrl.length == 0) {
         throw new Error("The serverUrl is missing");
     }
@@ -1658,6 +1658,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
             searching,
             where,
             limit,
+            offset
         },
     };
     try {
@@ -1680,22 +1681,24 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     if (schema.properties == undefined) {
         throw new Error("schema properties when using DatePicker");
     }
-    const { total, showing, close, typeToSearch, showMore } = displayText;
+    const { total, showing, typeToSearch } = displayText;
     const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
     const [searchText, setSearchText] = useState();
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
+    const [page, setPage] = useState(0);
     const [idMap, setIdMap] = useState({});
     const ref = useRef(null);
     const selectedIds = watch(column) ?? [];
     const query = useQuery({
-        queryKey: [`idpicker`, searchText, in_table, limit],
+        queryKey: [`idpicker`, { searchText, in_table, limit, page }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
                 searching: searchText ?? "",
                 in_table: in_table,
                 limit: limit,
+                offset: page * 10,
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
                 return [
@@ -1711,15 +1714,15 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
             return data;
         },
         enabled: (searchText ?? "")?.length > 0,
-        staleTime: 10000,
+        staleTime: 300000,
     });
     useQuery({
-        queryKey: [`idpicker`, ...selectedIds],
+        queryKey: [`idpicker`, { selectedIds }],
         queryFn: async () => {
             const data = await getTableData({
                 serverUrl,
                 in_table: in_table,
-                limit: limit,
+                limit: 1,
                 where: [{ id: column_ref, value: watchId }],
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
@@ -1736,7 +1739,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
             return data;
         },
         enabled: (selectedIds ?? []).length > 0,
-        staleTime: 10000,
+        staleTime: 300000,
     });
     const { isLoading, isFetching, data, isPending, isError } = query;
     const dataList = useMemo(() => data?.data ?? [], [data]);
@@ -1744,6 +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(0);
         setLimit(10);
     };
     const watchId = watch(column);
@@ -1773,40 +1777,30 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                             setOpenSearchResult(true);
                         }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(Input, { placeholder: typeToSearch, onChange: (event) => {
+                }, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: typeToSearch ?? "Type To Search", onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsx(Button, { onClick: async () => {
-                                                setOpenSearchResult(false);
-                                            }, children: close ?? "Close" }), jsx(Flex, { flexFlow: "column wrap", children: 
-                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                            dataList.map((item) => {
-                                                const selected = isMultiple
-                                                    ? watchIds.some((id) => item[column_ref] === id)
-                                                    : watchId === item[column_ref];
-                                                return (jsx(Box, { cursor: "pointer", onClick: () => {
-                                                        if (!isMultiple) {
-                                                            setOpenSearchResult(false);
-                                                            setValue(column, item[column_ref]);
-                                                            return;
-                                                        }
-                                                        const newSet = new Set([
-                                                            ...(watchIds ?? []),
-                                                            item[column_ref],
-                                                        ]);
-                                                        setValue(column, [...newSet]);
-                                                    }, 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(Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsx(Fragment, { children: jsx(Button, { onClick: async () => {
-                                                    setLimit((limit) => limit + 10);
-                                                    await getTableData({
-                                                        serverUrl,
-                                                        searching: searchText ?? "",
-                                                        in_table: in_table,
-                                                        limit: limit + 10,
-                                                    });
-                                                }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { justifySelf: "center", children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: 
+                                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                    dataList.map((item) => {
+                                                        const selected = isMultiple
+                                                            ? watchIds.some((id) => item[column_ref] === id)
+                                                            : watchId === item[column_ref];
+                                                        return (jsx(Box, { cursor: "pointer", onClick: () => {
+                                                                if (!isMultiple) {
+                                                                    setOpenSearchResult(false);
+                                                                    setValue(column, item[column_ref]);
+                                                                    return;
+                                                                }
+                                                                const newSet = new Set([
+                                                                    ...(watchIds ?? []),
+                                                                    item[column_ref],
+                                                                ]);
+                                                                setValue(column, [...newSet]);
+                                                            }, 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 + 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) {
@@ -2239,10 +2233,20 @@ const FilePicker = ({ column }) => {
                 }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+function filterArray(array, searchTerm) {
+    // Convert the search term to lower case for case-insensitive comparison
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    // Use the filter method to return an array of matching items
+    return array.filter((item) => {
+        // Convert each item to a string and check if it includes the search term
+        return item.toString().toLowerCase().includes(lowerCaseSearchTerm);
+    });
+}
+
 const EnumPicker = ({ column, isMultiple = false }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { schema, displayText } = useSchemaContext();
-    const { fieldRequired } = displayText;
+    const { fieldRequired, total, showing, typeToSearch } = displayText;
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     if (schema.properties == undefined) {
@@ -2277,12 +2281,10 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                             setOpenSearchResult(true);
                         }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(Input, { placeholder: "Type to search", onChange: (event) => {
+                }, children: watchEnum })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: typeToSearch ?? "Type to search", onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsx(Button, { onClick: async () => {
-                                                setOpenSearchResult(false);
-                                            }, children: "close" }), jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
+                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsx(Text, { children: `${total ?? "Total"}: ${count}, ${showing ?? "Showing"} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
                                                 const selected = isMultiple
                                                     ? watchEnums.some((enumValue) => item === enumValue)
                                                     : watchEnum == item;

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/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/dist/types/components/Form/utils/filterArray.d.ts

@@ -0,0 +1 @@
+export declare function filterArray(array: string[], searchTerm: string): string[];

package/dist/types/components/Form/utils/getTableData.d.ts

@@ -2,6 +2,7 @@ export interface GetTableDataConfig {
     serverUrl: string;
     in_table: string;
     limit?: number;
+    offset?: number;
     where?: {
         id: string;
         value: string[];
@@ -12,4 +13,4 @@ export interface GetTableResponse {
     data?: object[];
     count: number;
 }
-export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, }: GetTableDataConfig) => Promise<any>;
+export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<any>;

package/package.json

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