@bsol-oss/react-datatable5 7.6.0 → 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

@@ -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",
@@ -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

@@ -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",
@@ -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/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.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",