@telus-uds/components-community.data-grid 0.1.0

package/.eslintrc.cjs

@@ -0,0 +1,21 @@
+const path = require('path')
+const base = require('../../../../eslintrc.base.cjs')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+base.settings = {
+  ...base.settings,
+  'import/resolver': {
+    node: {
+      ...base.settings?.['import/resolver']?.node,
+      moduleDirectory: [
+        path.join(__dirname, '../../node_modules'),
+        path.join(__dirname, '../../../../node_modules')
+      ]
+    }
+  }
+}
+
+module.exports = base

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log - @telus-uds/components-community.data-grid
+
+This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 0.1.0
+
+Thu, 19 Dec 2024 04:54:39 GMT
+
+### Minor changes
+
+- `DataGrid` - enhancement of DataGrid with sortable columns (sam.obisesan@telus.com)
+- Bump @telus-uds/components-web to v3.2.1
+- Bump @telus-uds/components-base to v2.3.0
+- Bump @telus-uds/system-theme-tokens to v3.2.0
+- Bump @telus-uds/browserslist-config to v1.0.5

package/__mocks__/styleMock.js

@@ -0,0 +1,7 @@
+module.exports = {
+  process() {
+    return {
+      code: `module.exports = {};`
+    }
+  }
+}

package/babel.config.cjs

@@ -0,0 +1,4 @@
+const baseConfig = require('../../../../babel.config.base.cjs')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = baseConfig({ name })

package/jest.config.cjs

