@bsol-oss/react-datatable5 1.0.32 → 1.0.34

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, 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,27 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-interface DataTableProps<T> {
+interface DataTableProps<TData> {
     children: JSX.Element | JSX.Element[];
-    data: T[];
-    columns: ColumnDef<T, any>[];
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
     density?: DensityState;
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
+    onRowSelect?: (rowSelection: RowSelectionState) => void;
 }
-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, density, onRowSelect, 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;
     density?: DensityState;
+    onRowSelect?: (row: RowSelectionState) => void;
 }
 interface Result<T> {
     results: T[];
@@ -69,7 +71,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, density, onRowSelect, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const DensityToggleButton: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -103,7 +103,7 @@ 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 DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, children, }) => {
     const [columnOrder, setColumnOrder] = react.useState([]);
     const [globalFilter, setGlobalFilter] = react.useState("");
     const [densityState, setDensity] = react.useState(density);
@@ -144,6 +144,9 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
     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,7 +186,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", children, }) => {
+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({
@@ -237,7 +240,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             rowSelection,
             columnOrder,
             globalFilter,
-            density: densityState
+            density: densityState,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -269,6 +272,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 +411,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;
@@ -647,7 +652,7 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
     if (label) {
         return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
     }
-    return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
+    return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
 };
 
 exports.DataTable = DataTable;

package/dist/index.mjs

@@ -101,7 +101,7 @@ 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 DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", onRowSelect = () => { }, children, }) => {
     const [columnOrder, setColumnOrder] = useState([]);
     const [globalFilter, setGlobalFilter] = useState("");
     const [densityState, setDensity] = useState(density);
@@ -142,6 +142,9 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
     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,7 +184,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", children, }) => {
+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({
@@ -235,7 +238,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             rowSelection,
             columnOrder,
             globalFilter,
-            density: densityState
+            density: densityState,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -267,6 +270,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 +409,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;
@@ -645,7 +650,7 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
     if (label) {
         return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
     }
-    return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
+    return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
 };
 
 export { DataTable, DataTableServer, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, FilterFn } from "@tanstack/react-table";
+import { ColumnDef, FilterFn, RowSelectionState } from "@tanstack/react-table";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import { DensityState } from "./DensityFeature";
 declare module "@tanstack/react-table" {
@@ -10,13 +10,14 @@ declare module "@tanstack/react-table" {
         itemRank: RankingInfo;
     }
 }
-export interface DataTableProps<T> {
+export interface DataTableProps<TData> {
     children: JSX.Element | JSX.Element[];
-    data: T[];
-    columns: ColumnDef<T, any>[];
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
     density?: DensityState;
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
     enableSubRowSelection?: boolean;
+    onRowSelect?: (rowSelection: RowSelectionState) => void;
 }
-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, density, onRowSelect, 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,15 @@
 /// <reference types="react" />
-import { ColumnDef, RowData } from "@tanstack/react-table";
+import { ColumnDef, RowData, RowSelectionState } 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;
     density?: DensityState;
+    onRowSelect?: (row: RowSelectionState) => void;
 }
 export interface Result<T> {
     results: T[];
@@ -23,4 +24,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, density, onRowSelect, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/package.json

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