@telus-uds/components-community.data-grid 1.6.7 → 1.7.0

package/CHANGELOG.md

@@ -1,9 +1,21 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Tue, 16 Sep 2025 21:19:36 GMT and should not be manually modified.
+This log was last generated on Fri, 03 Oct 2025 20:34:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.0
+
+Fri, 03 Oct 2025 20:34:06 GMT
+
+### Minor changes
+
+- `Datagrid`: Added borders to datagrid header (vishal.jindal@telus.com)
+- Bump @telus-uds/components-web to v4.12.3
+- Bump @telus-uds/components-base to v3.19.0
+- Bump @telus-uds/system-theme-tokens to v4.15.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.6.7
 
 Tue, 16 Sep 2025 21:19:36 GMT

package/jest.config.cjs

@@ -9,7 +9,12 @@ module.exports = () => ({
     '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
     '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
     '\\.css': '<rootDir>/__mocks__/styleMock.js',
-    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/cjs/server.js'
+    '^react-native$': 'react-native-web',
+    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/src/server.js',
+    '^@telus-uds/components-base$': '<rootDir>/../../../components-base/src',
+    '^@telus-uds/components-web$': '<rootDir>/../../../components-web/src',
+    '^@telus-uds/system-constants$': '<rootDir>/../../../system-constants/src',
+    '^@telus-uds/system-theme-tokens$': '<rootDir>/../../../system-theme-tokens/src'
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transformIgnorePatterns: [

package/lib/cjs/DataGrid.js

@@ -188,7 +188,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: row.expandedRowChildComponent.component
     })
   });
-  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridRow.default, {
       tokens: themeTokens,
       rowId: rowId,
@@ -200,6 +200,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         isExpandedRowOpen: row.isExpandedRowOpen,
         hidePreviousRowBorder: row.hidePreviousRowBorder,
         isHeaderVisible: isHeaderVisible,
+        rowIndex: rowIndex,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledIconContainer, {
           checkboxChevronIconGap: checkboxChevronIconGap,
           children: [CheckBoxDisplay, DisplayCaret]
@@ -221,6 +222,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           isExpandedRowOpen: row.isExpandedRowOpen,
           hidePreviousRowBorder: row.hidePreviousRowBorder,
           isHeaderVisible: isHeaderVisible,
+          rowIndex: rowIndex,
           children: columnContent
         }, `${rowId}-${column.key}`);
       })]
@@ -252,7 +254,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let HeaderContent = null;
   let BodyContent = null;
   if (groupedRows) {
-    BodyContent = Object.keys(data).map(group => {
+    BodyContent = Object.keys(data).map((group, index) => {
       const DefaultSubHeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
           size: 'h3'
@@ -267,6 +269,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           tokens: themeTokens,
           columnsLength: columnsData.length,
           isHeaderVisible: isHeaderVisible,
+          rowIndex: index,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -284,12 +287,12 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   } else {
     const modifiedData = (0, _utility.hideRowBottomBorder)([...data]);
-    BodyContent = modifiedData.map(row => {
+    BodyContent = modifiedData.map((row, index) => {
       const rowId = row.id;
       const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
       const DisplayCaret = buildDisplayCaret(row, rowId);
       const ExpandedRow = buildExpandedRow(row, rowId);
-      return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
+      return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow, index);
     });
   }
   const isFirstRowExpanded = data[0]?.isExpandedRowOpen;

package/lib/cjs/DataGridCell.js

@@ -16,7 +16,7 @@ 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:", ";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);
+  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, `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",
@@ -37,7 +37,7 @@ const StyledGroupHeaderCell = /*#__PURE__*/_styledComponents.default.td.withConf
   displayName: "DataGridCell__StyledGroupHeaderCell",
   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);
+  return (0, _styledComponents.css)(["background-color:", ";padding:", "px;border-top:", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.rowIndex === 0 ? 'none' : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
@@ -60,7 +60,7 @@ const StyledCell = exports.StyledCell = /*#__PURE__*/_styledComponents.default.t
   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);
+    return (0, _styledComponents.css)(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.rowIndex === 0 ? 'none' : `solid ${props.headerBorderTopWidth}px ${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 || props.hidePreviousRowBorder ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
@@ -75,7 +75,8 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     isExpandedRowOpen = false,
     isHeaderVisible = true,
     hidePreviousRowBorder = false,
-    textAlign = 'start'
+    textAlign = 'start',
+    rowIndex = null
   } = _ref2;
   if (type === _utility.CELL_TYPE.HEADING) {
     return isHeaderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
@@ -96,6 +97,7 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   if (type === _utility.CELL_TYPE.SUBHEADING) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupHeaderCell, {
       colSpan: columnsLength + 1,
+      rowIndex: rowIndex,
       ...tokens,
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupHeaderCellDiv, {
@@ -122,6 +124,7 @@ const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     isExpandedRowOpen: isExpandedRowOpen,
     hidePreviousRowBorder: hidePreviousRowBorder,
     ref: ref,
+    rowIndex: rowIndex,
     children: children
   });
 });
@@ -166,6 +169,10 @@ DataGridCell.propTypes = {
   /**
    * Passed to the component to determine the header text alignment
    */
-  textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
+  textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+  /**
+   * rowIndex passed to the component for certain scenarios in which row index is required
+   */
+  rowIndex: _propTypes.default.number
 };
 var _default = exports.default = DataGridCell;

package/lib/cjs/DataGridTable.js

@@ -14,11 +14,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const StyledWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "DataGridTable__StyledWrapper",
   componentId: "[object Object]__sc-aw7n7n-0"
-})(["display:flex;width:100%;margin:0px;padding:8px;", " box-sizing:border-box;border:0px solid #000000;overflow-y:auto;"], props => props.tokens.maxHeight && (0, _styledComponents.css)(["max-height:", "px;"], props.tokens.maxHeight));
+})(["display:flex;width:100%;margin:0px;padding:9px;", " box-sizing:border-box;border:0px solid #000000;overflow-y:auto;"], props => props.tokens.maxHeight && (0, _styledComponents.css)(["max-height:", "px;"], props.tokens.maxHeight));
 const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "DataGridTable__StyledTable",
   componentId: "[object Object]__sc-aw7n7n-1"
