@prt-ts/fluent-react-table-v2 9.53.0-build-2.0 → 9.54.4-build-1.0

package/index.cjs.js

@@ -314,10 +314,10 @@ function tableReducer(state, action) {
 
 const useGridContainer = (props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
+    const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData, isRowSelectable, } = props;
     const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
         isFilterDrawerOpen: false,
-        isViewsDrawerOpen: false
+        isViewsDrawerOpen: false,
     });
     const [pagination, setPagination] = React__namespace.useState({
         pageSize: props.pageSize || 10,
@@ -367,14 +367,19 @@ const useGridContainer = (props, ref) => {
             columnVisibility,
             columnPinning,
             columnSizing,
-            rowPinning
+            rowPinning,
         },
         getRowId(originalRow, index, parent) {
             const keyProps = props.dataPrimaryKye;
             return originalRow[keyProps] || `${index}`;
         },
         columnResizeMode: 'onChange',
-        enableRowSelection: rowSelectionMode !== undefined,
+        enableRowSelection: (row) => {
+            if (!isRowSelectable) {
+                return rowSelectionMode !== undefined;
+            }
+            return isRowSelectable(row);
+        },
         enableMultiRowSelection: rowSelectionMode === 'multiple',
         enableFilters: true,
         enableGlobalFilter: true,
@@ -407,7 +412,7 @@ const useGridContainer = (props, ref) => {
             pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
             rowSelectionMode: props.rowSelectionMode,
             isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
-            tableHeight: props.tableHeight || "650px",
+            tableHeight: props.tableHeight || '650px',
             updateData: onUpdateData,
             onTableViewDelete: props.onTableViewDelete,
             onTableViewSave: props.onTableViewSave,
@@ -427,7 +432,7 @@ const useGridContainer = (props, ref) => {
             setColumnSizing,
             setRowPinning,
             tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
-        }
+        },
     });
     const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const resetToDefaultView = () => {
@@ -455,12 +460,12 @@ const useGridContainer = (props, ref) => {
             columnSizing: {},
             rowPinning: (_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {},
             columnSizingInfo: {
-                "startOffset": null,
-                "startSize": null,
-                "deltaOffset": null,
-                "deltaPercentage": null,
-                "isResizingColumn": false,
-                "columnSizingStart": []
+                startOffset: null,
+                startSize: null,
+                deltaOffset: null,
+                deltaPercentage: null,
+                isResizingColumn: false,
+                columnSizingStart: [],
             },
         };
         return applyTableState(defaultTableState);
@@ -497,7 +502,7 @@ const useGridContainer = (props, ref) => {
             table,
             getTableState: table.getState,
             applyTableState,
-            resetToDefaultView
+            resetToDefaultView,
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -536,7 +541,7 @@ const useGridContainer = (props, ref) => {
         headerMenu,
         setGlobalFilter,
         resetToDefaultView,
-        applyTableState
+        applyTableState,
     };
 };
 

package/index.esm.js

@@ -292,10 +292,10 @@ function tableReducer(state, action) {
 
 const useGridContainer = (props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
+    const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData, isRowSelectable, } = props;
     const [drawerState, dispatch] = React.useReducer(tableReducer, {
         isFilterDrawerOpen: false,
-        isViewsDrawerOpen: false
+        isViewsDrawerOpen: false,
     });
     const [pagination, setPagination] = React.useState({
         pageSize: props.pageSize || 10,
@@ -345,14 +345,19 @@ const useGridContainer = (props, ref) => {
             columnVisibility,
             columnPinning,
             columnSizing,
-            rowPinning
+            rowPinning,
         },
         getRowId(originalRow, index, parent) {
             const keyProps = props.dataPrimaryKye;
             return originalRow[keyProps] || `${index}`;
         },
         columnResizeMode: 'onChange',
-        enableRowSelection: rowSelectionMode !== undefined,
+        enableRowSelection: (row) => {
+            if (!isRowSelectable) {
+                return rowSelectionMode !== undefined;
+            }
+            return isRowSelectable(row);
+        },
         enableMultiRowSelection: rowSelectionMode === 'multiple',
         enableFilters: true,
         enableGlobalFilter: true,
@@ -385,7 +390,7 @@ const useGridContainer = (props, ref) => {
             pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
             rowSelectionMode: props.rowSelectionMode,
             isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
-            tableHeight: props.tableHeight || "650px",
+            tableHeight: props.tableHeight || '650px',
             updateData: onUpdateData,
             onTableViewDelete: props.onTableViewDelete,
             onTableViewSave: props.onTableViewSave,
@@ -405,7 +410,7 @@ const useGridContainer = (props, ref) => {
             setColumnSizing,
             setRowPinning,
             tableSettings: (_l = props.tableSettings) !== null && _l !== void 0 ? _l : {},
-        }
+        },
     });
     const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const resetToDefaultView = () => {
@@ -433,12 +438,12 @@ const useGridContainer = (props, ref) => {
             columnSizing: {},
             rowPinning: (_j = props.rowPinningState) !== null && _j !== void 0 ? _j : {},
             columnSizingInfo: {
-                "startOffset": null,
-                "startSize": null,
-                "deltaOffset": null,
-                "deltaPercentage": null,
-                "isResizingColumn": false,
-                "columnSizingStart": []
+                startOffset: null,
+                startSize: null,
+                deltaOffset: null,
+                deltaPercentage: null,
+                isResizingColumn: false,
+                columnSizingStart: [],
             },
         };
         return applyTableState(defaultTableState);
@@ -475,7 +480,7 @@ const useGridContainer = (props, ref) => {
             table,
             getTableState: table.getState,
             applyTableState,
-            resetToDefaultView
+            resetToDefaultView,
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -514,7 +519,7 @@ const useGridContainer = (props, ref) => {
         headerMenu,
         setGlobalFilter,
         resetToDefaultView,
-        applyTableState
+        applyTableState,
     };
 };
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.53.0-build-2.0",
+  "version": "9.54.4-build-1.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.53.0",
-    "@fluentui/react-icons": ">=2.0.239",
+    "@fluentui/react-components": ">=9.54.4",
+    "@fluentui/react-icons": ">=2.0.247",
     "@fluentui/react-datepicker-compat": ">=0.4.32"
   },
   "dependencies": {

package/src/lib/types/TableProps.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowData, RowPinningState, RowSelectionState, SortingState, Table, VisibilityState } from "@tanstack/react-table";
-import { TableView } from "./TableView";
+import * as React from 'react';
+import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, Row, RowData, RowPinningState, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
+import { TableView } from './TableView';
 export type TableProps<TItem extends RowData> = {
     /**
      * Table Columns definitions.
@@ -40,7 +40,7 @@ export type TableProps<TItem extends RowData> = {
     /**
      * Row selection mode.
      */
-    rowSelectionMode?: "single" | "multiple";
+    rowSelectionMode?: 'single' | 'multiple';
     /**
      * Default global filter value.
      */
@@ -82,9 +82,9 @@ export type TableProps<TItem extends RowData> = {
      */
     rowPinningState?: RowPinningState;
     /**
-    * Component visible if the no item match the filter condition
-    * @default defaultNoItemComponent
-    */
+     * Component visible if the no item match the filter condition
+     * @default defaultNoItemComponent
+     */
     noFilterMatchPage?: React.ReactNode;
     /**
      * Component visible in the grid body if there is no items in the list
@@ -121,6 +121,10 @@ export type TableProps<TItem extends RowData> = {
      * Additional settings for the table
      */
     tableSettings?: TableSettings;
+    /**
+     * Callback to check if a row is selectable or not
+     */
+    isRowSelectable?: (row: Row<TItem>) => boolean;
 };
 export type TableSettings = {
     /**