@bsol-oss/react-datatable5 1.0.16 → 1.0.18

package/README.md

@@ -32,17 +32,22 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
   columns={columns}
   url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
 >
-  <TablePagination />
-  <ButtonGroup isAttached>
-    <EditViewButton />
-    <EditFilterButton />
-    <EditSortingButton />
-  </ButtonGroup>
-
+  <Flex gap="0.25rem">
+    <TablePagination />
+    <ButtonGroup isAttached>
+      <EditViewButton />
+      <EditFilterButton />
+      <EditSortingButton />
+    </ButtonGroup>
+    <EditOrderButton />
+    <PageSizeControl />
+    <ButtonGroup isAttached>
+      <TableSelector />
+    </ButtonGroup>
+  </Flex>
   <TableCardContainer>
     <TableCards />
   </TableCardContainer>
-  <PageSizeControl />
   <TablePagination />
 </DataTable>
 ```

package/dist/index.d.ts

@@ -5,6 +5,16 @@ import { ReactNode } from 'react';
 import * as _tanstack_table_core from '@tanstack/table-core';
 
 interface DataTableProps<T> {
+    children: JSX.Element | JSX.Element[];
+    data: T[];
+    columns: ColumnDef<T, any>[];
+    enableRowSelection?: boolean;
+    enableMultiRowSelection?: boolean;
+    enableSubRowSelection?: boolean;
+}
+declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+
+interface DataTableServerProps<T> {
     children: JSX.Element | JSX.Element[];
     url: string;
     columns: ColumnDef<T, any>[];
@@ -20,7 +30,7 @@ interface DataResponse<T> extends Result<T> {
     count: number;
     filterCount: number;
 }
-declare const DataTable: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
 
@@ -92,4 +102,4 @@ interface TextCellProps {
 }
 declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
 
-export { type DataResponse, DataTable, type DataTableProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
+export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };

package/dist/index.js

@@ -15,6 +15,57 @@ const TableContext = react.createContext({
     refreshData: () => { },
 });
 
+const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
+    const [sorting, setSorting] = react.useState([]);
+    const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
+    const [pagination, setPagination] = react.useState({
+        pageIndex: 0, //initial page index
+        pageSize: 10, //default page size
+    });
+    const [rowSelection, setRowSelection] = react.useState({});
+    const [columnOrder, setColumnOrder] = react.useState([]);
+    const table = reactTable.useReactTable({
+        data: data,
+        columns: columns,
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        manualPagination: true,
+        manualSorting: true,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        columnResizeMode: "onChange",
+        onRowSelectionChange: setRowSelection,
+        state: {
+            pagination,
+            sorting,
+            columnFilters,
+            rowSelection,
+            columnOrder,
+        },
+        defaultColumn: {
+            size: 150, //starting column size
+            minSize: 10, //enforced during column resizing
+            maxSize: 10000, //enforced during column resizing
+        },
+        enableRowSelection: enableRowSelection,
+        enableMultiRowSelection: enableMultiRowSelection,
+        enableSubRowSelection: enableSubRowSelection,
+        onColumnOrderChange: (state) => {
+            setColumnOrder(state);
+        },
+        rowCount: data.filterCount,
+    });
+    react.useEffect(() => {
+        setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
+    }, []);
+    return (jsxRuntime.jsx(TableContext.Provider, { value: {
+            table: { ...table },
+            refreshData: () => {
+                throw new Error("not implemented");
+            },
+        }, children: children }));
+};
+
 const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     const [loading, setLoading] = react.useState(true);
     const [hasError, setHasError] = react.useState(false);
@@ -44,7 +95,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
+const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
     const [sorting, setSorting] = react.useState([]);
     const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
     const [pagination, setPagination] = react.useState({
@@ -105,6 +156,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
         },
+        rowCount: data.filterCount,
     });
     react.useEffect(() => {
         refreshData();
@@ -179,9 +231,7 @@ const EditSortingButton = () => {
 
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = react.useContext(TableContext);
-    return (jsxRuntime.jsx(react$1.Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
-            table.setPageSize(Number(e.target.value));
-        }, children: pageSizes.map((pageSize) => (jsxRuntime.jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Button, rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react$1.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react$1.MenuItem, { onClick: () => { table.setPageSize(Number(pageSize)); }, children: pageSize }))) })] }) }));
 };
 
 const Table = ({ children }) => {
@@ -262,9 +312,11 @@ const TableFooter = () => {
                         backgroundColor: header.column.getIsPinned()
                             ? "gray.700"
                             : undefined,
-                    }, children: jsxRuntime.jsx(react$1.Button, { variant: "unstyled", children: header.isPlaceholder
-                            ? null
-                            : reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
+                    }, 
+                    // styling resize and pinning end
+                    display: "flex", alignItems: "center", children: header.isPlaceholder
+                        ? null
+                        : reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
 };
 
 const TableHeader = ({ canResize }) => {
@@ -321,7 +373,7 @@ const TableHeader = ({ canResize }) => {
 
 const TablePagination = ({}) => {
     const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
-    return (jsxRuntime.jsxs(react$1.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsxRuntime.jsx(react$1.Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
+    return (jsxRuntime.jsxs(react$1.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsxRuntime.jsx(react$1.Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
 };
 
 const TextCell = ({ label, children }) => {
@@ -332,6 +384,7 @@ const TextCell = ({ label, children }) => {
 };
 
 exports.DataTable = DataTable;
+exports.DataTableServer = DataTableServer;
 exports.EditFilterButton = EditFilterButton;
 exports.EditSortingButton = EditSortingButton;
 exports.EditViewButton = EditViewButton;

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useState, useEffect, useContext } from 'react';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import axios from 'axios';
-import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Select, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Menu, MenuButton, Portal, MenuList, MenuItem, ButtonGroup } from '@chakra-ui/react';
+import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Menu, MenuButton, MenuList, MenuItem, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup } from '@chakra-ui/react';
 import { IoMdEye, IoMdClose } from 'react-icons/io';
 import { MdFilterAlt, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
 import { ChevronUpIcon, UpDownIcon, ChevronDownIcon, CloseIcon } from '@chakra-ui/icons';
@@ -13,6 +13,57 @@ const TableContext = createContext({
     refreshData: () => { },
 });
 
+const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]); // can set initial column filter state here
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 10, //default page size
+    });
+    const [rowSelection, setRowSelection] = useState({});
+    const [columnOrder, setColumnOrder] = useState([]);
+    const table = useReactTable({
+        data: data,
+        columns: columns,
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        manualSorting: true,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        columnResizeMode: "onChange",
+        onRowSelectionChange: setRowSelection,
+        state: {
+            pagination,
+            sorting,
+            columnFilters,
+            rowSelection,
+            columnOrder,
+        },
+        defaultColumn: {
+            size: 150, //starting column size
+            minSize: 10, //enforced during column resizing
+            maxSize: 10000, //enforced during column resizing
+        },
+        enableRowSelection: enableRowSelection,
+        enableMultiRowSelection: enableMultiRowSelection,
+        enableSubRowSelection: enableSubRowSelection,
+        onColumnOrderChange: (state) => {
+            setColumnOrder(state);
+        },
+        rowCount: data.filterCount,
+    });
+    useEffect(() => {
+        setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
+    }, []);
+    return (jsx(TableContext.Provider, { value: {
+            table: { ...table },
+            refreshData: () => {
+                throw new Error("not implemented");
+            },
+        }, children: children }));
+};
+
 const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     const [loading, setLoading] = useState(true);
     const [hasError, setHasError] = useState(false);
@@ -42,7 +93,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
+const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]); // can set initial column filter state here
     const [pagination, setPagination] = useState({
@@ -103,6 +154,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
         },
+        rowCount: data.filterCount,
     });
     useEffect(() => {
         refreshData();
@@ -177,9 +229,7 @@ const EditSortingButton = () => {
 
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = useContext(TableContext);
-    return (jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
-            table.setPageSize(Number(e.target.value));
-        }, children: pageSizes.map((pageSize) => (jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
+    return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, rightIcon: jsx(ChevronDownIcon, {}), children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => { table.setPageSize(Number(pageSize)); }, children: pageSize }))) })] }) }));
 };
 
 const Table = ({ children }) => {
@@ -260,9 +310,11 @@ const TableFooter = () => {
                         backgroundColor: header.column.getIsPinned()
                             ? "gray.700"
                             : undefined,
-                    }, children: jsx(Button, { variant: "unstyled", children: header.isPlaceholder
-                            ? null
-                            : flexRender(header.column.columnDef.footer, header.getContext()) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
+                    }, 
+                    // styling resize and pinning end
+                    display: "flex", alignItems: "center", children: header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.footer, header.getContext()) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
 };
 
 const TableHeader = ({ canResize }) => {
@@ -319,7 +371,7 @@ const TableHeader = ({ canResize }) => {
 
 const TablePagination = ({}) => {
     const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
-    return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsx(Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", children: jsx(MdLastPage, {}) })] }));
+    return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsx(Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", children: jsx(MdLastPage, {}) })] }));
 };
 
 const TextCell = ({ label, children }) => {
@@ -329,4 +381,4 @@ const TextCell = ({ label, children }) => {
     return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
 };
 
-export { DataTable, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };
+export { DataTable, DataTableServer, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };

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

@@ -2,18 +2,10 @@
 import { ColumnDef } from "@tanstack/react-table";
 export interface DataTableProps<T> {
     children: JSX.Element | JSX.Element[];
-    url: string;
+    data: T[];
     columns: ColumnDef<T, any>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
 }
-export interface Result<T> {
-    results: T[];
-}
-export interface DataResponse<T> extends Result<T> {
-    success: boolean;
-    count: number;
-    filterCount: number;
-}
-export declare const DataTable: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ColumnDef } from "@tanstack/react-table";
+export interface DataTableServerProps<T> {
+    children: JSX.Element | JSX.Element[];
+    url: string;
+    columns: ColumnDef<T, any>[];
+    enableRowSelection?: boolean;
+    enableMultiRowSelection?: boolean;
+    enableSubRowSelection?: boolean;
+}
+export interface Result<T> {
+    results: T[];
+}
+export interface DataResponse<T> extends Result<T> {
+    success: boolean;
+    count: number;
+    filterCount: number;
+}
+export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components/DataTable";
+export * from "./components/DataTableServer";
 export * from "./components/EditViewButton";
 export * from "./components/EditFilterButton";
 export * from "./components/EditSortingButton";

package/package.json

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

package/dist/types/stories/CardViewShowcase.d.ts

@@ -1,2 +0,0 @@
-declare const CardViewShowcase: () => import("react/jsx-runtime").JSX.Element;
-export default CardViewShowcase;

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

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-declare const meta: {
-    title: string;
-    component: () => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const TableView: Story;
-export declare const TablePinningView: Story;
-export declare const CardView: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-};

package/dist/types/stories/TablePinningShowcase.d.ts

@@ -1,2 +0,0 @@
-declare const TablePinningShowcase: () => import("react/jsx-runtime").JSX.Element;
-export default TablePinningShowcase;

package/dist/types/stories/TableViewShowcase.d.ts

@@ -1,2 +0,0 @@
-declare const TableViewShowcase: () => import("react/jsx-runtime").JSX.Element;
-export default TableViewShowcase;