@telus-uds/components-community.data-grid 1.2.2 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Mon, 24 Mar 2025 16:24:15 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Apr 2025 19:33:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Tue, 08 Apr 2025 19:33:56 GMT
+
+### Minor changes
+
+- `DataGrid`: Enhancement to allow more diverse content (sam.obisesan@telus.com)
+- Bump @telus-uds/components-web to v4.4.2
+- Bump @telus-uds/components-base to v3.5.2
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+### Patches
+
+- `Datagrid`: expanded row double border fix (vishal.jindal@telus.com)
+
+## 1.2.3
+
+Fri, 28 Mar 2025 01:02:45 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v4.4.1
+- Bump @telus-uds/components-base to v3.5.1
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.2.2
 
-Mon, 24 Mar 2025 16:24:15 GMT
+Mon, 24 Mar 2025 16:30:05 GMT
 
 ### Patches
 

package/lib/cjs/DataGrid.js

@@ -54,29 +54,29 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   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;
+    let isAtLeastOneRowUnselectedCheck = null;
+    let isAtLeastOneRowEnabledCheck = null;
+    let hideHeaderCheckBoxByRowsCheck = null;
     if (groupedRows) {
-      _isAtLeastOneRowUnselected = Object.keys(data).some(el => {
+      isAtLeastOneRowUnselectedCheck = Object.keys(data).some(el => {
         return (0, _utility.isAtLeastOneRowUnselected)(data[el].data);
       });
-      _isAtLeastOneRowEnabled = Object.keys(data).some(el => {
+      isAtLeastOneRowEnabledCheck = Object.keys(data).some(el => {
         return (0, _utility.isAtLeastOneRowEnabled)(data[el].data);
       });
-      _hideHeaderCheckBoxByRows = Object.keys(data).some(el => {
+      hideHeaderCheckBoxByRowsCheck = Object.keys(data).some(el => {
         return (0, _utility.hasEveryRowHiddenItsCheckbox)(data[el].data);
       });
     } else {
-      _isAtLeastOneRowUnselected = (0, _utility.isAtLeastOneRowUnselected)(data);
-      _isAtLeastOneRowEnabled = (0, _utility.isAtLeastOneRowEnabled)(data);
-      _hideHeaderCheckBoxByRows = (0, _utility.hasEveryRowHiddenItsCheckbox)(data);
+      isAtLeastOneRowUnselectedCheck = (0, _utility.isAtLeastOneRowUnselected)(data);
+      isAtLeastOneRowEnabledCheck = (0, _utility.isAtLeastOneRowEnabled)(data);
+      hideHeaderCheckBoxByRowsCheck = (0, _utility.hasEveryRowHiddenItsCheckbox)(data);
     }
-    setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected);
-    setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled);
-    setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows);
+    setCheckAllState(isAtLeastOneRowEnabledCheck === false ? false : !isAtLeastOneRowUnselectedCheck);
+    setDisableHeaderCheckbox(!isAtLeastOneRowEnabledCheck);
+    setHideHeaderCheckBoxByRows(hideHeaderCheckBoxByRowsCheck);
   }, [data, groupedRows]);
-  const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+  const shouldDisplayIconColumn = (allData, shouldShowCheckbox) => {
     let doesOneRowHaveExpandedContent = null;
     if (groupedRows) {
       doesOneRowHaveExpandedContent = Object.keys(allData).some(el => {
@@ -85,54 +85,53 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     } else {
       doesOneRowHaveExpandedContent = allData.some(el => el.hasExpandedRow === true);
     }
-    return !!(_showCheckbox || doesOneRowHaveExpandedContent);
+    return !!(shouldShowCheckbox || doesOneRowHaveExpandedContent);
   };
   const toggleSelectAll = () => {
-    let _rows = null;
+    let tempRows = {};
     if (groupedRows) {
-      _rows = {};
       Object.keys(data).forEach(el => {
-        _rows[el] = {
+        tempRows[el] = {
           ...data[el]
         };
-        _rows[el].data = (0, _utility.toggleAllCheckBoxes)(data[el].data, checkAllState);
+        tempRows[el].data = (0, _utility.toggleAllCheckBoxes)(data[el].data, checkAllState);
       });
     } else {
-      _rows = (0, _utility.toggleAllCheckBoxes)(data, checkAllState);
+      tempRows = (0, _utility.toggleAllCheckBoxes)(data, checkAllState);
     }
-    setData(_rows);
+    setData(tempRows);
     setCheckAllState(!checkAllState);
   };
   const toggleCheckbox = (rowId, row) => {
-    let _data = null;
+    let tempData = null;
     if (typeof row.checkBoxProps?.onChange === 'function') {
       row.checkBoxProps.onChange();
     }
     if (groupedRows) {
-      const [group, _] = rowId.split('-');
-      const id = parseInt(_, 10);
-      _data = {
+      const [group, splitID] = rowId.split('-');
+      const id = parseInt(splitID, 10);
+      tempData = {
         ...data
       };
-      _data[group].data = (0, _utility.toggleRowCheckbox)(_data[group].data, id);
+      tempData[group].data = (0, _utility.toggleRowCheckbox)(tempData[group].data, id);
     } else {
-      _data = (0, _utility.toggleRowCheckbox)(data, rowId);
+      tempData = (0, _utility.toggleRowCheckbox)(data, rowId);
     }
-    setData(_data);
+    setData(tempData);
   };
   const toggleRowExpansion = rowId => {
-    let _row = null;
+    let tempRow = null;
     if (groupedRows) {
-      const [group, _] = rowId.split('-');
-      const id = parseInt(_, 10);
-      _row = {
+      const [group, splitId] = rowId.split('-');
+      const id = parseInt(splitId, 10);
+      tempRow = {
         ...data
       };
-      _row[group].data = (0, _utility.toggleExpandedRow)(_row[group].data, id);
+      tempRow[group].data = (0, _utility.toggleExpandedRow)(tempRow[group].data, id);
     } else {
-      _row = (0, _utility.toggleExpandedRow)(data, rowId);
+      tempRow = (0, _utility.toggleExpandedRow)(data, rowId);
     }
-    setData(_row);
+    setData(tempRow);
   };
   const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
     label: getCopy('all'),
@@ -140,8 +139,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive: disableHeaderCheckbox,
     onChange: toggleSelectAll
   });
-  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
-    return _showCheckbox && !row.hideCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
+  const buildCheckBoxDisplay = (shouldShowCheckbox, row, rowId) => {
+    return shouldShowCheckbox && !row.hideCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
       ...row.checkBoxProps,
       onChange: () => toggleCheckbox(rowId, row)
     });
@@ -166,25 +165,24 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: row.expandedRowChildComponent.component
     })
   });