-})(["width:100%;border-spacing:0;"]);
+})(["width:100%;border-spacing:0;border-collapse:separate;"]);
 const DataGridTable = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,

package/lib/esm/DataGrid.js

@@ -179,7 +179,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: row.expandedRowChildComponent.component
     })
   });
-  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/_jsxs(React.Fragment, {
+  const buildRowContent = (row, rowId, shouldShowCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow, rowIndex) => /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(DataGridRow, {
       tokens: themeTokens,
       rowId: rowId,
@@ -191,6 +191,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         isExpandedRowOpen: row.isExpandedRowOpen,
         hidePreviousRowBorder: row.hidePreviousRowBorder,
         isHeaderVisible: isHeaderVisible,
+        rowIndex: rowIndex,
         children: /*#__PURE__*/_jsxs(StyledIconContainer, {
           checkboxChevronIconGap: checkboxChevronIconGap,
           children: [CheckBoxDisplay, DisplayCaret]
@@ -212,6 +213,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           isExpandedRowOpen: row.isExpandedRowOpen,
           hidePreviousRowBorder: row.hidePreviousRowBorder,
           isHeaderVisible: isHeaderVisible,
+          rowIndex: rowIndex,
           children: columnContent
         }, `${rowId}-${column.key}`);
       })]
@@ -243,7 +245,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let HeaderContent = null;
   let BodyContent = null;
   if (groupedRows) {
-    BodyContent = Object.keys(data).map(group => {
+    BodyContent = Object.keys(data).map((group, index) => {
       const DefaultSubHeading = /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'h3'
@@ -258,6 +260,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           tokens: themeTokens,
           columnsLength: columnsData.length,
           isHeaderVisible: isHeaderVisible,
+          rowIndex: index,
           children: data[group].groupHeaderComponent || DefaultSubHeading
         })
       }, group);
@@ -275,12 +278,12 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     });
   } else {
     const modifiedData = hideRowBottomBorder([...data]);
-    BodyContent = modifiedData.map(row => {
+    BodyContent = modifiedData.map((row, index) => {
       const rowId = row.id;
       const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
       const DisplayCaret = buildDisplayCaret(row, rowId);
       const ExpandedRow = buildExpandedRow(row, rowId);
-      return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
+      return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow, index);
     });
   }
   const isFirstRowExpanded = data[0]?.isExpandedRowOpen;

package/lib/esm/DataGridCell.js

@@ -7,7 +7,7 @@ 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:", ";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);
+  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, `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",
@@ -28,7 +28,7 @@ const StyledGroupHeaderCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCell",
   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);
+  return css(["background-color:", ";padding:", "px;border-top:", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.rowIndex === 0 ? 'none' : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
 const StyledGroupHeaderCellDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridCell__StyledGroupHeaderCellDiv",
@@ -51,7 +51,7 @@ export const StyledCell = /*#__PURE__*/styled.td.withConfig({
   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);
+    return css(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.rowIndex === 0 ? 'none' : `solid ${props.headerBorderTopWidth}px ${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 || props.hidePreviousRowBorder ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
 });
