@telus-uds/components-community.data-grid 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Fri, 14 Feb 2025 18:59:39 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Mar 2025 21:13:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.2.1
+
+Tue, 11 Mar 2025 21:13:58 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v4.3.0
+- Bump @telus-uds/components-base to v3.4.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 1.2.0
+
+Wed, 05 Mar 2025 00:06:37 GMT
+
+### Minor changes
+
+- `DatePicker`: Enhancement to make the row checkboxes controlled by the row's data (sam.obisesan@telus.com)
+- Bump @telus-uds/components-web to v4.2.1
+- Bump @telus-uds/components-base to v3.3.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.1.0
 
-Fri, 14 Feb 2025 18:59:39 GMT
+Fri, 14 Feb 2025 19:03:35 GMT
 
 ### Minor changes
 

package/lib/cjs/DataGrid.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StyledIconContainer = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,6 +17,8 @@ var _DataGridRow = _interopRequireDefault(require("./DataGridRow"));
 var _DataGridCell = _interopRequireDefault(require("./DataGridCell"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledIconContainer = exports.StyledIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGrid__StyledIconContainer",
   componentId: "[object Object]__sc-1ddcmt-0"
@@ -49,17 +51,31 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const [data, setData] = _react.default.useState(groupedRows ? (0, _utility.resetRowData)([...groupedRows], true) : (0, _utility.resetRowData)([...rows]));
   const [columnsData, setColumnsData] = _react.default.useState((0, _utility.resetColumnsData)(columns));
   const [checkAllState, setCheckAllState] = _react.default.useState(false);
-  const shouldCheckHeaderBox = allData => {
-    let isARowUnselectedInAllGroups = null;
+  const [disableHeaderCheckbox, setDisableHeaderCheckbox] = _react.default.useState(false);
+  const [hideHeaderCheckBoxByRows, setHideHeaderCheckBoxByRows] = _react.default.useState(false);
+  (0, _react.useEffect)(() => {
+    let _isAtLeastOneRowUnselected = null;
+    let _isAtLeastOneRowEnabled = null;
+    let _hideHeaderCheckBoxByRows = null;
     if (groupedRows) {
-      isARowUnselectedInAllGroups = Object.keys(allData).some(el => {
-        return (0, _utility.isAtLeastOneRowUnselected)(allData[el].data);
+      _isAtLeastOneRowUnselected = Object.keys(data).some(el => {
+        return (0, _utility.isAtLeastOneRowUnselected)(data[el].data);
+      });
+      _isAtLeastOneRowEnabled = Object.keys(data).some(el => {
+        return (0, _utility.isAtLeastOneRowEnabled)(data[el].data);
+      });
+      _hideHeaderCheckBoxByRows = Object.keys(data).some(el => {
+        return (0, _utility.hasEveryRowHiddenItsCheckbox)(data[el].data);
       });
     } else {
-      isARowUnselectedInAllGroups = (0, _utility.isAtLeastOneRowUnselected)(allData);
+      _isAtLeastOneRowUnselected = (0, _utility.isAtLeastOneRowUnselected)(data);
+      _isAtLeastOneRowEnabled = (0, _utility.isAtLeastOneRowEnabled)(data);
+      _hideHeaderCheckBoxByRows = (0, _utility.hasEveryRowHiddenItsCheckbox)(data);
     }
-    return !isARowUnselectedInAllGroups;
-  };
+    setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected);
+    setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled);
+    setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows);
+  }, [data, groupedRows]);
   const shouldDisplayIconColumn = (allData, _showCheckbox) => {
     let doesOneRowHaveExpandedContent = null;
     if (groupedRows) {
@@ -87,8 +103,11 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setData(_rows);
     setCheckAllState(!checkAllState);
   };
-  const toggleCheckbox = rowId => {
+  const toggleCheckbox = (rowId, row) => {
     let _data = null;
+    if (typeof row.checkBoxProps?.onChange === 'function') {
+      row.checkBoxProps.onChange();
+    }
     if (groupedRows) {
       const [group, _] = rowId.split('-');
       const id = parseInt(_, 10);
@@ -115,15 +134,18 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     setData(_row);
   };
-  const HeaderCheckBoxDisplay = showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
+  const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
     label: getCopy('all'),
-    checked: shouldCheckHeaderBox(data),
+    checked: checkAllState,
+    inactive: disableHeaderCheckbox,
     onChange: toggleSelectAll
   });
-  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => _showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
-    checked: row.isSelected,
-    onChange: () => toggleCheckbox(rowId)
-  });
+  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
+    return _showCheckbox && !row.hideCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
+      ...row.checkBoxProps,
+      onChange: () => toggleCheckbox(rowId, row)
+    });
+  };
   const buildDisplayCaret = (row, rowId) => row.hasExpandedRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
     onPress: () => toggleRowExpansion(rowId),
     icon: row.isExpandedRowOpen === true ? hideExpandedRowIcon : expandRowIcon,