-  const buildRowContent = (row, rowId, _showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridRow.default, {
       tokens: themeTokens,
       rowId: rowId,
       isExpandedRowOpen: row.isExpandedRowOpen,
       hasExpandedContent: row.hasExpandedRow,
       onClick: toggleRowExpansion,
-      children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+      children: [shouldDisplayIconColumn(data, shouldShowCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        hidePreviousRowBorder: row.hidePreviousRowBorder,
         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, {
+      }), columnsData.map(column => {
+        const currentColumn = columns.find(el => el.key === column.key);
+        const columnContent = typeof currentColumn?.displayedComponent === 'function' ? currentColumn.displayedComponent(row[column.key]) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           block: true,
           variant: {
             size: 'small'
@@ -193,31 +191,38 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             color: themeTokens.cellTextColor
           },
           children: row[column.key]
-        })
-      }, `${rowId}-${column.key}`))]
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+          tokens: themeTokens,
+          isExpandedRowOpen: row.isExpandedRowOpen,
+          hidePreviousRowBorder: row.hidePreviousRowBorder,
+          isHeaderVisible: isHeaderVisible,
+          children: columnContent
+        }, `${rowId}-${column.key}`);
+      })]
     }, rowId), ExpandedRow]
   }, rowId);
   const sortColumn = column => {
-    const _col = {
+    const currentColumn = {
       ...column
     };
     if (!groupedRows) {
-      const _data = [...data].sort((a, b) => {
-        const first = _col.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(a[_col.key]) : a[_col.key].toUpperCase();
-        const next = _col.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(b[_col.key]) : b[_col.key].toUpperCase();
-        if (_col.sortDirection === _utility.SORT_DIRECTION.DESC) {
+      const currentData = [...data].sort((a, b) => {
+        const first = currentColumn.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(a[currentColumn.key]) : a[currentColumn.key].toUpperCase();
+        const next = currentColumn.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(b[currentColumn.key]) : b[currentColumn.key].toUpperCase();
+        if (currentColumn.sortDirection === _utility.SORT_DIRECTION.DESC) {
           if (first < next) return -1;
           return next === first ? 0 : 1;
         }
         if (next < first) return -1;
         return first === next ? 0 : 1;
       });
-      _col.sortDirection = _col.sortDirection === _utility.SORT_DIRECTION.DESC ? _utility.SORT_DIRECTION.ASC : _utility.SORT_DIRECTION.DESC;
-      _col.currentSort = true;
-      const _columns = (0, _utility.resetColumnsData)(columnsData);
-      _columns[columnsData.findIndex(_el => _el.key === column.key)] = _col;
-      setColumnsData(_columns);
-      setData(_data);
+      currentColumn.sortDirection = currentColumn.sortDirection === _utility.SORT_DIRECTION.DESC ? _utility.SORT_DIRECTION.ASC : _utility.SORT_DIRECTION.DESC;
+      currentColumn.currentSort = true;
+      const tempColumns = (0, _utility.resetColumnsData)(columnsData);
+      tempColumns[columnsData.findIndex(el => el.key === column.key)] = currentColumn;
+      setColumnsData(tempColumns);
+      setData(currentData);
     }
   };
   let HeaderContent = null;
@@ -241,7 +246,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
-      const DataRow = data[group].data.map(row => {
+      const modifiedData = (0, _utility.hideRowBottomBorder)([...data[group].data]);
+      const DataRow = modifiedData.map(row => {
         const rowId = `${group}-${row.id}`;
         const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
         const DisplayCaret = buildDisplayCaret(row, rowId);
@@ -253,7 +259,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }, group);
     });
   } else {
-    BodyContent = data.map(row => {
+    const modifiedData = (0, _utility.hideRowBottomBorder)([...data]);
+    BodyContent = modifiedData.map(row => {
       const rowId = row.id;
       const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
       const DisplayCaret = buildDisplayCaret(row, rowId);
@@ -261,18 +268,22 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
     });
   }
+  const isFirstRowExpanded = data[0]?.isExpandedRowOpen;
   HeaderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [shouldDisplayIconColumn(data, showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
       isHeaderVisible: isHeaderVisible,
+      hidePreviousRowBorder: isFirstRowExpanded,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridCell.default, {
       type: _utility.CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
       isHeaderVisible: isHeaderVisible,
+      hidePreviousRowBorder: isFirstRowExpanded,
+      textAlign: column.textAlign || 'start',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         block: true,
         variant: {
@@ -329,7 +340,9 @@ DataGrid.propTypes = {
     dataType: _propTypes.default.oneOf(['string', 'number']),
     isSortable: _propTypes.default.bool,
     // Set this to true to enable sorting for this column
-    fn: _propTypes.default.func
+    fn: _propTypes.default.func,
+    textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+    displayedComponent: _propTypes.default.func
   })).isRequired,
   /**
    * Use `groupedRows` to pass the grouped data for display

package/lib/cjs/DataGridCell.js

@@ -16,12 +16,17 @@ const StyledHeaderCell = /*#__PURE__*/_styledComponents.default.th.withConfig({
   displayName: "DataGridCell__StyledHeaderCell",
   componentId: "[object Object]__sc-6nkvhz-0"
 })(["", ""], props => {
-  return (0, _styledComponents.css)(["background-color:", ";border-top:solid ", "px ", ";border-bottom:solid ", "px ", ";padding:", "px;text-align:", ";box-sizing:border-box;font-size:", "px;font-weight:bold;line-height:", "px;color:", ";width:", ";font-family:", ";"], props.headerRowBackgroundColor, props.headerBorderTopWidth, props.headerBorderTopColor, props.headerBorderBottomWidth, props.headerBorderBottomColor, props.headerPadding, props.headerTextAlign, props.headerFontSize, props.headerLineHeight * props.headerFontSize, props.headerTextColor, props.firstColWidth, props.headerFontFamily);
+  return (0, _styledComponents.css)(["background-color:", ";border-top:solid ", "px ", ";border-bottom:", ";padding:", "px;padding-left:", "px;padding-right:", "px;text-align:", ";box-sizing:border-box;font-size:", "px;font-weight:bold;line-height:", "px;color:", ";width:", ";font-family:", ";"], props.headerRowBackgroundColor, props.headerBorderTopWidth, props.headerBorderTopColor, props.hidePreviousRowBorder ? `none` : `solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor}`, props.headerPadding, props.headerCellHorizontalPadding, props.headerCellHorizontalPadding, props.headerTextAlign, props.headerFontSize, props.headerLineHeight * props.headerFontSize, props.headerTextColor, props.firstColWidth, props.headerFontFamily);
 });
 const StyledHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;justify-content:", ";"], _ref => {
+  let {
+    textAlign
+  } = _ref;
+  return textAlign;
+});
 const StyledHeaderCellHiddenHeader = /*#__PURE__*/_styledComponents.default.th.withConfig({
   displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
   componentId: "[object Object]__sc-6nkvhz-2"
@@ -37,7 +42,7 @@ const StyledGroupHeaderCell = /*#__PURE__*/_styledComponents.default.td.withConf
 const StyledGroupHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-4"
-})(["display:flex;align-items:center;justify-content:start;"]);
+})(["display:flex;align-items:center;"]);
 const StyledExpandedCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
   componentId: "[object Object]__sc-6nkvhz-5"
@@ -57,9 +62,9 @@ const StyledCell = exports.StyledCell = /*#__PURE__*/_styledComponents.default.t
   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);
   }
-  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.hideRowBottomBorder === 1 ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
+  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.hideRowBottomBorder === 1 || props.hidePreviousRowBorder ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
-const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -68,14 +73,18 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     showCheckbox = false,
     isFirstCol = false,
     isExpandedRowOpen = false,
-    isHeaderVisible = true
-  } = _ref;
+    isHeaderVisible = true,
+    hidePreviousRowBorder = false,
+    textAlign = 'start'
+  } = _ref2;
   if (type === _utility.CELL_TYPE.HEADING) {
     return isHeaderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
       ...tokens,
+      hidePreviousRowBorder: hidePreviousRowBorder,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellDiv, {
+        textAlign: textAlign,
         children: children
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellHiddenHeader, {
@@ -111,6 +120,7 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCell, {
     ...tokens,
     isExpandedRowOpen: isExpandedRowOpen,
+    hidePreviousRowBorder: hidePreviousRowBorder,
     ref: ref,
     children: children
   });
@@ -148,6 +158,14 @@ DataGridCell.propTypes = {
   /**
    * 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
+  isHeaderVisible: _propTypes.default.bool,
+  /**
+   * Passed to the component to hide the bottom-border of previous row if current row is expanded (to avoid double border). Set to false by default
+   */
+  hidePreviousRowBorder: _propTypes.default.bool,
+  /**
+   * Passed to the component to determine the header text alignment
+   */
+  textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
 };
 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.isAtLeastOneRowEnabled = exports.hasEveryRowHiddenItsCheckbox = 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.hideRowBottomBorder = 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',
@@ -113,4 +113,18 @@ const toggleExpandedRow = (array, rowId) => {
     isExpandedRowOpen: el.id === rowId ? !el.isExpandedRowOpen : el.isExpandedRowOpen
   }));
 };
