@bsol-oss/react-datatable5 1.0.53 → 1.0.55

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnFiltersState, SortingState, Row, Table as Table$1 } from '@tanstack/react-table';
+import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnFiltersState, SortingState, VisibilityState, Row, Table as Table$1 } from '@tanstack/react-table';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import React$1, { ReactNode } from 'react';
 import * as react_icons_lib from 'react-icons/lib';
-import { TableProps as TableProps$1, TextProps, TooltipProps } from '@chakra-ui/react';
+import { TableProps as TableProps$1, GridProps, TextProps, TooltipProps } from '@chakra-ui/react';
 import * as _tanstack_table_core from '@tanstack/table-core';
 
 type DensityState = "sm" | "md" | "lg";
@@ -55,8 +55,9 @@ interface DataTableProps<TData> {
     };
     sorting?: SortingState;
     rowSelection?: RowSelectionState;
+    columnVisibility?: VisibilityState;
 }
-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;
+declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
@@ -77,6 +78,7 @@ interface DataTableServerProps<TData> {
     sorting?: SortingState;
     rowSelection?: RowSelectionState;
     loadingComponent?: JSX.Element;
+    columnVisibility?: VisibilityState;
 }
 interface Result<T> {
     results: T[];
@@ -91,7 +93,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, 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, columnVisibility: defaultColumnVisibility, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultTableProps {
     totalText?: string;
@@ -189,14 +191,15 @@ interface TableRowSelectorProps<TData> {
 }
 declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
-interface TableCardContainerProps {
+interface TableCardContainerProps extends GridProps {
     children: JSX.Element;
 }
 declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
 
 interface TableCardsProps {
+    isSelectable?: boolean;
 }
-declare const TableCards: ({}: TableCardsProps) => react_jsx_runtime.JSX.Element;
+declare const TableCards: ({ isSelectable }: TableCardsProps) => react_jsx_runtime.JSX.Element;
 
 interface TableRendererProps<TData> {
     render: (render: Table$1<TData>) => React$1.ReactElement;

package/dist/index.js

@@ -109,11 +109,12 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
 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, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, 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 [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -132,6 +133,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             density: densityState,
             rowSelection,
+            columnVisibility,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -149,6 +151,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         // global filter end
         onDensityChange: setDensity,
         onRowSelectionChange: setRowSelection,
+        onColumnVisibilityChange: setColumnVisibility,
         initialState: {
             columnFilters: defaultColumnFilter,
             sorting: defaultSorting,
@@ -204,7 +207,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
 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, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, 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);
@@ -212,6 +215,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
     const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
     const [densityState, setDensity] = react.useState(density);
+    const [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
         defaultData: {
@@ -256,6 +260,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnOrder,
             globalFilter,
             density: densityState,
+            columnVisibility,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -280,6 +285,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         // for tanstack-table ts bug end
         onDensityChange: setDensity,
+        onColumnVisibilityChange: setColumnVisibility,
     });
     react.useEffect(() => {
         refreshData();
@@ -704,13 +710,13 @@ const TableCardContainer = ({ children, ...props }) => {
     return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
 };
 
-const TableCards = ({}) => {
+const TableCards = ({ isSelectable = false }) => {
     const { table } = react.useContext(TableContext);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.jsxs(react$1.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
+            return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.jsxs(react$1.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [isSelectable && (jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
                             disabled: !row.getCanSelect(),
                             // indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
+                            onChange: row.getToggleSelectedHandler() })), row.getVisibleCells().map((cell) => {
                             return (jsxRuntime.jsx(react$1.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
                         })] }) }, crypto.randomUUID()));
         }) }));

package/dist/index.mjs

@@ -107,11 +107,12 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
 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, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
     const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
     const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
     const [densityState, setDensity] = useState(density);
     const [rowSelection, setRowSelection] = useState(defaultRowSelection);
+    const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
     const table = useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -130,6 +131,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             density: densityState,
             rowSelection,
+            columnVisibility,
         },
         onColumnOrderChange: (state) => {
             setColumnOrder(state);
@@ -147,6 +149,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         // global filter end
         onDensityChange: setDensity,
         onRowSelectionChange: setRowSelection,
+        onColumnVisibilityChange: setColumnVisibility,
         initialState: {
             columnFilters: defaultColumnFilter,
             sorting: defaultSorting,
@@ -202,7 +205,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
 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, }) => {
+}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
     const [sorting, setSorting] = useState(defaultSorting);
     const [columnFilters, setColumnFilters] = useState(defaultColumnFilter); // can set initial column filter state here
     const [pagination, setPagination] = useState(defaultPagination);
@@ -210,6 +213,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
     const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
     const [densityState, setDensity] = useState(density);
+    const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
         defaultData: {
@@ -254,6 +258,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
             columnOrder,
             globalFilter,
             density: densityState,
+            columnVisibility,
         },
         defaultColumn: {
             size: 150, //starting column size
@@ -278,6 +283,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         // for tanstack-table ts bug end
         onDensityChange: setDensity,
+        onColumnVisibilityChange: setColumnVisibility,
     });
     useEffect(() => {
         refreshData();
@@ -702,13 +708,13 @@ const TableCardContainer = ({ children, ...props }) => {
     return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
 };
 
-const TableCards = ({}) => {
+const TableCards = ({ isSelectable = false }) => {
     const { table } = useContext(TableContext);
     return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsx(Card, { children: jsxs(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsx(Checkbox, { isChecked: row.getIsSelected(),
+            return (jsx(Card, { children: jsxs(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [isSelectable && (jsx(Checkbox, { isChecked: row.getIsSelected(),
                             disabled: !row.getCanSelect(),
                             // indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
+                            onChange: row.getToggleSelectedHandler() })), row.getVisibleCells().map((cell) => {
                             return (jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
                         })] }) }, crypto.randomUUID()));
         }) }));

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnDef, ColumnFiltersState, FilterFn, RowSelectionState, SortingState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, FilterFn, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import { DensityState } from "./DensityFeature";
 declare module "@tanstack/react-table" {
@@ -28,5 +28,6 @@ export interface DataTableProps<TData> {
     };
     sorting?: SortingState;
     rowSelection?: RowSelectionState;
+    columnVisibility?: VisibilityState;
 }
-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;
+export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder: defaultColumnOrder, columnFilters: defaultColumnFilter, density, globalFilter: defaultGlobalFilter, pagination: defaultPagination, sorting: defaultSorting, rowSelection: defaultRowSelection, columnVisibility: defaultColumnVisibility, 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, ColumnFiltersState, RowData, RowSelectionState, SortingState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, RowData, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "./DensityFeature";
 export interface DataTableServerProps<TData> {
     children: JSX.Element | JSX.Element[];
@@ -20,6 +20,7 @@ export interface DataTableServerProps<TData> {
     sorting?: SortingState;
     rowSelection?: RowSelectionState;
     loadingComponent?: JSX.Element;
+    columnVisibility?: VisibilityState;
 }
 export interface Result<T> {
     results: T[];
@@ -34,4 +35,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, 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, columnVisibility: defaultColumnVisibility, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface TableCardContainerProps {
+import { GridProps } from "@chakra-ui/react";
+export interface TableCardContainerProps extends GridProps {
     children: JSX.Element;
 }
 export declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
 export interface TableCardsProps {
+    isSelectable?: boolean;
 }
-export declare const TableCards: ({}: TableCardsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCards: ({ isSelectable }: TableCardsProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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