@@ -341,6 +363,16 @@ DataGrid.propTypes = {
     expandedRowChildComponent: _propTypes.default.shape({
       component: _propTypes.default.node,
       displayOnLoad: _propTypes.default.bool.isRequired
+    }),
+    /**
+     * Set this to true to hide checkbox for the specified row
+     */
+    hideCheckbox: _propTypes.default.bool,
+    checkBoxProps: _propTypes.default.shape({
+      checked: _propTypes.default.bool,
+      name: _propTypes.default.string,
+      value: _propTypes.default.string.isRequired,
+      onChange: _propTypes.default.func
     })
   })),
   /**

package/lib/cjs/utility.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleRowCheckbox = exports.toggleExpandedRow = exports.toggleAllCheckBoxes = exports.resetRowData = exports.resetColumnsData = exports.isAtLeastOneRowUnselected = exports.SORT_DIRECTION = exports.ROW_TYPE = exports.DATA_TYPE = exports.CELL_TYPE = void 0;
+exports.toggleRowCheckbox = exports.toggleExpandedRow = exports.toggleAllCheckBoxes = exports.resetRowData = exports.resetColumnsData = exports.isAtLeastOneRowUnselected = exports.isAtLeastOneRowEnabled = exports.hasEveryRowHiddenItsCheckbox = exports.SORT_DIRECTION = exports.ROW_TYPE = exports.DATA_TYPE = exports.CELL_TYPE = void 0;
 const ROW_TYPE = exports.ROW_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -25,20 +25,38 @@ const DATA_TYPE = exports.DATA_TYPE = {
 const mappedData = array => {
   return array.map(element => {
     const eachRow = {
-      ...element,
-      isSelected: false
+      ...element
     };
     if (eachRow.expandedRowChildComponent) {
       eachRow.hasExpandedRow = true;
       eachRow.isExpandedRowOpen = element.expandedRowChildComponent.displayOnLoad;
     }
+    if (!eachRow.hideCheckbox) {
+      eachRow.hideCheckbox = false;
+    }
+    if (!eachRow.checkBoxProps) {
+      eachRow.checkBoxProps = {
+        value: `row_${eachRow.id}`,
+        inactive: false,
+        checked: false,
+        onChange: () => {}
+      };
+    }
     return eachRow;
   });
 };
 const isAtLeastOneRowUnselected = array => {
-  return array.some(each => each.isSelected === false);
+  return array.some(each => each.checkBoxProps?.inactive === false && each.checkBoxProps?.checked === false);
 };
 exports.isAtLeastOneRowUnselected = isAtLeastOneRowUnselected;
+const isAtLeastOneRowEnabled = array => {
+  return array.some(each => each.checkBoxProps?.inactive === false);
+};
+exports.isAtLeastOneRowEnabled = isAtLeastOneRowEnabled;
+const hasEveryRowHiddenItsCheckbox = array => {
+  return array.every(each => each.hideCheckbox === true);
+};
+exports.hasEveryRowHiddenItsCheckbox = hasEveryRowHiddenItsCheckbox;
 const resetColumnsData = data => {
   return data.map(element => ({
     ...element,
@@ -64,18 +82,29 @@ const resetRowData = function (data) {
 exports.resetRowData = resetRowData;
 const toggleAllCheckBoxes = (array, headerCheckBoxState) => {
   return array.map(element => {
-    return {
-      ...element,
-      isSelected: !headerCheckBoxState
-    };
+    let _el = null;
+    if (element.hideCheckbox === true || element.checkBoxProps && element.checkBoxProps.inactive) {
+      _el = {
+        ...element
+      };
+    } else {
+      _el = {
+        ...element
+      };
+      _el.checkBoxProps.checked = !headerCheckBoxState;
+    }
+    return _el;
   });
 };
 exports.toggleAllCheckBoxes = toggleAllCheckBoxes;
 const toggleRowCheckbox = (array, rowId) => {
-  return array.map(el => ({
-    ...el,
-    isSelected: el.id === rowId ? !el.isSelected : el.isSelected
-  }));
+  return array.map(el => {
+    const _el = {
+      ...el
+    };
+    _el.checkBoxProps.checked = el.id === rowId ? !_el.checkBoxProps.checked : _el.checkBoxProps.checked;
+    return _el;
+  });
 };
 exports.toggleRowCheckbox = toggleRowCheckbox;
 const toggleExpandedRow = (array, rowId) => {

package/lib/esm/DataGrid.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Checkbox, useCopy, useThemeTokens, variantProp, IconButton } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import dictionary from './dictionary';
-import { resetColumnsData, resetRowData, DATA_TYPE, SORT_DIRECTION, isAtLeastOneRowUnselected, toggleAllCheckBoxes, toggleExpandedRow, toggleRowCheckbox, ROW_TYPE, CELL_TYPE } from './utility';
+import { resetColumnsData, resetRowData, DATA_TYPE, SORT_DIRECTION, isAtLeastOneRowUnselected, isAtLeastOneRowEnabled, hasEveryRowHiddenItsCheckbox, toggleAllCheckBoxes, toggleExpandedRow, toggleRowCheckbox, ROW_TYPE, CELL_TYPE } from './utility';
 import DataGridTable from './DataGridTable';
 import DataGridHead from './DataGridHead';
 import DataGridBody from './DataGridBody';
@@ -42,17 +42,31 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const [data, setData] = React.useState(groupedRows ? resetRowData([...groupedRows], true) : resetRowData([...rows]));
   const [columnsData, setColumnsData] = React.useState(resetColumnsData(columns));
   const [checkAllState, setCheckAllState] = React.useState(false);
-  const shouldCheckHeaderBox = allData => {
-    let isARowUnselectedInAllGroups = null;
+  const [disableHeaderCheckbox, setDisableHeaderCheckbox] = React.useState(false);
+  const [hideHeaderCheckBoxByRows, setHideHeaderCheckBoxByRows] = React.useState(false);
+  useEffect(() => {
+    let _isAtLeastOneRowUnselected = null;
+    let _isAtLeastOneRowEnabled = null;
+    let _hideHeaderCheckBoxByRows = null;
     if (groupedRows) {
-      isARowUnselectedInAllGroups = Object.keys(allData).some(el => {
-        return isAtLeastOneRowUnselected(allData[el].data);
+      _isAtLeastOneRowUnselected = Object.keys(data).some(el => {
+        return isAtLeastOneRowUnselected(data[el].data);
+      });
+      _isAtLeastOneRowEnabled = Object.keys(data).some(el => {
+        return isAtLeastOneRowEnabled(data[el].data);
+      });
+      _hideHeaderCheckBoxByRows = Object.keys(data).some(el => {
+        return hasEveryRowHiddenItsCheckbox(data[el].data);
       });
     } else {
-      isARowUnselectedInAllGroups = isAtLeastOneRowUnselected(allData);
+      _isAtLeastOneRowUnselected = isAtLeastOneRowUnselected(data);
+      _isAtLeastOneRowEnabled = isAtLeastOneRowEnabled(data);
+      _hideHeaderCheckBoxByRows = hasEveryRowHiddenItsCheckbox(data);
     }
-    return !isARowUnselectedInAllGroups;
-  };
+    setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected);
+    setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled);
+    setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows);
+  }, [data, groupedRows]);
   const shouldDisplayIconColumn = (allData, _showCheckbox) => {
     let doesOneRowHaveExpandedContent = null;
     if (groupedRows) {
@@ -80,8 +94,11 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setData(_rows);
     setCheckAllState(!checkAllState);
   };
-  const toggleCheckbox = rowId => {
+  const toggleCheckbox = (rowId, row) => {
     let _data = null;
+    if (typeof row.checkBoxProps?.onChange === 'function') {
+      row.checkBoxProps.onChange();
+    }
     if (groupedRows) {
       const [group, _] = rowId.split('-');
       const id = parseInt(_, 10);
@@ -108,15 +125,18 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     setData(_row);
   };
-  const HeaderCheckBoxDisplay = showCheckbox && /*#__PURE__*/_jsx(Checkbox, {
+  const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/_jsx(Checkbox, {
     label: getCopy('all'),
-    checked: shouldCheckHeaderBox(data),
+    checked: checkAllState,
+    inactive: disableHeaderCheckbox,
     onChange: toggleSelectAll
   });
-  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => _showCheckbox && /*#__PURE__*/_jsx(Checkbox, {
-    checked: row.isSelected,
-    onChange: () => toggleCheckbox(rowId)
-  });
+  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
+    return _showCheckbox && !row.hideCheckbox && /*#__PURE__*/_jsx(Checkbox, {
+      ...row.checkBoxProps,
+      onChange: () => toggleCheckbox(rowId, row)
+    });
+  };
   const buildDisplayCaret = (row, rowId) => row.hasExpandedRow && /*#__PURE__*/_jsx(IconButton, {
     onPress: () => toggleRowExpansion(rowId),
     icon: row.isExpandedRowOpen === true ? hideExpandedRowIcon : expandRowIcon,
@@ -334,6 +354,16 @@ DataGrid.propTypes = {
     expandedRowChildComponent: PropTypes.shape({
       component: PropTypes.node,
       displayOnLoad: PropTypes.bool.isRequired
+    }),
+    /**
+     * Set this to true to hide checkbox for the specified row
+     */
+    hideCheckbox: PropTypes.bool,
+    checkBoxProps: PropTypes.shape({
+      checked: PropTypes.bool,
+      name: PropTypes.string,
+      value: PropTypes.string.isRequired,
+      onChange: PropTypes.func
     })
   })),
   /**

package/lib/esm/utility.js

@@ -19,18 +19,34 @@ export const DATA_TYPE = {
 const mappedData = array => {
   return array.map(element => {
     const eachRow = {
-      ...element,
-      isSelected: false
+      ...element
     };
     if (eachRow.expandedRowChildComponent) {
       eachRow.hasExpandedRow = true;
       eachRow.isExpandedRowOpen = element.expandedRowChildComponent.displayOnLoad;
     }
+    if (!eachRow.hideCheckbox) {
+      eachRow.hideCheckbox = false;
+    }
+    if (!eachRow.checkBoxProps) {
+      eachRow.checkBoxProps = {
+        value: `row_${eachRow.id}`,
+        inactive: false,
+        checked: false,
+        onChange: () => {}
+      };
+    }
     return eachRow;
   });
 };
 export const isAtLeastOneRowUnselected = array => {
-  return array.some(each => each.isSelected === false);
+  return array.some(each => each.checkBoxProps?.inactive === false && each.checkBoxProps?.checked === false);
+};
+export const isAtLeastOneRowEnabled = array => {
+  return array.some(each => each.checkBoxProps?.inactive === false);
+};
+export const hasEveryRowHiddenItsCheckbox = array => {
+  return array.every(each => each.hideCheckbox === true);
 };
 export const resetColumnsData = data => {
   return data.map(element => ({
@@ -55,17 +71,28 @@ export const resetRowData = function (data) {
 };
 export const toggleAllCheckBoxes = (array, headerCheckBoxState) => {
   return array.map(element => {
-    return {
-      ...element,
-      isSelected: !headerCheckBoxState
-    };
+    let _el = null;
+    if (element.hideCheckbox === true || element.checkBoxProps && element.checkBoxProps.inactive) {
+      _el = {
+        ...element
+      };
+    } else {
+      _el = {
+        ...element
+      };
+      _el.checkBoxProps.checked = !headerCheckBoxState;
+    }
+    return _el;
   });
 };
 export const toggleRowCheckbox = (array, rowId) => {
-  return array.map(el => ({
-    ...el,
-    isSelected: el.id === rowId ? !el.isSelected : el.isSelected
-  }));
+  return array.map(el => {
+    const _el = {
+      ...el
+    };
+    _el.checkBoxProps.checked = el.id === rowId ? !_el.checkBoxProps.checked : _el.checkBoxProps.checked;
+    return _el;
+  });
 };
 export const toggleExpandedRow = (array, rowId) => {
   return array.map(el => ({

package/package.json

@@ -5,8 +5,8 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.2.0",
-    "@telus-uds/components-base": "^3.2.0",
+    "@telus-uds/components-web": "^4.3.0",
+    "@telus-uds/components-base": "^3.4.0",
     "@telus-uds/system-theme-tokens": "^4.2.0",
     "styled-components": "6.1.13",
     "smooth-scrollbar": "8.8.4",
@@ -46,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.1.0"
+  "version": "1.2.1"
 }

package/src/DataGrid.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import {
   Typography,
@@ -16,6 +16,8 @@ import {
   DATA_TYPE,
   SORT_DIRECTION,
   isAtLeastOneRowUnselected,
+  isAtLeastOneRowEnabled,
+  hasEveryRowHiddenItsCheckbox,
   toggleAllCheckBoxes,
   toggleExpandedRow,
   toggleRowCheckbox,
@@ -61,18 +63,36 @@ const DataGrid = React.forwardRef(
     )
     const [columnsData, setColumnsData] = React.useState(resetColumnsData(columns))
     const [checkAllState, setCheckAllState] = React.useState(false)
+    const [disableHeaderCheckbox, setDisableHeaderCheckbox] = React.useState(false)
+    const [hideHeaderCheckBoxByRows, setHideHeaderCheckBoxByRows] = React.useState(false)
+
+    useEffect(() => {
+      let _isAtLeastOneRowUnselected = null
+      let _isAtLeastOneRowEnabled = null
+      let _hideHeaderCheckBoxByRows = null
 
-    const shouldCheckHeaderBox = (allData) => {
-      let isARowUnselectedInAllGroups = null
       if (groupedRows) {
-        isARowUnselectedInAllGroups = Object.keys(allData).some((el) => {
-          return isAtLeastOneRowUnselected(allData[el].data)
+        _isAtLeastOneRowUnselected = Object.keys(data).some((el) => {
+          return isAtLeastOneRowUnselected(data[el].data)
+        })
+
+        _isAtLeastOneRowEnabled = Object.keys(data).some((el) => {
+          return isAtLeastOneRowEnabled(data[el].data)
+        })
+
+        _hideHeaderCheckBoxByRows = Object.keys(data).some((el) => {
+          return hasEveryRowHiddenItsCheckbox(data[el].data)
         })
       } else {
-        isARowUnselectedInAllGroups = isAtLeastOneRowUnselected(allData)
+        _isAtLeastOneRowUnselected = isAtLeastOneRowUnselected(data)
+        _isAtLeastOneRowEnabled = isAtLeastOneRowEnabled(data)
+        _hideHeaderCheckBoxByRows = hasEveryRowHiddenItsCheckbox(data)
       }
-      return !isARowUnselectedInAllGroups
-    }
+
+      setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected)
+      setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled)
+      setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows)
+    }, [data, groupedRows])
 
     const shouldDisplayIconColumn = (allData, _showCheckbox) => {
       let doesOneRowHaveExpandedContent = null
@@ -102,8 +122,13 @@ const DataGrid = React.forwardRef(
       setCheckAllState(!checkAllState)
     }
 
-    const toggleCheckbox = (rowId) => {
+    const toggleCheckbox = (rowId, row) => {
       let _data = null
+
+      if (typeof row.checkBoxProps?.onChange === 'function') {
+        row.checkBoxProps.onChange()
+      }
+
       if (groupedRows) {
         const [group, _] = rowId.split('-')
         const id = parseInt(_, 10)
@@ -128,16 +153,23 @@ const DataGrid = React.forwardRef(
       setData(_row)
     }
 
-    const HeaderCheckBoxDisplay = showCheckbox && (
+    const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && (
       <Checkbox
         label={getCopy('all')}
-        checked={shouldCheckHeaderBox(data)}
+        checked={checkAllState}
+        inactive={disableHeaderCheckbox}
         onChange={toggleSelectAll}
       />
     )
 
-    const buildCheckBoxDisplay = (_showCheckbox, row, rowId) =>
-      _showCheckbox && <Checkbox checked={row.isSelected} onChange={() => toggleCheckbox(rowId)} />
+    const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
+      return (
+        _showCheckbox &&
+        !row.hideCheckbox && (
+          <Checkbox {...row.checkBoxProps} onChange={() => toggleCheckbox(rowId, row)} />
+        )
+      )
+    }
 
     const buildDisplayCaret = (row, rowId) =>
       row.hasExpandedRow && (
@@ -439,6 +471,16 @@ DataGrid.propTypes = {
       expandedRowChildComponent: PropTypes.shape({
         component: PropTypes.node,
         displayOnLoad: PropTypes.bool.isRequired
+      }),
+      /**
+       * Set this to true to hide checkbox for the specified row
+       */
+      hideCheckbox: PropTypes.bool,
+      checkBoxProps: PropTypes.shape({
+        checked: PropTypes.bool,
+        name: PropTypes.string,
+        value: PropTypes.string.isRequired,
+        onChange: PropTypes.func
       })
     })
   ),