-exports.toggleExpandedRow = toggleExpandedRow;
+exports.toggleExpandedRow = toggleExpandedRow;
+const hideRowBottomBorder = function () {
+  let array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return array.map((row, index) => {
+    const eachRow = {
+      ...row
+    };
+    // setting prop to disable previous row bottom border if current row is expanded
+    if (index < array.length - 1 && array[index + 1]?.isExpandedRowOpen) {
+      eachRow.hidePreviousRowBorder = true;
+    }
+    return eachRow;
+  });
+};
+exports.hideRowBottomBorder = hideRowBottomBorder;

package/lib/esm/DataGrid.js

@@ -3,7 +3,7 @@ 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, isAtLeastOneRowEnabled, hasEveryRowHiddenItsCheckbox, 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, hideRowBottomBorder } from './utility';
 import DataGridTable from './DataGridTable';
 import DataGridHead from './DataGridHead';
 import DataGridBody from './DataGridBody';
@@ -45,29 +45,29 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const [disableHeaderCheckbox, setDisableHeaderCheckbox] = React.useState(false);
   const [hideHeaderCheckBoxByRows, setHideHeaderCheckBoxByRows] = React.useState(false);
   useEffect(() => {
-    let _isAtLeastOneRowUnselected = null;
-    let _isAtLeastOneRowEnabled = null;
-    let _hideHeaderCheckBoxByRows = null;
+    let isAtLeastOneRowUnselectedCheck = null;
+    let isAtLeastOneRowEnabledCheck = null;
+    let hideHeaderCheckBoxByRowsCheck = null;
     if (groupedRows) {
-      _isAtLeastOneRowUnselected = Object.keys(data).some(el => {
+      isAtLeastOneRowUnselectedCheck = Object.keys(data).some(el => {
         return isAtLeastOneRowUnselected(data[el].data);
       });
-      _isAtLeastOneRowEnabled = Object.keys(data).some(el => {
+      isAtLeastOneRowEnabledCheck = Object.keys(data).some(el => {
         return isAtLeastOneRowEnabled(data[el].data);
       });
-      _hideHeaderCheckBoxByRows = Object.keys(data).some(el => {
+      hideHeaderCheckBoxByRowsCheck = Object.keys(data).some(el => {
         return hasEveryRowHiddenItsCheckbox(data[el].data);
       });
     } else {
-      _isAtLeastOneRowUnselected = isAtLeastOneRowUnselected(data);
-      _isAtLeastOneRowEnabled = isAtLeastOneRowEnabled(data);
-      _hideHeaderCheckBoxByRows = hasEveryRowHiddenItsCheckbox(data);
+      isAtLeastOneRowUnselectedCheck = isAtLeastOneRowUnselected(data);
+      isAtLeastOneRowEnabledCheck = isAtLeastOneRowEnabled(data);
+      hideHeaderCheckBoxByRowsCheck = hasEveryRowHiddenItsCheckbox(data);
     }
-    setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected);
-    setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled);
-    setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows);
+    setCheckAllState(isAtLeastOneRowEnabledCheck === false ? false : !isAtLeastOneRowUnselectedCheck);
+    setDisableHeaderCheckbox(!isAtLeastOneRowEnabledCheck);
+    setHideHeaderCheckBoxByRows(hideHeaderCheckBoxByRowsCheck);
   }, [data, groupedRows]);
-  const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+  const shouldDisplayIconColumn = (allData, shouldShowCheckbox) => {
     let doesOneRowHaveExpandedContent = null;
     if (groupedRows) {
       doesOneRowHaveExpandedContent = Object.keys(allData).some(el => {
@@ -76,54 +76,53 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } else {
       doesOneRowHaveExpandedContent = allData.some(el => el.hasExpandedRow === true);
     }
-    return !!(_showCheckbox || doesOneRowHaveExpandedContent);
+    return !!(shouldShowCheckbox || doesOneRowHaveExpandedContent);
   };
   const toggleSelectAll = () => {
-    let _rows = null;
+    let tempRows = {};
     if (groupedRows) {
-      _rows = {};
       Object.keys(data).forEach(el => {
-        _rows[el] = {
+        tempRows[el] = {
           ...data[el]
         };
-        _rows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState);
+        tempRows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState);
       });
     } else {
-      _rows = toggleAllCheckBoxes(data, checkAllState);
+      tempRows = toggleAllCheckBoxes(data, checkAllState);
     }
-    setData(_rows);
+    setData(tempRows);
     setCheckAllState(!checkAllState);
   };
   const toggleCheckbox = (rowId, row) => {
-    let _data = null;
+    let tempData = null;
     if (typeof row.checkBoxProps?.onChange === 'function') {
       row.checkBoxProps.onChange();
     }
     if (groupedRows) {
-      const [group, _] = rowId.split('-');
-      const id = parseInt(_, 10);
-      _data = {
+      const [group, splitID] = rowId.split('-');
+      const id = parseInt(splitID, 10);
+      tempData = {
         ...data
       };
-      _data[group].data = toggleRowCheckbox(_data[group].data, id);
+      tempData[group].data = toggleRowCheckbox(tempData[group].data, id);
     } else {
-      _data = toggleRowCheckbox(data, rowId);
+      tempData = toggleRowCheckbox(data, rowId);
     }
-    setData(_data);
+    setData(tempData);
   };
   const toggleRowExpansion = rowId => {
-    let _row = null;
+    let tempRow = null;
     if (groupedRows) {
-      const [group, _] = rowId.split('-');
-      const id = parseInt(_, 10);
-      _row = {
+      const [group, splitId] = rowId.split('-');
+      const id = parseInt(splitId, 10);
+      tempRow = {
         ...data
       };
-      _row[group].data = toggleExpandedRow(_row[group].data, id);
+      tempRow[group].data = toggleExpandedRow(tempRow[group].data, id);
     } else {
-      _row = toggleExpandedRow(data, rowId);
+      tempRow = toggleExpandedRow(data, rowId);
     }
-    setData(_row);
+    setData(tempRow);
   };
   const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && /*#__PURE__*/_jsx(Checkbox, {
     label: getCopy('all'),
@@ -131,8 +130,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inactive: disableHeaderCheckbox,
     onChange: toggleSelectAll
   });
-  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
-    return _showCheckbox && !row.hideCheckbox && /*#__PURE__*/_jsx(Checkbox, {
+  const buildCheckBoxDisplay = (shouldShowCheckbox, row, rowId) => {
+    return shouldShowCheckbox && !row.hideCheckbox && /*#__PURE__*/_jsx(Checkbox, {
       ...row.checkBoxProps,
       onChange: () => toggleCheckbox(rowId, row)
     });
@@ -157,25 +156,24 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: row.expandedRowChildComponent.component
     })
   });
-  const buildRowContent = (row, rowId, _showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/_jsxs(React.Fragment, {
+  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(DataGridRow, {
       tokens: themeTokens,
       rowId: rowId,
       isExpandedRowOpen: row.isExpandedRowOpen,
       hasExpandedContent: row.hasExpandedRow,
       onClick: toggleRowExpansion,
-      children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
+      children: [shouldDisplayIconColumn(data, shouldShowCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
         tokens: themeTokens,
         isExpandedRowOpen: row.isExpandedRowOpen,
+        hidePreviousRowBorder: row.hidePreviousRowBorder,
         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, {
+      }), columnsData.map(column => {
+        const currentColumn = columns.find(el => el.key === column.key);
+        const columnContent = typeof currentColumn?.displayedComponent === 'function' ? currentColumn.displayedComponent(row[column.key]) : /*#__PURE__*/_jsx(Typography, {
           block: true,
           variant: {
             size: 'small'
@@ -184,31 +182,38 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             color: themeTokens.cellTextColor
           },
           children: row[column.key]
-        })
-      }, `${rowId}-${column.key}`))]
+        });
+        return /*#__PURE__*/_jsx(DataGridCell, {
+          tokens: themeTokens,
+          isExpandedRowOpen: row.isExpandedRowOpen,
+          hidePreviousRowBorder: row.hidePreviousRowBorder,
+          isHeaderVisible: isHeaderVisible,
+          children: columnContent
+        }, `${rowId}-${column.key}`);
+      })]
     }, rowId), ExpandedRow]
   }, rowId);
   const sortColumn = column => {
-    const _col = {
+    const currentColumn = {
       ...column
     };
     if (!groupedRows) {
-      const _data = [...data].sort((a, b) => {
-        const first = _col.dataType === DATA_TYPE.NUMBER ? parseFloat(a[_col.key]) : a[_col.key].toUpperCase();
-        const next = _col.dataType === DATA_TYPE.NUMBER ? parseFloat(b[_col.key]) : b[_col.key].toUpperCase();
-        if (_col.sortDirection === SORT_DIRECTION.DESC) {
+      const currentData = [...data].sort((a, b) => {
+        const first = currentColumn.dataType === DATA_TYPE.NUMBER ? parseFloat(a[currentColumn.key]) : a[currentColumn.key].toUpperCase();
+        const next = currentColumn.dataType === DATA_TYPE.NUMBER ? parseFloat(b[currentColumn.key]) : b[currentColumn.key].toUpperCase();
+        if (currentColumn.sortDirection === SORT_DIRECTION.DESC) {
           if (first < next) return -1;
           return next === first ? 0 : 1;
         }
         if (next < first) return -1;
         return first === next ? 0 : 1;
       });
-      _col.sortDirection = _col.sortDirection === SORT_DIRECTION.DESC ? SORT_DIRECTION.ASC : SORT_DIRECTION.DESC;
-      _col.currentSort = true;
-      const _columns = resetColumnsData(columnsData);
-      _columns[columnsData.findIndex(_el => _el.key === column.key)] = _col;
-      setColumnsData(_columns);
-      setData(_data);
+      currentColumn.sortDirection = currentColumn.sortDirection === SORT_DIRECTION.DESC ? SORT_DIRECTION.ASC : SORT_DIRECTION.DESC;
+      currentColumn.currentSort = true;
+      const tempColumns = resetColumnsData(columnsData);
+      tempColumns[columnsData.findIndex(el => el.key === column.key)] = currentColumn;
+      setColumnsData(tempColumns);
+      setData(currentData);
     }
   };
   let HeaderContent = null;
@@ -232,7 +237,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
-      const DataRow = data[group].data.map(row => {
+      const modifiedData = hideRowBottomBorder([...data[group].data]);
+      const DataRow = modifiedData.map(row => {
         const rowId = `${group}-${row.id}`;
         const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
         const DisplayCaret = buildDisplayCaret(row, rowId);
@@ -244,7 +250,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }, group);
     });
   } else {
-    BodyContent = data.map(row => {
+    const modifiedData = hideRowBottomBorder([...data]);
+    BodyContent = modifiedData.map(row => {
       const rowId = row.id;
       const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
       const DisplayCaret = buildDisplayCaret(row, rowId);
@@ -252,18 +259,22 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
     });
   }
+  const isFirstRowExpanded = data[0]?.isExpandedRowOpen;
   HeaderContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [shouldDisplayIconColumn(data, showCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isFirstCol: true,
       isHeaderVisible: isHeaderVisible,
+      hidePreviousRowBorder: isFirstRowExpanded,
       children: HeaderCheckBoxDisplay
     }), columnsData.map(column => /*#__PURE__*/_jsxs(DataGridCell, {
       type: CELL_TYPE.HEADING,
       tokens: themeTokens,
       isSortable: isSortable,
       isHeaderVisible: isHeaderVisible,
+      hidePreviousRowBorder: isFirstRowExpanded,
+      textAlign: column.textAlign || 'start',
       children: [/*#__PURE__*/_jsx(Typography, {
         block: true,
         variant: {
@@ -320,7 +331,9 @@ DataGrid.propTypes = {
     dataType: PropTypes.oneOf(['string', 'number']),
     isSortable: PropTypes.bool,
     // Set this to true to enable sorting for this column
-    fn: PropTypes.func
+    fn: PropTypes.func,
+    textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+    displayedComponent: PropTypes.func
   })).isRequired,
   /**
    * Use `groupedRows` to pass the grouped data for display

package/lib/esm/DataGridCell.js

@@ -7,12 +7,17 @@ const StyledHeaderCell = /*#__PURE__*/styled.th.withConfig({
   displayName: "DataGridCell__StyledHeaderCell",
   componentId: "[object Object]__sc-6nkvhz-0"
 })(["", ""], props => {
-  return css(["background-color:", ";border-top:solid ", "px ", ";border-bottom:solid ", "px ", ";padding:", "px;text-align:", ";box-sizing:border-box;font-size:", "px;font-weight:bold;line-height:", "px;color:", ";width:", ";font-family:", ";"], props.headerRowBackgroundColor, props.headerBorderTopWidth, props.headerBorderTopColor, props.headerBorderBottomWidth, props.headerBorderBottomColor, props.headerPadding, props.headerTextAlign, props.headerFontSize, props.headerLineHeight * props.headerFontSize, props.headerTextColor, props.firstColWidth, props.headerFontFamily);
+  return css(["background-color:", ";border-top:solid ", "px ", ";border-bottom:", ";padding:", "px;padding-left:", "px;padding-right:", "px;text-align:", ";box-sizing:border-box;font-size:", "px;font-weight:bold;line-height:", "px;color:", ";width:", ";font-family:", ";"], props.headerRowBackgroundColor, props.headerBorderTopWidth, props.headerBorderTopColor, props.hidePreviousRowBorder ? `none` : `solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor}`, props.headerPadding, props.headerCellHorizontalPadding, props.headerCellHorizontalPadding, props.headerTextAlign, props.headerFontSize, props.headerLineHeight * props.headerFontSize, props.headerTextColor, props.firstColWidth, props.headerFontFamily);
 });
 const StyledHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;justify-content:", ";"], _ref => {
+  let {
+    textAlign
+  } = _ref;
+  return textAlign;
+});
 const StyledHeaderCellHiddenHeader = /*#__PURE__*/styled.th.withConfig({
   displayName: "DataGridCell__StyledHeaderCellHiddenHeader",
   componentId: "[object Object]__sc-6nkvhz-2"
@@ -28,7 +33,7 @@ const StyledGroupHeaderCell = /*#__PURE__*/styled.td.withConfig({
 const StyledGroupHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
   componentId: "[object Object]__sc-6nkvhz-4"
-})(["display:flex;align-items:center;justify-content:start;"]);
+})(["display:flex;align-items:center;"]);
 const StyledExpandedCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledExpandedCell",
   componentId: "[object Object]__sc-6nkvhz-5"
@@ -48,9 +53,9 @@ export const StyledCell = /*#__PURE__*/styled.td.withConfig({
   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);
   }
-  return css(["padding:", "px;border-bottom:", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.hideRowBottomBorder === 1 ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
+  return css(["padding:", "px;border-bottom:", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.hideRowBottomBorder === 1 || props.hidePreviousRowBorder ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
-const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const DataGridCell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -59,14 +64,18 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     showCheckbox = false,
     isFirstCol = false,
     isExpandedRowOpen = false,
-    isHeaderVisible = true
-  } = _ref;
+    isHeaderVisible = true,
+    hidePreviousRowBorder = false,
+    textAlign = 'start'
+  } = _ref2;
   if (type === CELL_TYPE.HEADING) {
     return isHeaderVisible ? /*#__PURE__*/_jsx(StyledHeaderCell, {
       ...tokens,
+      hidePreviousRowBorder: hidePreviousRowBorder,
       firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
       ref: ref,
       children: /*#__PURE__*/_jsx(StyledHeaderCellDiv, {
+        textAlign: textAlign,
         children: children
       })
     }) : /*#__PURE__*/_jsx(StyledHeaderCellHiddenHeader, {
@@ -102,6 +111,7 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(StyledCell, {
     ...tokens,
     isExpandedRowOpen: isExpandedRowOpen,
+    hidePreviousRowBorder: hidePreviousRowBorder,
     ref: ref,
     children: children
   });
@@ -139,6 +149,14 @@ DataGridCell.propTypes = {
   /**
    * 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
+  isHeaderVisible: PropTypes.bool,
+  /**
+   * Passed to the component to hide the bottom-border of previous row if current row is expanded (to avoid double border). Set to false by default
+   */
+  hidePreviousRowBorder: PropTypes.bool,
+  /**
+   * Passed to the component to determine the header text alignment
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 };
 export default DataGridCell;

package/lib/esm/utility.js

@@ -99,4 +99,17 @@ export const toggleExpandedRow = (array, rowId) => {
     ...el,
     isExpandedRowOpen: el.id === rowId ? !el.isExpandedRowOpen : el.isExpandedRowOpen
   }));
+};
+export const hideRowBottomBorder = function () {
+  let array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return array.map((row, index) => {
+    const eachRow = {
+      ...row
+    };
+    // setting prop to disable previous row bottom border if current row is expanded
+    if (index < array.length - 1 && array[index + 1]?.isExpandedRowOpen) {
+      eachRow.hidePreviousRowBorder = true;
+    }
+    return eachRow;
+  });
 };

package/package.json

@@ -5,8 +5,8 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.4.0",
-    "@telus-uds/components-base": "^3.5.0",
+    "@telus-uds/components-web": "^4.4.2",
+    "@telus-uds/components-base": "^3.5.2",
     "@telus-uds/system-theme-tokens": "^4.3.0",
     "styled-components": "6.1.13",
     "smooth-scrollbar": "8.8.4",
@@ -46,5 +46,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.2.2"
+  "version": "1.3.0"
 }

package/src/DataGrid.jsx

@@ -22,7 +22,8 @@ import {
   toggleExpandedRow,
   toggleRowCheckbox,
   ROW_TYPE,
-  CELL_TYPE
+  CELL_TYPE,
+  hideRowBottomBorder
 } from './utility'
 import DataGridTable from './DataGridTable'
 import DataGridHead from './DataGridHead'
@@ -67,34 +68,36 @@ const DataGrid = React.forwardRef(
     const [hideHeaderCheckBoxByRows, setHideHeaderCheckBoxByRows] = React.useState(false)
 
     useEffect(() => {
-      let _isAtLeastOneRowUnselected = null
-      let _isAtLeastOneRowEnabled = null
-      let _hideHeaderCheckBoxByRows = null
+      let isAtLeastOneRowUnselectedCheck = null
+      let isAtLeastOneRowEnabledCheck = null
+      let hideHeaderCheckBoxByRowsCheck = null
 
       if (groupedRows) {
-        _isAtLeastOneRowUnselected = Object.keys(data).some((el) => {
+        isAtLeastOneRowUnselectedCheck = Object.keys(data).some((el) => {
           return isAtLeastOneRowUnselected(data[el].data)
         })
 
-        _isAtLeastOneRowEnabled = Object.keys(data).some((el) => {
+        isAtLeastOneRowEnabledCheck = Object.keys(data).some((el) => {
           return isAtLeastOneRowEnabled(data[el].data)
         })
 
-        _hideHeaderCheckBoxByRows = Object.keys(data).some((el) => {
+        hideHeaderCheckBoxByRowsCheck = Object.keys(data).some((el) => {
           return hasEveryRowHiddenItsCheckbox(data[el].data)
         })
       } else {
-        _isAtLeastOneRowUnselected = isAtLeastOneRowUnselected(data)
-        _isAtLeastOneRowEnabled = isAtLeastOneRowEnabled(data)
-        _hideHeaderCheckBoxByRows = hasEveryRowHiddenItsCheckbox(data)
+        isAtLeastOneRowUnselectedCheck = isAtLeastOneRowUnselected(data)
+        isAtLeastOneRowEnabledCheck = isAtLeastOneRowEnabled(data)
+        hideHeaderCheckBoxByRowsCheck = hasEveryRowHiddenItsCheckbox(data)
       }
 
-      setCheckAllState(_isAtLeastOneRowEnabled === false ? false : !_isAtLeastOneRowUnselected)
-      setDisableHeaderCheckbox(!_isAtLeastOneRowEnabled)
-      setHideHeaderCheckBoxByRows(_hideHeaderCheckBoxByRows)
+      setCheckAllState(
+        isAtLeastOneRowEnabledCheck === false ? false : !isAtLeastOneRowUnselectedCheck
+      )
+      setDisableHeaderCheckbox(!isAtLeastOneRowEnabledCheck)
+      setHideHeaderCheckBoxByRows(hideHeaderCheckBoxByRowsCheck)
     }, [data, groupedRows])
 
-    const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+    const shouldDisplayIconColumn = (allData, shouldShowCheckbox) => {
       let doesOneRowHaveExpandedContent = null
       if (groupedRows) {
         doesOneRowHaveExpandedContent = Object.keys(allData).some((el) => {
@@ -104,53 +107,52 @@ const DataGrid = React.forwardRef(
         doesOneRowHaveExpandedContent = allData.some((el) => el.hasExpandedRow === true)
       }
 
-      return !!(_showCheckbox || doesOneRowHaveExpandedContent)
+      return !!(shouldShowCheckbox || doesOneRowHaveExpandedContent)
     }
 
     const toggleSelectAll = () => {
-      let _rows = null
+      let tempRows = {}
       if (groupedRows) {
-        _rows = {}
         Object.keys(data).forEach((el) => {
-          _rows[el] = { ...data[el] }
-          _rows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState)
+          tempRows[el] = { ...data[el] }
+          tempRows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState)
         })
       } else {
-        _rows = toggleAllCheckBoxes(data, checkAllState)
+        tempRows = toggleAllCheckBoxes(data, checkAllState)
       }
-      setData(_rows)
+      setData(tempRows)
       setCheckAllState(!checkAllState)
     }
 
     const toggleCheckbox = (rowId, row) => {
-      let _data = null
+      let tempData = null
 
       if (typeof row.checkBoxProps?.onChange === 'function') {
         row.checkBoxProps.onChange()
       }
 
       if (groupedRows) {
-        const [group, _] = rowId.split('-')
-        const id = parseInt(_, 10)
-        _data = { ...data }
-        _data[group].data = toggleRowCheckbox(_data[group].data, id)
+        const [group, splitID] = rowId.split('-')
+        const id = parseInt(splitID, 10)
+        tempData = { ...data }
+        tempData[group].data = toggleRowCheckbox(tempData[group].data, id)
       } else {
-        _data = toggleRowCheckbox(data, rowId)
+        tempData = toggleRowCheckbox(data, rowId)
       }
-      setData(_data)
+      setData(tempData)
     }
 
     const toggleRowExpansion = (rowId) => {
-      let _row = null
+      let tempRow = null
       if (groupedRows) {
-        const [group, _] = rowId.split('-')
-        const id = parseInt(_, 10)
-        _row = { ...data }
-        _row[group].data = toggleExpandedRow(_row[group].data, id)
+        const [group, splitId] = rowId.split('-')
+        const id = parseInt(splitId, 10)
+        tempRow = { ...data }
+        tempRow[group].data = toggleExpandedRow(tempRow[group].data, id)
       } else {
-        _row = toggleExpandedRow(data, rowId)
+        tempRow = toggleExpandedRow(data, rowId)
       }
-      setData(_row)
+      setData(tempRow)
     }
 
     const HeaderCheckBoxDisplay = showCheckbox && !hideHeaderCheckBoxByRows && (
@@ -162,9 +164,9 @@ const DataGrid = React.forwardRef(
       />
     )
 
-    const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => {
+    const buildCheckBoxDisplay = (shouldShowCheckbox, row, rowId) => {
       return (
-        _showCheckbox &&
+        shouldShowCheckbox &&
         !row.hideCheckbox && (
           <Checkbox {...row.checkBoxProps} onChange={() => toggleCheckbox(rowId, row)} />
         )
@@ -206,7 +208,7 @@ const DataGrid = React.forwardRef(
     const buildRowContent = (
       row,
       rowId,
-      _showCheckbox,
+      shouldShowCheckbox,
       CheckBoxDisplay,
       DisplayCaret,
       ExpandedRow
@@ -220,10 +222,11 @@ const DataGrid = React.forwardRef(
           hasExpandedContent={row.hasExpandedRow}
           onClick={toggleRowExpansion}
         >
-          {shouldDisplayIconColumn(data, _showCheckbox) && (
+          {shouldDisplayIconColumn(data, shouldShowCheckbox) && (
             <DataGridCell
               tokens={themeTokens}
               isExpandedRowOpen={row.isExpandedRowOpen}
+              hidePreviousRowBorder={row.hidePreviousRowBorder}
               isHeaderVisible={isHeaderVisible}
             >
               <StyledIconContainer>
@@ -232,37 +235,51 @@ const DataGrid = React.forwardRef(
               </StyledIconContainer>
             </DataGridCell>
           )}
-          {columnsData.map((column) => (
-            <DataGridCell
-              tokens={themeTokens}
-              isExpandedRowOpen={row.isExpandedRowOpen}
-              isHeaderVisible={isHeaderVisible}
-              key={`${rowId}-${column.key}`}
-            >
-              <Typography
-                block
-                variant={{ size: 'small' }}
-                tokens={{ color: themeTokens.cellTextColor }}
+          {columnsData.map((column) => {
+            const currentColumn = columns.find((el) => el.key === column.key)
+            const columnContent =
+              typeof currentColumn?.displayedComponent === 'function' ? (
+                currentColumn.displayedComponent(row[column.key])
+              ) : (
+                <Typography
+                  block
+                  variant={{ size: 'small' }}
+                  tokens={{ color: themeTokens.cellTextColor }}
+                >
+                  {row[column.key]}
+                </Typography>
+              )
+            return (
+              <DataGridCell
+                tokens={themeTokens}
+                isExpandedRowOpen={row.isExpandedRowOpen}
+                hidePreviousRowBorder={row.hidePreviousRowBorder}
+                isHeaderVisible={isHeaderVisible}
+                key={`${rowId}-${column.key}`}
               >
-                {row[column.key]}
-              </Typography>
-            </DataGridCell>
-          ))}
+                {columnContent}
+              </DataGridCell>
+            )
+          })}
         </DataGridRow>
         {ExpandedRow}
       </React.Fragment>
     )
 
     const sortColumn = (column) => {
-      const _col = { ...column }
+      const currentColumn = { ...column }
       if (!groupedRows) {
-        const _data = [...data].sort((a, b) => {
+        const currentData = [...data].sort((a, b) => {
           const first =
-            _col.dataType === DATA_TYPE.NUMBER ? parseFloat(a[_col.key]) : a[_col.key].toUpperCase()
+            currentColumn.dataType === DATA_TYPE.NUMBER
+              ? parseFloat(a[currentColumn.key])
+              : a[currentColumn.key].toUpperCase()
           const next =
-            _col.dataType === DATA_TYPE.NUMBER ? parseFloat(b[_col.key]) : b[_col.key].toUpperCase()
+            currentColumn.dataType === DATA_TYPE.NUMBER
+              ? parseFloat(b[currentColumn.key])
+              : b[currentColumn.key].toUpperCase()
 
-          if (_col.sortDirection === SORT_DIRECTION.DESC) {
+          if (currentColumn.sortDirection === SORT_DIRECTION.DESC) {
             if (first < next) return -1
             return next === first ? 0 : 1
           }
@@ -270,15 +287,17 @@ const DataGrid = React.forwardRef(
           return first === next ? 0 : 1
         })
 
-        _col.sortDirection =
-          _col.sortDirection === SORT_DIRECTION.DESC ? SORT_DIRECTION.ASC : SORT_DIRECTION.DESC
-        _col.currentSort = true
+        currentColumn.sortDirection =
+          currentColumn.sortDirection === SORT_DIRECTION.DESC
+            ? SORT_DIRECTION.ASC
+            : SORT_DIRECTION.DESC
+        currentColumn.currentSort = true
 
-        const _columns = resetColumnsData(columnsData)
-        _columns[columnsData.findIndex((_el) => _el.key === column.key)] = _col
+        const tempColumns = resetColumnsData(columnsData)
+        tempColumns[columnsData.findIndex((el) => el.key === column.key)] = currentColumn
 
-        setColumnsData(_columns)
-        setData(_data)
+        setColumnsData(tempColumns)
+        setData(currentData)
       }
     }
 
@@ -301,8 +320,8 @@ const DataGrid = React.forwardRef(
             </DataGridCell>
           </DataGridRow>
         )
-
-        const DataRow = data[group].data.map((row) => {
+        const modifiedData = hideRowBottomBorder([...data[group].data])
+        const DataRow = modifiedData.map((row) => {
           const rowId = `${group}-${row.id}`
           const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId)
 
@@ -328,7 +347,8 @@ const DataGrid = React.forwardRef(
         )
       })
     } else {
-      BodyContent = data.map((row) => {
+      const modifiedData = hideRowBottomBorder([...data])
+      BodyContent = modifiedData.map((row) => {
         const rowId = row.id
 
         const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId)
@@ -341,6 +361,7 @@ const DataGrid = React.forwardRef(
       })
     }
 
+    const isFirstRowExpanded = data[0]?.isExpandedRowOpen
     HeaderContent = (
       <>
         {shouldDisplayIconColumn(data, showCheckbox) && (
@@ -349,6 +370,7 @@ const DataGrid = React.forwardRef(
             tokens={themeTokens}
             isFirstCol={true}
             isHeaderVisible={isHeaderVisible}
+            hidePreviousRowBorder={isFirstRowExpanded}
           >
             {HeaderCheckBoxDisplay}
           </DataGridCell>
@@ -361,6 +383,8 @@ const DataGrid = React.forwardRef(
             tokens={themeTokens}
             isSortable={isSortable}
             isHeaderVisible={isHeaderVisible}
+            hidePreviousRowBorder={isFirstRowExpanded}
+            textAlign={column.textAlign || 'start'}
           >
             <Typography
               block
@@ -427,7 +451,9 @@ DataGrid.propTypes = {
       width: PropTypes.string,
       dataType: PropTypes.oneOf(['string', 'number']),
       isSortable: PropTypes.bool, // Set this to true to enable sorting for this column
-      fn: PropTypes.func
+      fn: PropTypes.func,
+      textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+      displayedComponent: PropTypes.func
     })
   ).isRequired,
   /**

package/src/DataGridCell.jsx

@@ -8,8 +8,12 @@ const StyledHeaderCell = styled.th`
     return css`
       background-color: ${props.headerRowBackgroundColor};
       border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
-      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor};
+      border-bottom: ${props.hidePreviousRowBorder
+        ? `none`
+        : `solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor}`};
       padding: ${props.headerPadding}px;
+      padding-left: ${props.headerCellHorizontalPadding}px;
+      padding-right: ${props.headerCellHorizontalPadding}px;
       text-align: ${props.headerTextAlign};
       box-sizing: border-box;
       font-size: ${props.headerFontSize}px;
@@ -24,6 +28,7 @@ const StyledHeaderCell = styled.th`
 const StyledHeaderCellDiv = styled.div`
   display: flex;
   align-items: center;
+  justify-content: ${({ textAlign }) => textAlign};
 `
 const StyledHeaderCellHiddenHeader = styled.th`
   ${(props) => {
@@ -56,7 +61,6 @@ const StyledGroupHeaderCell = styled.td`
 const StyledGroupHeaderCellDiv = styled.div`
   display: flex;
   align-items: center;
-  justify-content: start;
 `
 
 const StyledExpandedCell = styled.td`
@@ -107,7 +111,7 @@ export const StyledCell = styled.td`
     }
     return css`
       padding: ${props.cellPadding}px;
-      border-bottom: ${props.hideRowBottomBorder === 1
+      border-bottom: ${props.hideRowBottomBorder === 1 || props.hidePreviousRowBorder
         ? `none`
         : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`};
       text-align: ${props.cellTextAlign};
@@ -130,7 +134,9 @@ const DataGridCell = React.forwardRef(
       showCheckbox = false,
       isFirstCol = false,
       isExpandedRowOpen = false,
-      isHeaderVisible = true
+      isHeaderVisible = true,
+      hidePreviousRowBorder = false,
+      textAlign = 'start'
     },
     ref
   ) => {
@@ -138,10 +144,11 @@ const DataGridCell = React.forwardRef(
       return isHeaderVisible ? (
         <StyledHeaderCell
           {...tokens}
+          hidePreviousRowBorder={hidePreviousRowBorder}
           firstColWidth={isFirstCol ? tokens.firstColWidth : 'auto'}
           ref={ref}
         >
-          <StyledHeaderCellDiv>{children}</StyledHeaderCellDiv>
+          <StyledHeaderCellDiv textAlign={textAlign}>{children}</StyledHeaderCellDiv>
         </StyledHeaderCell>
       ) : (
         <StyledHeaderCellHiddenHeader
@@ -173,7 +180,12 @@ const DataGridCell = React.forwardRef(
       )
     }
     return (
-      <StyledCell {...tokens} isExpandedRowOpen={isExpandedRowOpen} ref={ref}>
+      <StyledCell
+        {...tokens}
+        isExpandedRowOpen={isExpandedRowOpen}
+        hidePreviousRowBorder={hidePreviousRowBorder}
+        ref={ref}
+      >
         {children}
       </StyledCell>
     )
@@ -214,7 +226,15 @@ DataGridCell.propTypes = {
   /**
    * 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
+  isHeaderVisible: PropTypes.bool,
+  /**
+   * Passed to the component to hide the bottom-border of previous row if current row is expanded (to avoid double border). Set to false by default
+   */
+  hidePreviousRowBorder: PropTypes.bool,
+  /**
+   * Passed to the component to determine the header text alignment
+   */
+  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
 }
 
 export default DataGridCell

package/src/utility.jsx

@@ -110,3 +110,14 @@ export const toggleExpandedRow = (array, rowId) => {
     isExpandedRowOpen: el.id === rowId ? !el.isExpandedRowOpen : el.isExpandedRowOpen
   }))
 }
+
+export const hideRowBottomBorder = (array = []) => {
+  return array.map((row, index) => {
+    const eachRow = { ...row }
+    // setting prop to disable previous row bottom border if current row is expanded
+    if (index < array.length - 1 && array[index + 1]?.isExpandedRowOpen) {
+      eachRow.hidePreviousRowBorder = true
+    }
+    return eachRow
+  })
+}