@@ -66,7 +66,8 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     isExpandedRowOpen = false,
     isHeaderVisible = true,
     hidePreviousRowBorder = false,
-    textAlign = 'start'
+    textAlign = 'start',
+    rowIndex = null
   } = _ref2;
   if (type === CELL_TYPE.HEADING) {
     return isHeaderVisible ? /*#__PURE__*/_jsx(StyledHeaderCell, {
@@ -87,6 +88,7 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   if (type === CELL_TYPE.SUBHEADING) {
     return /*#__PURE__*/_jsx(StyledGroupHeaderCell, {
       colSpan: columnsLength + 1,
+      rowIndex: rowIndex,
       ...tokens,
       ref: ref,
       children: /*#__PURE__*/_jsx(StyledGroupHeaderCellDiv, {
@@ -113,6 +115,7 @@ const DataGridCell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     isExpandedRowOpen: isExpandedRowOpen,
     hidePreviousRowBorder: hidePreviousRowBorder,
     ref: ref,
+    rowIndex: rowIndex,
     children: children
   });
 });
@@ -157,6 +160,10 @@ DataGridCell.propTypes = {
   /**
    * Passed to the component to determine the header text alignment
    */
-  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * rowIndex passed to the component for certain scenarios in which row index is required
+   */
+  rowIndex: PropTypes.number
 };
 export default DataGridCell;

package/lib/esm/DataGridTable.js

@@ -5,11 +5,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridTable__StyledWrapper",
   componentId: "[object Object]__sc-aw7n7n-0"
-})(["display:flex;width:100%;margin:0px;padding:8px;", " box-sizing:border-box;border:0px solid #000000;overflow-y:auto;"], props => props.tokens.maxHeight && css(["max-height:", "px;"], props.tokens.maxHeight));
+})(["display:flex;width:100%;margin:0px;padding:9px;", " box-sizing:border-box;border:0px solid #000000;overflow-y:auto;"], props => props.tokens.maxHeight && css(["max-height:", "px;"], props.tokens.maxHeight));
 const StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "DataGridTable__StyledTable",
   componentId: "[object Object]__sc-aw7n7n-1"
-})(["width:100%;border-spacing:0;"]);
+})(["width:100%;border-spacing:0;border-collapse:separate;"]);
 const DataGridTable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.12.2",
-    "@telus-uds/components-base": "^3.18.0",
-    "@telus-uds/system-theme-tokens": "^4.14.0",
+    "@telus-uds/components-web": "^4.12.3",
+    "@telus-uds/components-base": "^3.19.0",
+    "@telus-uds/system-theme-tokens": "^4.15.0",
     "styled-components": "6.1.13"
   },
   "devDependencies": {
@@ -44,5 +44,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.6.7"
+  "version": "1.7.0"
 }

package/src/DataGrid.jsx

