@telus-uds/components-community.data-grid 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
+This log was last generated on Wed, 05 Mar 2025 00:01:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.2.0
+
+Wed, 05 Mar 2025 00:01:06 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 19:03:35 GMT
+
+### Minor changes
+
+- `DataGrid`: enhancement to make the grid header optional (mike.taylor@telus.com)
+- Bump @telus-uds/components-web to v4.2.0
+- Bump @telus-uds/components-base to v3.2.0
+- Bump @telus-uds/system-theme-tokens to v4.2.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.0.1
 
-Mon, 10 Feb 2025 17:30:58 GMT
+Mon, 10 Feb 2025 17:36:47 GMT
 
 ### Patches
 

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"
@@ -32,7 +34,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     variant,
     copy = 'en',
-    testID = 'data-grid'
+    testID = 'data-grid',
+    isHeaderVisible
   } = _ref;
   const themeTokens = (0, _componentsBase.useThemeTokens)('DataGrid', tokens, variant);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -48,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) {
@@ -86,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);
@@ -114,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,
@@ -153,12 +176,14 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledIconContainer, {
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           block: true,
           variant: {
@@ -212,6 +237,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           type: _utility.CELL_TYPE.SUBHEADING,
           tokens: themeTokens,
           columnsLength: columnsData.length,
+          isHeaderVisible: isHeaderVisible,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -240,11 +266,13 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
+      isHeaderVisible: isHeaderVisible,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridCell.default, {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
+      isHeaderVisible: isHeaderVisible,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         block: true,
         variant: {
@@ -335,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
     })
   })),
   /**
@@ -364,6 +402,10 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: _propTypes.default.string
+  testID: _propTypes.default.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: _propTypes.default.bool
 };
 var _default = exports.default = DataGrid;

package/lib/cjs/DataGridCell.js

@@ -22,31 +22,37 @@ const StyledHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfi
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
 })(["display:flex;align-items:center;"]);
+const StyledHeaderCellHiddenHeader = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
+  componentId: "[object Object]__sc-6nkvhz-2"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["background-color:", ";border-bottom:solid ", "px ", ";padding:0px;width:", ";height:1px;"], props.headerRowBackgroundColor, props.headerBorderBottomWidth, props.cellBorderBottomColor, props.firstColWidth);
+});
 const StyledGroupHeaderCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCell",
-  componentId: "[object Object]__sc-6nkvhz-2"
+  componentId: "[object Object]__sc-6nkvhz-3"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["background-color:", ";padding:", "px;border-top:solid ", "px ", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.cellBorderBottomWidth, props.cellBorderBottomColor, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-3"
+  componentId: "[object Object]__sc-6nkvhz-4"
 })(["display:flex;align-items:center;justify-content:start;"]);
 const StyledExpandedCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
-  componentId: "[object Object]__sc-6nkvhz-4"
+  componentId: "[object Object]__sc-6nkvhz-5"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["padding:", "px;border-bottom:", " text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledExpandedCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledExpandedCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-5"
+  componentId: "[object Object]__sc-6nkvhz-6"
 })(["", ""], props => {
   return (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:", ";padding-left:", ";"], props.expandedContentAlignment ? props.expandedContentAlignment : 'start', props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`);
 });
 const StyledCell = exports.StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledCell",
-  componentId: "[object Object]__sc-6nkvhz-6"
+  componentId: "[object Object]__sc-6nkvhz-7"
 })(["", ""], props => {
   if (props.isExpandedRowOpen) {
     return (0, _styledComponents.css)(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:solid ", "px ", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.headerBorderTopWidth, props.headerBorderTopColor);
@@ -61,16 +67,21 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     columnsLength,
     showCheckbox = false,
     isFirstCol = false,
-    isExpandedRowOpen = false
+    isExpandedRowOpen = false,
+    isHeaderVisible = true
   } = _ref;
   if (type === _utility.CELL_TYPE.HEADING) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+    return isHeaderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
       ...tokens,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellDiv, {
         children: children
       })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellHiddenHeader, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref
     });
   }
   if (type === _utility.CELL_TYPE.SUBHEADING) {
@@ -133,6 +144,10 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: _propTypes.default.bool
+  isExpandedRowOpen: _propTypes.default.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: _propTypes.default.bool
 };
 var _default = exports.default = DataGridCell;

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';
@@ -25,7 +25,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     variant,
     copy = 'en',
-    testID = 'data-grid'
+    testID = 'data-grid',
+    isHeaderVisible
   } = _ref;
   const themeTokens = useThemeTokens('DataGrid', tokens, variant);
   const getCopy = useCopy({
@@ -41,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) {
@@ -79,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);
@@ -107,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,
@@ -146,12 +167,14 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/_jsxs(StyledIconContainer, {
           children: [CheckBoxDisplay, DisplayCaret]
         })
       }), columnsData.map(column => /*#__PURE__*/_jsx(DataGridCell, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        isHeaderVisible: isHeaderVisible,
         children: /*#__PURE__*/_jsx(Typography, {
           block: true,
           variant: {
@@ -205,6 +228,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           type: CELL_TYPE.SUBHEADING,
           tokens: themeTokens,
           columnsLength: columnsData.length,
+          isHeaderVisible: isHeaderVisible,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -233,11 +257,13 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
+      isHeaderVisible: isHeaderVisible,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/_jsxs(DataGridCell, {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
+      isHeaderVisible: isHeaderVisible,
       children: [/*#__PURE__*/_jsx(Typography, {
         block: true,
         variant: {
@@ -328,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
     })
   })),
   /**
@@ -357,6 +393,10 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: PropTypes.string
+  testID: PropTypes.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 };
 export default DataGrid;

package/lib/esm/DataGridCell.js

@@ -13,31 +13,37 @@ const StyledHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
 })(["display:flex;align-items:center;"]);
+const StyledHeaderCellHiddenHeader = /*#__PURE__*/styled.th.withConfig({
+  displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
+  componentId: "[object Object]__sc-6nkvhz-2"
+})(["", ""], props => {
+  return css(["background-color:", ";border-bottom:solid ", "px ", ";padding:0px;width:", ";height:1px;"], props.headerRowBackgroundColor, props.headerBorderBottomWidth, props.cellBorderBottomColor, props.firstColWidth);
+});
 const StyledGroupHeaderCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCell",
-  componentId: "[object Object]__sc-6nkvhz-2"
+  componentId: "[object Object]__sc-6nkvhz-3"
 })(["", ""], props => {
   return css(["background-color:", ";padding:", "px;border-top:solid ", "px ", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.cellBorderBottomWidth, props.cellBorderBottomColor, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-3"
+  componentId: "[object Object]__sc-6nkvhz-4"
 })(["display:flex;align-items:center;justify-content:start;"]);
 const StyledExpandedCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
-  componentId: "[object Object]__sc-6nkvhz-4"
+  componentId: "[object Object]__sc-6nkvhz-5"
 })(["", ""], props => {
   return css(["padding:", "px;border-bottom:", " text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledExpandedCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledExpandedCellDiv",
-  componentId: "[object Object]__sc-6nkvhz-5"
+  componentId: "[object Object]__sc-6nkvhz-6"
 })(["", ""], props => {
   return css(["display:flex;align-items:center;justify-content:", ";padding-left:", ";"], props.expandedContentAlignment ? props.expandedContentAlignment : 'start', props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`);
 });
 export const StyledCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledCell",
-  componentId: "[object Object]__sc-6nkvhz-6"
+  componentId: "[object Object]__sc-6nkvhz-7"
 })(["", ""], props => {
   if (props.isExpandedRowOpen) {
     return css(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:solid ", "px ", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.headerBorderTopWidth, props.headerBorderTopColor);
@@ -52,16 +58,21 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     columnsLength,
     showCheckbox = false,
     isFirstCol = false,
-    isExpandedRowOpen = false
+    isExpandedRowOpen = false,
+    isHeaderVisible = true
   } = _ref;
   if (type === CELL_TYPE.HEADING) {
-    return /*#__PURE__*/_jsx(StyledHeaderCell, {
+    return isHeaderVisible ? /*#__PURE__*/_jsx(StyledHeaderCell, {
       ...tokens,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/_jsx(StyledHeaderCellDiv, {
         children: children
       })
+    }) : /*#__PURE__*/_jsx(StyledHeaderCellHiddenHeader, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref
     });
   }
   if (type === CELL_TYPE.SUBHEADING) {
@@ -124,6 +135,10 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: PropTypes.bool
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 };
 export default DataGridCell;

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,9 +5,9 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.1.0",
-    "@telus-uds/components-base": "^3.1.0",
-    "@telus-uds/system-theme-tokens": "^4.1.0",
+    "@telus-uds/components-web": "^4.2.1",
+    "@telus-uds/components-base": "^3.3.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "styled-components": "6.1.13",
     "smooth-scrollbar": "8.8.4",
     "smooth-scrollbar-react": "2.4.1"
@@ -46,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.0.1"
+  "version": "1.2.0"
 }

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,
@@ -48,7 +50,8 @@ const DataGrid = React.forwardRef(
       tokens,
       variant,
       copy = 'en',
-      testID = 'data-grid'
+      testID = 'data-grid',
+      isHeaderVisible
     },
     ref
   ) => {
@@ -60,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
@@ -101,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)
@@ -127,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 && (
@@ -188,7 +221,11 @@ const DataGrid = React.forwardRef(
           onClick={toggleRowExpansion}
         >
           {shouldDisplayIconColumn(data, _showCheckbox) && (
-            <DataGridCell tokens={themeTokens} isExpandedRowOpen={row.isExpandedRowOpen}>
+            <DataGridCell
+              tokens={themeTokens}
+              isExpandedRowOpen={row.isExpandedRowOpen}
+              isHeaderVisible={isHeaderVisible}
+            >
               <StyledIconContainer>
                 {CheckBoxDisplay}
                 {DisplayCaret}
@@ -199,6 +236,7 @@ const DataGrid = React.forwardRef(
             <DataGridCell
               tokens={themeTokens}
               isExpandedRowOpen={row.isExpandedRowOpen}
+              isHeaderVisible={isHeaderVisible}
               key={`${rowId}-${column.key}`}
             >
               <Typography
@@ -257,6 +295,7 @@ const DataGrid = React.forwardRef(
               type={CELL_TYPE.SUBHEADING}
               tokens={themeTokens}
               columnsLength={columnsData.length}
+              isHeaderVisible={isHeaderVisible}
             >
               {data[group].groupHeaderComponent || DefaultSubHeading}
             </DataGridCell>
@@ -305,7 +344,12 @@ const DataGrid = React.forwardRef(
     HeaderContent = (
       <>
         {shouldDisplayIconColumn(data, showCheckbox) && (
-          <DataGridCell type={CELL_TYPE.HEADING} tokens={themeTokens} isFirstCol={true}>
+          <DataGridCell
+            type={CELL_TYPE.HEADING}
+            tokens={themeTokens}
+            isFirstCol={true}
+            isHeaderVisible={isHeaderVisible}
+          >
             {HeaderCheckBoxDisplay}
           </DataGridCell>
         )}
@@ -316,6 +360,7 @@ const DataGrid = React.forwardRef(
             key={column.key}
             tokens={themeTokens}
             isSortable={isSortable}
+            isHeaderVisible={isHeaderVisible}
           >
             <Typography
               block
@@ -426,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
       })
     })
   ),
@@ -457,7 +512,11 @@ DataGrid.propTypes = {
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.
    */
-  testID: PropTypes.string
+  testID: PropTypes.string,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 }
 
 export default DataGrid

package/src/DataGridCell.jsx

@@ -25,6 +25,17 @@ const StyledHeaderCellDiv = styled.div`
   display: flex;
   align-items: center;
 `
+const StyledHeaderCellHiddenHeader = styled.th`
+  ${(props) => {
+    return css`
+      background-color: ${props.headerRowBackgroundColor};
+      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.cellBorderBottomColor};
+      padding: 0px;
+      width: ${props.firstColWidth};
+      height: 1px;
+    `
+  }}
+`
 
 const StyledGroupHeaderCell = styled.td`
   ${(props) => {
@@ -118,12 +129,13 @@ const DataGridCell = React.forwardRef(
       columnsLength,
       showCheckbox = false,
       isFirstCol = false,
-      isExpandedRowOpen = false
+      isExpandedRowOpen = false,
+      isHeaderVisible = true
     },
     ref
   ) => {
     if (type === CELL_TYPE.HEADING) {
-      return (
+      return isHeaderVisible ? (
         <StyledHeaderCell
           {...tokens}
           firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
@@ -131,6 +143,12 @@ const DataGridCell = React.forwardRef(
         >
           <StyledHeaderCellDiv>{children}</StyledHeaderCellDiv>
         </StyledHeaderCell>
+      ) : (
+        <StyledHeaderCellHiddenHeader
+          {...tokens}
+          firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
+          ref={ref}
+        />
       )
     }
     if (type === CELL_TYPE.SUBHEADING) {
@@ -192,7 +210,11 @@ DataGridCell.propTypes = {
   /**
    * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
    */
-  isExpandedRowOpen: PropTypes.bool
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * Passed to the component to determine if header is displayed. Set to false to hide header of datagrid. Set to true by default
+   */
+  isHeaderVisible: PropTypes.bool
 }
 
 export default DataGridCell

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) => {