@bsol-oss/react-datatable5 1.0.34 → 1.0.36

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, Row } from '@tanstack/react-table';
+import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnFiltersState, SortingState, Row } from '@tanstack/react-table';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { ReactNode } from 'react';
 import { TextProps, TooltipProps } from '@chakra-ui/react';
@@ -37,16 +37,25 @@ declare module "@tanstack/react-table" {
     }
 }
 interface DataTableProps<TData> {
-    children: JSX.Element | JSX.Element[];
+    children?: JSX.Element | JSX.Element[];
     data: TData[];
     columns: ColumnDef<TData, any>[];
-    density?: DensityState;
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
     onRowSelect?: (rowSelection: RowSelectionState) => void;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    globalFilter?: string;
+    density?: DensityState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
 }
-declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, onRowSelect, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
@@ -55,8 +64,18 @@ interface DataTableServerProps<TData> {
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
-    density?: DensityState;
     onRowSelect?: (row: RowSelectionState) => void;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    globalFilter?: string;
+    density?: DensityState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
+    loadingComponent?: JSX.Element;
 }
 interface Result<T> {
     results: T[];
@@ -71,7 +90,7 @@ declare module "@tanstack/react-table" {
         displayName: string;
     }
 }
-declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, onRowSelect, 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, loadingComponent, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const DensityToggleButton: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -103,10 +103,14 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
     // Return if the item should be filtered in/out
     return itemRank.passed;
 };
-const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, children, }) => {
-    const [columnOrder, setColumnOrder] = react.useState([]);
-    const [globalFilter, setGlobalFilter] = react.useState("");
+const DataTable = ({ columns, data, 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 = {}, children, }) => {
+    const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
     const [densityState, setDensity] = react.useState(density);
+    const [rowSelection, setRowSelection] = react.useState(defaultRowSelection);
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -124,6 +128,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             columnOrder,
             globalFilter,
             density: densityState,
+            rowSelection
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -140,6 +145,12 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         globalFilterFn: "fuzzy",
         // global filter end
         onDensityChange: setDensity,
+        onRowSelectionChange: setRowSelection,
+        initialState: {
+            columnFilters: defaultColumnFilter,
+            sorting: defaultSorting,
+            pagination: defaultPagination,
+        },
     });
     react.useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -186,16 +197,16 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, 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 [globalFilter, setGlobalFilter] = react.useState("");
+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, }) => {
+    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);
+    const [rowSelection, setRowSelection] = react.useState(defaultRowSelection);
+    const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
     const [densityState, setDensity] = react.useState(density);
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
@@ -275,12 +286,12 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     react.useEffect(() => {
         onRowSelect(table.getState().rowSelection);
     }, [table.getState().rowSelection]);
-    return (jsxRuntime.jsx(TableContext.Provider, { value: {
+    return (jsxRuntime.jsxs(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
             globalFilter,
             setGlobalFilter,
-        }, children: children }));
+        }, children: [loading && loadingComponent, !loading && children] }));
 };
 
 const DensityToggleButton = () => {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } 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';
@@ -101,10 +101,14 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
     // Return if the item should be filtered in/out
     return itemRank.passed;
 };
-const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, children, }) => {
-    const [columnOrder, setColumnOrder] = useState([]);
-    const [globalFilter, setGlobalFilter] = useState("");
+const DataTable = ({ columns, data, 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 = {}, children, }) => {
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
     const [densityState, setDensity] = useState(density);
+    const [rowSelection, setRowSelection] = useState(defaultRowSelection);
     const table = useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -122,6 +126,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             columnOrder,
             globalFilter,
             density: densityState,
+            rowSelection
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -138,6 +143,12 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         globalFilterFn: "fuzzy",
         // global filter end
         onDensityChange: setDensity,
+        onRowSelectionChange: setRowSelection,
+        initialState: {
+            columnFilters: defaultColumnFilter,
+            sorting: defaultSorting,
+            pagination: defaultPagination,
+        },
     });
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
@@ -184,16 +195,16 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, 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 [globalFilter, setGlobalFilter] = useState("");
+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, }) => {
+    const [sorting, setSorting] = useState(defaultSorting);
+    const [columnFilters, setColumnFilters] = useState(defaultColumnFilter); // can set initial column filter state here
+    const [pagination, setPagination] = useState(defaultPagination);
+    const [rowSelection, setRowSelection] = useState(defaultRowSelection);
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
     const [densityState, setDensity] = useState(density);
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
@@ -273,12 +284,12 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     useEffect(() => {
         onRowSelect(table.getState().rowSelection);
     }, [table.getState().rowSelection]);
-    return (jsx(TableContext.Provider, { value: {
+    return (jsxs(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
             globalFilter,
             setGlobalFilter,
-        }, children: children }));
+        }, children: [loading && loadingComponent, !loading && children] }));
 };
 
 const DensityToggleButton = () => {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, FilterFn, RowSelectionState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, FilterFn, RowSelectionState, SortingState } from "@tanstack/react-table";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import { DensityState } from "./DensityFeature";
 declare module "@tanstack/react-table" {
@@ -11,13 +11,22 @@ declare module "@tanstack/react-table" {
     }
 }
 export interface DataTableProps<TData> {
-    children: JSX.Element | JSX.Element[];
+    children?: JSX.Element | JSX.Element[];
     data: TData[];
     columns: ColumnDef<TData, any>[];
-    density?: DensityState;
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
     onRowSelect?: (rowSelection: RowSelectionState) => void;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    globalFilter?: string;
+    density?: DensityState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
 }
-export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, onRowSelect, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, RowData, RowSelectionState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, RowData, RowSelectionState, SortingState } from "@tanstack/react-table";
 import { DensityState } from "./DensityFeature";
 export interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
@@ -8,8 +8,18 @@ export interface DataTableServerProps<TData> {
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
-    density?: DensityState;
     onRowSelect?: (row: RowSelectionState) => void;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    globalFilter?: string;
+    density?: DensityState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
+    loadingComponent?: JSX.Element;
 }
 export interface Result<T> {
     results: T[];
@@ -24,4 +34,4 @@ declare module "@tanstack/react-table" {
         displayName: string;
     }
 }
-export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, onRowSelect, 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, loadingComponent, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/package.json

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