package/src/utility.jsx

@@ -22,17 +22,40 @@ export const DATA_TYPE = {
 
 const mappedData = (array) => {
   return array.map((element) => {
-    const eachRow = { ...element, isSelected: false }
+    const eachRow = { ...element }
     if (eachRow.expandedRowChildComponent) {
       eachRow.hasExpandedRow = true
       eachRow.isExpandedRowOpen = element.expandedRowChildComponent.displayOnLoad
     }
+
+    if (!eachRow.hideCheckbox) {
+      eachRow.hideCheckbox = false
+    }
+
+    if (!eachRow.checkBoxProps) {
+      eachRow.checkBoxProps = {
+        value: `row_${eachRow.id}`,
+        inactive: false,
+        checked: false,
+        onChange: () => {}
+      }
+    }
     return eachRow
   })
 }
 
 export const isAtLeastOneRowUnselected = (array) => {
-  return array.some((each) => each.isSelected === false)
+  return array.some(
+    (each) => each.checkBoxProps?.inactive === false && each.checkBoxProps?.checked === false
+  )
+}
+
+export const isAtLeastOneRowEnabled = (array) => {
+  return array.some((each) => each.checkBoxProps?.inactive === false)
+}
+
+export const hasEveryRowHiddenItsCheckbox = (array) => {
+  return array.every((each) => each.hideCheckbox === true)
 }
 
 export const resetColumnsData = (data) => {
@@ -49,6 +72,7 @@ export const resetRowData = (data, isGrouped = false) => {
     data.forEach((el) => {
       result[el.key] = { ...el, data: mappedData(el.data) }
     })
+
     return result
   }
 
@@ -57,15 +81,27 @@ export const resetRowData = (data, isGrouped = false) => {
 
 export const toggleAllCheckBoxes = (array, headerCheckBoxState) => {
   return array.map((element) => {
-    return { ...element, isSelected: !headerCheckBoxState }
+    let _el = null
+    if (
+      element.hideCheckbox === true ||
+      (element.checkBoxProps && element.checkBoxProps.inactive)
+    ) {
+      _el = { ...element }
+    } else {
+      _el = { ...element }
+      _el.checkBoxProps.checked = !headerCheckBoxState
+    }
+    return _el
   })
 }
 
 export const toggleRowCheckbox = (array, rowId) => {
-  return array.map((el) => ({
-    ...el,
-    isSelected: el.id === rowId ? !el.isSelected : el.isSelected
-  }))
+  return array.map((el) => {
+    const _el = { ...el }
+    _el.checkBoxProps.checked =
+      el.id === rowId ? !_el.checkBoxProps.checked : _el.checkBoxProps.checked
+    return _el
+  })
 }
 
 export const toggleExpandedRow = (array, rowId) => {