@@ -242,7 +242,8 @@ const DataGrid = React.forwardRef(
       shouldShowCheckbox,
       CheckBoxDisplay,
       DisplayCaret,
-      ExpandedRow
+      ExpandedRow,
+      rowIndex
     ) => (
       <React.Fragment key={rowId}>
         <DataGridRow
@@ -259,6 +260,7 @@ const DataGrid = React.forwardRef(
               isExpandedRowOpen={row.isExpandedRowOpen}
               hidePreviousRowBorder={row.hidePreviousRowBorder}
               isHeaderVisible={isHeaderVisible}
+              rowIndex={rowIndex}
             >
               <StyledIconContainer checkboxChevronIconGap={checkboxChevronIconGap}>
                 {CheckBoxDisplay}
@@ -287,6 +289,7 @@ const DataGrid = React.forwardRef(
                 hidePreviousRowBorder={row.hidePreviousRowBorder}
                 isHeaderVisible={isHeaderVisible}
                 key={`${rowId}-${column.key}`}
+                rowIndex={rowIndex}
               >
                 {columnContent}
               </DataGridCell>
@@ -335,7 +338,7 @@ const DataGrid = React.forwardRef(
     let HeaderContent = null
     let BodyContent = null
     if (groupedRows) {
-      BodyContent = Object.keys(data).map((group) => {
+      BodyContent = Object.keys(data).map((group, index) => {
         const DefaultSubHeading = (
           <Typography variant={{ size: 'h3' }}>{data[group].name}</Typography>
         )
@@ -346,6 +349,7 @@ const DataGrid = React.forwardRef(
               tokens={themeTokens}
               columnsLength={columnsData.length}
               isHeaderVisible={isHeaderVisible}
+              rowIndex={index}
             >
               {data[group].groupHeaderComponent || DefaultSubHeading}
             </DataGridCell>
@@ -379,7 +383,7 @@ const DataGrid = React.forwardRef(
       })
     } else {
       const modifiedData = hideRowBottomBorder([...data])
-      BodyContent = modifiedData.map((row) => {
+      BodyContent = modifiedData.map((row, index) => {
         const rowId = row.id
 
         const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId)
@@ -388,7 +392,15 @@ const DataGrid = React.forwardRef(
 
         const ExpandedRow = buildExpandedRow(row, rowId)
 
-        return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow)
+        return buildRowContent(
+          row,
+          rowId,
+          showCheckbox,
+          CheckBoxDisplay,
+          DisplayCaret,
+          ExpandedRow,
+          index
+        )
       })
     }
 

package/src/DataGridCell.jsx

@@ -8,9 +8,7 @@ const StyledHeaderCell = styled.th`
     return css`
       background-color: ${props.headerRowBackgroundColor};
       border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
-      border-bottom: ${props.hidePreviousRowBorder
-        ? `none`
-        : `solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor}`};
+      border-bottom: ${`solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor}`};
       padding: ${props.headerPadding}px;
       padding-left: ${props.headerCellHorizontalPadding}px;
       padding-right: ${props.headerCellHorizontalPadding}px;
@@ -47,7 +45,9 @@ const StyledGroupHeaderCell = styled.td`
     return css`
       background-color: ${props.subHeadingBackgroundColor};
       padding: ${props.cellPadding}px;
-      border-top: solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};
+      border-top: ${props.rowIndex === 0
+        ? 'none'
+        : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`};
       text-align: ${props.cellTextAlign};
       font-size: ${props.cellFontSize}px;
       font-weight: normal;
@@ -106,7 +106,9 @@ export const StyledCell = styled.td`
         line-height: ${props.cellLineHeight * props.cellFontSize}px;
         color: ${props.cellTextColor};
         font-family: ${props.cellFontFamily};
-        border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
+        border-top: ${props.rowIndex === 0
+          ? 'none'
+          : `solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor}`};
       `
     }
     return css`
@@ -136,7 +138,8 @@ const DataGridCell = React.forwardRef(
       isExpandedRowOpen = false,
       isHeaderVisible = true,
       hidePreviousRowBorder = false,
-      textAlign = 'start'
+      textAlign = 'start',
+      rowIndex = null
     },
     ref
   ) => {
@@ -160,7 +163,12 @@ const DataGridCell = React.forwardRef(
     }
     if (type === CELL_TYPE.SUBHEADING) {
       return (
-        <StyledGroupHeaderCell colSpan={columnsLength + 1} {...tokens} ref={ref}>
+        <StyledGroupHeaderCell
+          colSpan={columnsLength + 1}
+          rowIndex={rowIndex}
+          {...tokens}
+          ref={ref}
+        >
           <StyledGroupHeaderCellDiv {...tokens}>{children}</StyledGroupHeaderCellDiv>
         </StyledGroupHeaderCell>
       )
@@ -185,6 +193,7 @@ const DataGridCell = React.forwardRef(
         isExpandedRowOpen={isExpandedRowOpen}
         hidePreviousRowBorder={hidePreviousRowBorder}
         ref={ref}
+        rowIndex={rowIndex}
       >
         {children}
       </StyledCell>
@@ -234,7 +243,11 @@ DataGridCell.propTypes = {
   /**
    * Passed to the component to determine the header text alignment
    */
-  textAlign: PropTypes.oneOf(['start', 'center', 'end'])
+  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * rowIndex passed to the component for certain scenarios in which row index is required
+   */
+  rowIndex: PropTypes.number
 }
 
 export default DataGridCell

package/src/DataGridTable.jsx

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
   display: flex;
   width: 100%;
   margin: 0px;
-  padding: 8px;
+  padding: 9px;
   ${(props) =>
     props.tokens.maxHeight &&
     css`
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
 const StyledTable = styled.table`
   width: 100%;
   border-spacing: 0;
+  border-collapse: separate;
 `
 
 const DataGridTable = React.forwardRef(({ children, tokens, testID }, ref) => {