@@ -0,0 +1,19 @@
+module.exports = () => ({
+  displayName: {
+    name: require('./package.json').name.split('@telus-uds/').pop(),
+    color: 'magenta'
+  },
+  testEnvironment: 'jsdom',
+  transform: { '.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
+  moduleNameMapper: {
+    '.+\\.(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/server.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
+  ],
+  collectCoverageFrom: ['src/*.{js,jsx}']
+})

package/lib/DataGrid.js

@@ -0,0 +1,368 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Checkbox, useCopy, useThemeTokens, variantProp, IconButton } from '@telus-uds/components-base';
+import { styledComponents } from '@telus-uds/components-web';
+import dictionary from './dictionary';
+import { resetColumnsData, resetRowData, DATA_TYPE, SORT_DIRECTION, isAtLeastOneRowUnselected, toggleAllCheckBoxes, toggleExpandedRow, toggleRowCheckbox, ROW_TYPE, CELL_TYPE } from './utility';
+import DataGridTable from './DataGridTable';
+import DataGridHead from './DataGridHead';
+import DataGridBody from './DataGridBody';
+import DataGridRow from './DataGridRow';
+import DataGridCell from './DataGridCell';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
+export const StyledIconContainer = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  width: 60px;
+  justify-content: space-between;
+`;
+const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    rows = [],
+    columns = [],
+    groupedRows,
+    showCheckbox = false,
+    isSortable = false,
+    makeScrollBarAlwaysVisible = true,
+    tokens,
+    variant,
+    copy = 'en',
+    testID = 'data-grid'
+  } = _ref;
+  const themeTokens = useThemeTokens('DataGrid', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const {
+    expandRowIcon,
+    hideExpandedRowIcon,
+    sortColumnIconDown,
+    sortColumnIconUp
+  } = themeTokens;
+  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;
+    if (groupedRows) {
+      isARowUnselectedInAllGroups = Object.keys(allData).some(el => {
+        return isAtLeastOneRowUnselected(allData[el].data);
+      });
+    } else {
+      isARowUnselectedInAllGroups = isAtLeastOneRowUnselected(allData);
+    }
+    return !isARowUnselectedInAllGroups;
+  };
+  const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+    let doesOneRowHaveExpandedContent = null;
+    if (groupedRows) {
+      doesOneRowHaveExpandedContent = Object.keys(allData).some(el => {
+        return allData[el].data.some(eachData => eachData.hasExpandedRow === true);
+      });
+    } else {
+      doesOneRowHaveExpandedContent = allData.some(el => el.hasExpandedRow === true);
+    }
+    return !!(_showCheckbox || doesOneRowHaveExpandedContent);
+  };
+  const toggleSelectAll = () => {
+    let _rows = null;
+    if (groupedRows) {
+      _rows = {};
+      Object.keys(data).forEach(el => {
+        _rows[el] = {
+          ...data[el]
+        };
+        _rows[el].data = toggleAllCheckBoxes(data[el].data, checkAllState);
+      });
+    } else {
+      _rows = toggleAllCheckBoxes(data, checkAllState);
+    }
+    setData(_rows);
+    setCheckAllState(!checkAllState);
+  };
+  const toggleCheckbox = rowId => {
+    let _data = null;
+    if (groupedRows) {
+      const [group, _] = rowId.split('-');
+      const id = parseInt(_, 10);
+      _data = {
+        ...data
+      };
+      _data[group].data = toggleRowCheckbox(_data[group].data, id);
+    } else {
+      _data = toggleRowCheckbox(data, rowId);
+    }
+    setData(_data);
+  };
+  const toggleRowExpansion = rowId => {
+    let _row = null;
+    if (groupedRows) {
+      const [group, _] = rowId.split('-');
+      const id = parseInt(_, 10);
+      _row = {
+        ...data
+      };
+      _row[group].data = toggleExpandedRow(_row[group].data, id);
+    } else {
+      _row = toggleExpandedRow(data, rowId);
+    }
+    setData(_row);
+  };
+  const HeaderCheckBoxDisplay = showCheckbox && /*#__PURE__*/_jsx(Checkbox, {
+    label: getCopy('all'),
+    checked: shouldCheckHeaderBox(data),
+    onChange: toggleSelectAll
+  });
+  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => _showCheckbox && /*#__PURE__*/_jsx(Checkbox, {
+    checked: row.isSelected,
+    onChange: () => toggleCheckbox(rowId)
+  });
+  const buildDisplayCaret = (row, rowId) => row.hasExpandedRow && /*#__PURE__*/_jsx(IconButton, {
+    onPress: () => toggleRowExpansion(rowId),
+    icon: row.isExpandedRowOpen === true ? hideExpandedRowIcon : expandRowIcon,
+    accessibilityRole: `button-${rowId}`,
+    accessibilityLabel: row.isExpandedRowOpen === true ? getCopy('hideRow') : getCopy('expandRow')
+  });
+  const buildExpandedRow = (row, rowId) => row.isExpandedRowOpen && /*#__PURE__*/_jsx(DataGridRow, {
+    type: ROW_TYPE.EXPANDEDROW,
+    tokens: themeTokens,
+    rowId: rowId,
+    isExpandedRowOpen: row.isExpandedRowOpen,
+    children: /*#__PURE__*/_jsx(DataGridCell, {
+      type: CELL_TYPE.EXPANDEDROWCELL,
+      tokens: themeTokens,
+      columnsLength: columns.length,
+      showCheckbox: showCheckbox,
+      isExpandedRowOpen: row.isExpandedRowOpen,
+      children: row.expandedRowChildComponent.component
+    })
+  });
+  const buildRowContent = (row, rowId, _showCheckbox, 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, {
+        tokens: themeTokens,
+        isExpandedRowOpen: row.isExpandedRowOpen,
+        children: /*#__PURE__*/_jsxs(StyledIconContainer, {
+          children: [CheckBoxDisplay, DisplayCaret]
+        })
+      }), columnsData.map(column => /*#__PURE__*/_jsx(DataGridCell, {
+        tokens: themeTokens,
+        isExpandedRowOpen: row.isExpandedRowOpen,
+        children: /*#__PURE__*/_jsx(Typography, {
+          block: true,
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: themeTokens.cellTextColor
+          },
+          children: row[column.key]
+        })
+      }, `${rowId}-${column.key}`))]
+    }, rowId), ExpandedRow]
+  }, rowId);
+  const sortColumn = column => {
+    const _col = {
+      ...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) {
+          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);
+    }
+  };
+  let HeaderContent = null;
+  let BodyContent = null;
+  if (groupedRows) {
+    BodyContent = Object.keys(data).map(group => {
+      const DefaultSubHeading = /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h3'
+        },
+        children: data[group].name
+      });
+      const GroupHeaderRow = /*#__PURE__*/_jsx(DataGridRow, {
+        type: ROW_TYPE.EXPANDEDROW,
+        tokens: themeTokens,
+        children: /*#__PURE__*/_jsx(DataGridCell, {
+          type: CELL_TYPE.SUBHEADING,
+          tokens: themeTokens,
+          columnsLength: columnsData.length,
+          children: data[group].groupHeaderComponent || DefaultSubHeading
+        })
+      }, group);
+      const DataRow = data[group].data.map(row => {
+        const rowId = `${group}-${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 /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [GroupHeaderRow, DataRow]
+      }, group);
+    });
+  } else {
+    BodyContent = data.map(row => {
+      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);
+    });
+  }
+  HeaderContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [shouldDisplayIconColumn(data, showCheckbox) && /*#__PURE__*/_jsx(DataGridCell, {
+      type: CELL_TYPE.HEADING,
+      tokens: themeTokens,
+      isFirstCol: true,
+      children: HeaderCheckBoxDisplay
+    }), columnsData.map(column => /*#__PURE__*/_jsxs(DataGridCell, {
+      type: CELL_TYPE.HEADING,
+      tokens: themeTokens,
+      isSortable: isSortable,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        block: true,
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          color: themeTokens.headerTextColor
+        },
+        children: column.label
+      }), isSortable && column.isSortable && /*#__PURE__*/_jsx(IconButton, {
+        variant: {
+          size: 'small'
+        },
+        tokens: {
+          iconColor: column.currentSort ? themeTokens.sortColumnIconActiveColor : themeTokens.sortColumnIconDefaultColor
+        },
+        onPress: () => {
+          if (typeof column.fn === 'function') {
+            column.fn(column, data, setData, columnsData, setColumnsData);
+          } else sortColumn(column);
+        },
+        icon: column.sortDirection === SORT_DIRECTION.ASC ? sortColumnIconUp : sortColumnIconDown,
+        accessibilityRole: "sort-button",
+        accessibilityLabel: getCopy('button')
+      })]
+    }, column.key))]
+  });
+  return /*#__PURE__*/_jsx(DataGridTable, {
+    tokens: themeTokens,
+    makeScrollBarAlwaysVisible: makeScrollBarAlwaysVisible,
+    ref: ref,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(DataGridHead, {
+        children: /*#__PURE__*/_jsx(DataGridRow, {
+          type: ROW_TYPE.HEADING,
+          children: HeaderContent
+        })
+      }), /*#__PURE__*/_jsx(DataGridBody, {
+        children: BodyContent
+      })]
+    })
+  });
+});
+DataGrid.displayName = 'DataGrid';
+DataGrid.propTypes = {
+  /**
+   * Use `columns` to pass the data for data-grid column header items.
+   */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    dataType: PropTypes.oneOf(['string', 'number']),
+    isSortable: PropTypes.bool,
+    // Set this to true to enable sorting for this column
+    fn: PropTypes.func
+  })).isRequired,
+  /**
+   * Use `groupedRows` to pass the grouped data for display
+   */
+  groupedRows: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    groupHeaderComponent: PropTypes.node,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      expandedRow: PropTypes.shape({
+        rows: PropTypes.arrayOf(PropTypes.shape({
+          id: PropTypes.number.isRequired
+        })),
+        columns: PropTypes.arrayOf(PropTypes.shape({
+          key: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired
+        }))
+      }),
+      expandedRowChildComponent: PropTypes.shape({
+        component: PropTypes.node,
+        displayOnLoad: PropTypes.bool.isRequired
+      })
+    }))
+  })),
+  /**
+   * Use `rows` to pass ungrouped data for data-grid row cells items.
+   */
+  rows: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    expandedRowChildComponent: PropTypes.shape({
+      component: PropTypes.node,
+      displayOnLoad: PropTypes.bool.isRequired
+    })
+  })),
+  /**
+   * Set this to true to enable columns to become sortable.
+   */
+  isSortable: PropTypes.bool,
+  /**
+   * Set this to true to make scrollbar always visible when content is larger than the grid
+   */
+  makeScrollBarAlwaysVisible: PropTypes.bool,
+  /**
+   * Set this to true to enable checkboxes in the first column.
+   */
+  showCheckbox: PropTypes.bool,
+  /**
+   * Use tokens prop to override theme tokens
+   */
+  tokens: PropTypes.object,
+  /**
+   * No available variants
+   */
+  variant: variantProp.propType,
+  /**
+   * Use copy for localisations of keys.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Use in tests if the datagrid test cases need to find the element with the id.
+   */
+  testID: PropTypes.string
+};
+export default DataGrid;

