@bsol-oss/react-datatable5 1.0.33 → 1.0.35

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, 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';
@@ -36,25 +36,45 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-interface DataTableProps<T> {
-    children: JSX.Element | JSX.Element[];
-    data: T[];
-    columns: ColumnDef<T, any>[];
-    density?: DensityState;
+interface DataTableProps<TData> {
+    children?: JSX.Element | JSX.Element[];
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
     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, 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<T> {
+interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
     url: string;
-    columns: ColumnDef<T, any>[];
+    columns: ColumnDef<TData, any>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
+    onRowSelect?: (row: RowSelectionState) => void;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    globalFilter?: string;
     density?: DensityState;
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    sorting?: SortingState;
+    rowSelection?: RowSelectionState;
 }
 interface Result<T> {
     results: T[];
@@ -69,7 +89,7 @@ declare module "@tanstack/react-table" {
         displayName: string;
     }
 }
-declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, 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;
 

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', 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,10 +145,19 @@ 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));
     }, []);
+    react.useEffect(() => {
+        onRowSelect(table.getState().rowSelection);
+    }, [table.getState().rowSelection]);
     return (jsxRuntime.jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: () => {
@@ -183,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", 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 = {}, 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,
@@ -237,7 +251,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             rowSelection,
             columnOrder,
             globalFilter,
-            density: densityState
+            density: densityState,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -269,6 +283,9 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     react.useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
+    react.useEffect(() => {
+        onRowSelect(table.getState().rowSelection);
+    }, [table.getState().rowSelection]);
     return (jsxRuntime.jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -405,7 +422,6 @@ const EditSortingButton = () => {
 const TableViewer = () => {
     const { table } = useDataTable();
     return (jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
-            console.log(column.columnDef.meta, "gokspo");
             const displayName = column.columnDef.meta === undefined
                 ? column.id
                 : column.columnDef.meta.displayName;

package/dist/index.mjs

@@ -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', 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,10 +143,19 @@ 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));
     }, []);
+    useEffect(() => {
+        onRowSelect(table.getState().rowSelection);
+    }, [table.getState().rowSelection]);
     return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: () => {
@@ -181,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", 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 = {}, 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,
@@ -235,7 +249,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             rowSelection,
             columnOrder,
             globalFilter,
-            density: densityState
+            density: densityState,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -267,6 +281,9 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
+    useEffect(() => {
+        onRowSelect(table.getState().rowSelection);
+    }, [table.getState().rowSelection]);
     return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -403,7 +420,6 @@ const EditSortingButton = () => {
 const TableViewer = () => {
     const { table } = useDataTable();
     return (jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
-            console.log(column.columnDef.meta, "gokspo");
             const displayName = column.columnDef.meta === undefined
                 ? column.id
                 : column.columnDef.meta.displayName;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, FilterFn } 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" {
@@ -10,13 +10,23 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-export interface DataTableProps<T> {
-    children: JSX.Element | JSX.Element[];
-    data: T[];
-    columns: ColumnDef<T, any>[];
-    density?: DensityState;
+export interface DataTableProps<TData> {
+    children?: JSX.Element | JSX.Element[];
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
     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, 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/DataTableContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Table } from "@tanstack/react-table";
-export interface DataTableContext<T> {
-    table: Table<T>;
+export interface DataTableContext<TData> {
+    table: Table<TData>;
     refreshData: () => void;
     globalFilter: string;
     setGlobalFilter: (filter: string) => void;

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

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

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