@bsol-oss/react-datatable5 1.0.36 → 1.0.38

package/README.md

@@ -69,3 +69,10 @@ 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
 ```
+
+## Development
+
+```
+npm install
+npm run storybook
+```

package/dist/index.d.ts

@@ -90,7 +90,7 @@ declare module "@tanstack/react-table" {
         displayName: string;
     }
 }
-declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, loadingComponent, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const DensityToggleButton: () => react_jsx_runtime.JSX.Element;
 
@@ -116,9 +116,11 @@ declare const ResetSelectionButton: () => react_jsx_runtime.JSX.Element;
 declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
 
 interface TableProps {
+    showLoading?: boolean;
+    loadingComponent?: JSX.Element;
     children: ReactNode;
 }
-declare const Table: ({ children, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ children, showLoading, loadingComponent, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
 
 interface TableBodyProps {
     pinnedBgColor?: {
@@ -204,6 +206,7 @@ declare const useDataTable: () => {
     refreshData: () => void;
     globalFilter: string;
     setGlobalFilter: (filter: string) => void;
+    loading: boolean;
 };
 
 export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };

package/dist/index.js

@@ -17,6 +17,7 @@ const TableContext = react.createContext({
     refreshData: () => { },
     globalFilter: "",
     setGlobalFilter: () => { },
+    loading: false,
 });
 
 // Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
@@ -165,6 +166,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             },
             globalFilter: globalFilter,
             setGlobalFilter: setGlobalFilter,
+            loading: false
         }, children: children }));
 };
 
@@ -193,14 +195,14 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
         getData().catch((e) => {
             console.error(e);
         });
-    }, []);
+    }, [url]);
     return { data, loading, hasError, refreshData };
 };
 
 const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
-}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, loadingComponent = jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Loading..." }), children, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
     const [sorting, setSorting] = react.useState(defaultSorting);
     const [columnFilters, setColumnFilters] = react.useState(defaultColumnFilter); // can set initial column filter state here
     const [pagination, setPagination] = react.useState(defaultPagination);
@@ -286,12 +288,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     react.useEffect(() => {
         onRowSelect(table.getState().rowSelection);
     }, [table.getState().rowSelection]);
-    return (jsxRuntime.jsxs(TableContext.Provider, { value: {
+    return (jsxRuntime.jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
             globalFilter,
             setGlobalFilter,
-        }, children: [loading && loadingComponent, !loading && children] }));
+            loading: loading,
+        }, children: children }));
 };
 
 const DensityToggleButton = () => {
@@ -309,8 +312,8 @@ const ResetFilteringButton = () => {
 };
 
 const useDataTable = () => {
-    const { table, refreshData, globalFilter, setGlobalFilter } = react.useContext(TableContext);
-    return { table, refreshData, globalFilter, setGlobalFilter };
+    const { table, refreshData, globalFilter, setGlobalFilter, loading } = react.useContext(TableContext);
+    return { table, refreshData, globalFilter, setGlobalFilter, loading };
 };
 
 const TableFilter = () => {
@@ -454,9 +457,12 @@ const ResetSelectionButton = () => {
         }, children: "Reset Selection" }));
 };
 
-const Table = ({ children, ...props }) => {
-    const { table } = useDataTable();
-    return (jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }));
+const Table = ({ children, showLoading = false, loadingComponent = jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Loading..." }), ...props }) => {
+    const { table, loading } = useDataTable();
+    if (showLoading) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && loadingComponent, !loading && (jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }))] }));
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }) }));
 };
 
 const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
@@ -624,7 +630,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
                                                     ? null
                                                     : reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
                                                             // <UpDownIcon />
-                                                            jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }), jsxRuntime.jsx(react$1.Portal, { children: jsxRuntime.jsxs(react$1.MenuList, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdPushPin, {}), onClick: () => {
+                                                            jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) }), jsxRuntime.jsx(react$1.Box, { children: header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}) })] }) }), jsxRuntime.jsx(react$1.Portal, { children: jsxRuntime.jsxs(react$1.MenuList, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdPushPin, {}), onClick: () => {
                                                         header.column.pin("left");
                                                     }, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdCancel, {}), onClick: () => {
                                                         header.column.pin(false);
@@ -632,7 +638,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
                                                                 header.column.toggleSorting();
                                                             }, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(io.IoMdClose, {}), onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: "Clear Sorting" }))] }))] }) })] }), header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: "Clear Sorting" }))] }))] }) })] }), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
                                         ? "gray.700"
                                         : "gray.400",

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import { createContext, useState, useEffect, useContext } from 'react';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import axios from 'axios';
 import { Tooltip, IconButton, Button, Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, Flex, Switch, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, FormLabel, Checkbox, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
-import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
+import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdFilterListAlt, MdPushPin, MdCancel, MdSort, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
 import { UpDownIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
 import { IoMdEye, IoMdClose, IoMdCheckbox } from 'react-icons/io';
 import { Tbody, Tr, Td } from '@chakra-ui/table';
@@ -15,6 +15,7 @@ const TableContext = createContext({
     refreshData: () => { },
     globalFilter: "",
     setGlobalFilter: () => { },
+    loading: false,
 });
 
 // Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
@@ -163,6 +164,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             },
             globalFilter: globalFilter,
             setGlobalFilter: setGlobalFilter,
+            loading: false
         }, children: children }));
 };
 
@@ -191,14 +193,14 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
         getData().catch((e) => {
             console.error(e);
         });
-    }, []);
+    }, [url]);
     return { data, loading, hasError, refreshData };
 };
 
 const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder: defaultColumnOrder = [], columnFilters: defaultColumnFilter = [], density = "sm", globalFilter: defaultGlobalFilter = "", pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
-}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, loadingComponent = jsx(Fragment, { children: "Loading..." }), children, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, children, }) => {
     const [sorting, setSorting] = useState(defaultSorting);
     const [columnFilters, setColumnFilters] = useState(defaultColumnFilter); // can set initial column filter state here
     const [pagination, setPagination] = useState(defaultPagination);
@@ -284,12 +286,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     useEffect(() => {
         onRowSelect(table.getState().rowSelection);
     }, [table.getState().rowSelection]);
-    return (jsxs(TableContext.Provider, { value: {
+    return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
             globalFilter,
             setGlobalFilter,
-        }, children: [loading && loadingComponent, !loading && children] }));
+            loading: loading,
+        }, children: children }));
 };
 
 const DensityToggleButton = () => {
@@ -307,8 +310,8 @@ const ResetFilteringButton = () => {
 };
 
 const useDataTable = () => {
-    const { table, refreshData, globalFilter, setGlobalFilter } = useContext(TableContext);
-    return { table, refreshData, globalFilter, setGlobalFilter };
+    const { table, refreshData, globalFilter, setGlobalFilter, loading } = useContext(TableContext);
+    return { table, refreshData, globalFilter, setGlobalFilter, loading };
 };
 
 const TableFilter = () => {
@@ -452,9 +455,12 @@ const ResetSelectionButton = () => {
         }, children: "Reset Selection" }));
 };
 
-const Table = ({ children, ...props }) => {
-    const { table } = useDataTable();
-    return (jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }));
+const Table = ({ children, showLoading = false, loadingComponent = jsx(Fragment, { children: "Loading..." }), ...props }) => {
+    const { table, loading } = useDataTable();
+    if (showLoading) {
+        return (jsxs(Fragment, { children: [loading && loadingComponent, !loading && (jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }))] }));
+    }
+    return (jsx(Fragment, { children: jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }) }));
 };
 
 const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
@@ -622,7 +628,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
                                                     ? null
                                                     : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
                                                             // <UpDownIcon />
-                                                            jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) })] }) }), jsx(Portal, { children: jsxs(MenuList, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdPushPin, {}), onClick: () => {
+                                                            jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) }), jsx(Box, { children: header.column.getIsFiltered() && jsx(MdFilterListAlt, {}) })] }) }), jsx(Portal, { children: jsxs(MenuList, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdPushPin, {}), onClick: () => {
                                                         header.column.pin("left");
                                                     }, children: "Pin Column" })), header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdCancel, {}), onClick: () => {
                                                         header.column.pin(false);
@@ -630,7 +636,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
                                                                 header.column.toggleSorting();
                                                             }, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsx(MenuItem, { icon: jsx(IoMdClose, {}), onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: "Clear Sorting" }))] }))] }) })] }), header.column.getIsFiltered() && jsx(MdFilterListAlt, {}), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: "Clear Sorting" }))] }))] }) })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
                                         ? "gray.700"
                                         : "gray.400",

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

@@ -5,5 +5,6 @@ export interface DataTableContext<TData> {
     refreshData: () => void;
     globalFilter: string;
     setGlobalFilter: (filter: string) => void;
+    loading: boolean;
 }
 export declare const TableContext: import("react").Context<DataTableContext<any>>;

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

@@ -34,4 +34,4 @@ declare module "@tanstack/react-table" {
         displayName: string;
     }
 }
-export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, loadingComponent, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
 export interface TableProps {
+    showLoading?: boolean;
+    loadingComponent?: JSX.Element;
     children: ReactNode;
 }
-export declare const Table: ({ children, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ children, showLoading, loadingComponent, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,5 @@ export declare const useDataTable: () => {
     refreshData: () => void;
     globalFilter: string;
     setGlobalFilter: (filter: string) => void;
+    loading: boolean;
 };

package/package.json

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