package/lib/DataGridBody.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataGridBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("tbody", {
+    ref: ref,
+    children: children
+  });
+});
+DataGridBody.displayName = 'DataGridBody';
+DataGridBody.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired
+};
+export default DataGridBody;

package/lib/DataGridCell.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styledComponents } from '@telus-uds/components-web';
+import { CELL_TYPE } from './utility';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled,
+  css
+} = styledComponents;
+const StyledHeaderCell = styled.th`
+  ${props => {
+  return css`
+      background-color: ${props.headerRowBackgroundColor};
+      border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
+      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor};
+      padding: ${props.headerPadding}px;
+      text-align: ${props.headerTextAlign};
+      box-sizing: border-box;
+      font-size: ${props.headerFontSize}px;
+      font-weight: bold;
+      line-height: ${props.headerLineHeight * props.headerFontSize}px;
+      color: ${props.headerTextColor};
+      width: ${props.firstColWidth};
+      font-family: ${props.headerFontFamily};
+    `;
+}}
+`;
+const StyledHeaderCellDiv = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledGroupHeaderCell = styled.td`
+  ${props => {
+  return css`
+      background-color: ${props.subHeadingBackgroundColor};
+      padding: ${props.cellPadding}px;
+      border-top: solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `;
+}}
+`;
+const StyledGroupHeaderCellDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: start;
+`;
+const StyledExpandedCell = styled.td`
+  ${props => {
+  return css`
+      padding: ${props.cellPadding}px;
+      border-bottom: ${props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`}
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `;
+}}
+`;
+const StyledExpandedCellDiv = styled.div`
+  ${props => {
+  return css`
+      display: flex;
+      align-items: center;
+      justify-content: ${props.expandedContentAlignment ? props.expandedContentAlignment : 'start'};
+      padding-left: ${props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`};
+    `;
+}}
+`;
+export const StyledCell = styled.td`
+  ${props => {
+  if (props.isExpandedRowOpen) {
+    return css`
+        padding: ${props.cellPadding}px;
+        text-align: ${props.cellTextAlign};
+        font-size: ${props.cellFontSize}px;
+        font-weight: normal;
+        line-height: ${props.cellLineHeight * props.cellFontSize}px;
+        color: ${props.cellTextColor};
+        font-family: ${props.cellFontFamily};
+        border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
+      `;
+  }
+  return css`
+      padding: ${props.cellPadding}px;
+      border-bottom: ${props.hideRowBottomBorder === 1 ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`};
+      text-align: ${props.cellTextAlign};
+      font-size: ${props.cellFontSize}px;
+      font-weight: normal;
+      line-height: ${props.cellLineHeight * props.cellFontSize}px;
+      color: ${props.cellTextColor};
+      font-family: ${props.cellFontFamily};
+    `;
+}}
+`;
+const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    type,
+    columnsLength,
+    showCheckbox = false,
+    isFirstCol = false,
+    isExpandedRowOpen = false
+  } = _ref;
+  if (type === CELL_TYPE.HEADING) {
+    return /*#__PURE__*/_jsx(StyledHeaderCell, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref,
+      children: /*#__PURE__*/_jsx(StyledHeaderCellDiv, {
+        children: children
+      })
+    });
+  }
+  if (type === CELL_TYPE.SUBHEADING) {
+    return /*#__PURE__*/_jsx(StyledGroupHeaderCell, {
+      colSpan: columnsLength + 1,
+      ...tokens,
+      ref: ref,
+      children: /*#__PURE__*/_jsx(StyledGroupHeaderCellDiv, {
+        ...tokens,
+        children: children
+      })
+    });
+  }
+  if (type === CELL_TYPE.EXPANDEDROWCELL) {
+    return /*#__PURE__*/_jsx(StyledExpandedCell, {
+      colSpan: columnsLength + 1,
+      ...tokens,
+      isExpandedRowOpen: isExpandedRowOpen,
+      ref: ref,
+      children: /*#__PURE__*/_jsx(StyledExpandedCellDiv, {
+        showCheckbox: showCheckbox,
+        ...tokens,
+        children: children
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(StyledCell, {
+    ...tokens,
+    isExpandedRowOpen: isExpandedRowOpen,
+    ref: ref,
+    children: children
+  });
+});
+DataGridCell.displayName = 'DataGridCell';
+DataGridCell.propTypes = {
+  /**
+    cell type
+  */
+  type: PropTypes.oneOf(['heading', 'subHeading', 'expandedRowCell']),
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node,
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * columnsLength passed to the component for certain scenarios in which colSpan is required
+   */
+  columnsLength: PropTypes.number,
+  /**
+   * showCheckbox passed to the component for certain scenarios in which checkbox visibility impacts the display design
+   */
+  showCheckbox: PropTypes.bool,
+  /**
+   * isFirstCol passed to the component to determine if cell is first within the row
+   */
+  isFirstCol: PropTypes.bool,
+  /**
+   * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
+   */
+  isExpandedRowOpen: PropTypes.bool
+};
+export default DataGridCell;

package/lib/DataGridHead.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataGridHead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("thead", {
+    ref: ref,
+    children: children
+  });
+});
+DataGridHead.displayName = 'DataGridHead';
+DataGridHead.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node
+};
+export default DataGridHead;