@telus-uds/components-community.data-grid 1.3.4 → 1.4.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Fri, 23 May 2025 15:12:18 GMT and should not be manually modified.
+This log was last generated on Tue, 24 Jun 2025 18:53:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.4.0
+
+Tue, 24 Jun 2025 18:53:53 GMT
+
+### Minor changes
+
+- `Datagrid`: UDS-Casa datagrid sticky header while scrolling (vishal.jindal@telus.com)
+- Bump @telus-uds/components-web to v4.7.0
+- Bump @telus-uds/components-base to v3.10.0
+- Bump @telus-uds/system-theme-tokens to v4.8.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 1.3.5
+
+Tue, 10 Jun 2025 20:25:05 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v4.6.1
+- Bump @telus-uds/components-base to v3.9.0
+- Bump @telus-uds/system-theme-tokens to v4.7.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 1.3.4
 
-Fri, 23 May 2025 15:12:18 GMT
+Fri, 23 May 2025 15:15:58 GMT
 
 ### Patches
 

package/lib/cjs/DataGrid.js

@@ -35,7 +35,8 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     variant,
     copy = 'en',
     testID = 'data-grid',
-    isHeaderVisible
+    isHeaderVisible,
+    isHeaderSticky = false
   } = _ref;
   const themeTokens = (0, _componentsBase.useThemeTokens)('DataGrid', tokens, variant);
   const getCopy = (0, _componentsBase.useCopy)({
@@ -318,6 +319,7 @@ const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID: testID,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridHead.default, {
+        isHeaderSticky: isHeaderSticky,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridRow.default, {
           type: _utility.ROW_TYPE.HEADING,
           children: HeaderContent
@@ -419,6 +421,10 @@ DataGrid.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,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: _propTypes.default.bool
 };
 var _default = exports.default = DataGrid;

package/lib/cjs/DataGridHead.js

@@ -6,14 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledHeader = /*#__PURE__*/_styledComponents.default.thead.withConfig({
+  displayName: "DataGridHead__StyledHeader",
+  componentId: "[object Object]__sc-ogldi9-0"
+})(["", ""], props => {
+  if (props.isHeaderSticky) {
+    return {
+      position: 'sticky',
+      top: '-9px',
+      zIndex: 1,
+      backgroundColor: 'white'
+    };
+  }
+  return `
+      position: relative;
+    `;
+});
 const DataGridHead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    isHeaderSticky
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeader, {
     ref: ref,
+    isHeaderSticky: isHeaderSticky,
     children: children
   });
 });
@@ -22,6 +41,10 @@ DataGridHead.propTypes = {
   /**
    * Accepts any React or HTML node
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: _propTypes.default.bool
 };
 var _default = exports.default = DataGridHead;

package/lib/cjs/DataGridTable.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _smoothScrollbarReact = require("smooth-scrollbar-react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,28 +19,18 @@ const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
   displayName: "DataGridTable__StyledTable",
   componentId: "[object Object]__sc-aw7n7n-1"
 })(["width:100%;border-spacing:0;"]);
-const WrappedScrollbar = /*#__PURE__*/(0, _styledComponents.default)(_smoothScrollbarReact.Scrollbar).withConfig({
-  displayName: "DataGridTable__WrappedScrollbar",
-  componentId: "[object Object]__sc-aw7n7n-2"
-})(["width:100%;"]);
 const DataGridTable = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
-    makeScrollBarAlwaysVisible,
     testID
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledWrapper, {
     tokens: tokens,
     ref: ref,
     testID: testID,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedScrollbar, {
-      alwaysShowTracks: makeScrollBarAlwaysVisible,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
-          children: children
-        })
-      })
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+      children: children
     })
   });
 });
@@ -55,10 +44,6 @@ DataGridTable.propTypes = {
    * Tokens passed to the component
    */
   tokens: _propTypes.default.object,
-  /**
-   * Set this to true to make scrollbar always visible when content is larger than the grid
-   */
-  makeScrollBarAlwaysVisible: _propTypes.default.bool,
   /**
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.

package/lib/esm/DataGrid.js

@@ -26,7 +26,8 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     copy = 'en',
     testID = 'data-grid',
-    isHeaderVisible
+    isHeaderVisible,
+    isHeaderSticky = false
   } = _ref;
   const themeTokens = useThemeTokens('DataGrid', tokens, variant);
   const getCopy = useCopy({
@@ -309,6 +310,7 @@ const DataGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     testID: testID,
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(DataGridHead, {
+        isHeaderSticky: isHeaderSticky,
         children: /*#__PURE__*/_jsx(DataGridRow, {
           type: ROW_TYPE.HEADING,
           children: HeaderContent
@@ -410,6 +412,10 @@ DataGrid.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,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: PropTypes.bool
 };
 export default DataGrid;

package/lib/esm/DataGridHead.js

@@ -1,12 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
+const StyledHeader = /*#__PURE__*/styled.thead.withConfig({
+  displayName: "DataGridHead__StyledHeader",
+  componentId: "[object Object]__sc-ogldi9-0"
+})(["", ""], props => {
+  if (props.isHeaderSticky) {
+    return {
+      position: 'sticky',
+      top: '-9px',
+      zIndex: 1,
+      backgroundColor: 'white'
+    };
+  }
+  return `
+      position: relative;
+    `;
+});
 const DataGridHead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    isHeaderSticky
   } = _ref;
-  return /*#__PURE__*/_jsx("thead", {
+  return /*#__PURE__*/_jsx(StyledHeader, {
     ref: ref,
+    isHeaderSticky: isHeaderSticky,
     children: children
   });
 });
@@ -15,6 +34,10 @@ DataGridHead.propTypes = {
   /**
    * Accepts any React or HTML node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: PropTypes.bool
 };
 export default DataGridHead;

package/lib/esm/DataGridTable.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { Scrollbar } from 'smooth-scrollbar-react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "DataGridTable__StyledWrapper",
@@ -11,28 +10,18 @@ const StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "DataGridTable__StyledTable",
   componentId: "[object Object]__sc-aw7n7n-1"
 })(["width:100%;border-spacing:0;"]);
-const WrappedScrollbar = /*#__PURE__*/styled(Scrollbar).withConfig({
-  displayName: "DataGridTable__WrappedScrollbar",
-  componentId: "[object Object]__sc-aw7n7n-2"
-})(["width:100%;"]);
 const DataGridTable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,
-    makeScrollBarAlwaysVisible,
     testID
   } = _ref;
   return /*#__PURE__*/_jsx(StyledWrapper, {
     tokens: tokens,
     ref: ref,
     testID: testID,
-    children: /*#__PURE__*/_jsx(WrappedScrollbar, {
-      alwaysShowTracks: makeScrollBarAlwaysVisible,
-      children: /*#__PURE__*/_jsx("div", {
-        children: /*#__PURE__*/_jsx(StyledTable, {
-          children: children
-        })
-      })
+    children: /*#__PURE__*/_jsx(StyledTable, {
+      children: children
     })
   });
 });
@@ -46,10 +35,6 @@ DataGridTable.propTypes = {
    * Tokens passed to the component
    */
   tokens: PropTypes.object,
-  /**
-   * Set this to true to make scrollbar always visible when content is larger than the grid
-   */
-  makeScrollBarAlwaysVisible: PropTypes.bool,
   /**
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.

package/package.json

@@ -5,12 +5,10 @@
   ],
   "dependencies": {
     "prop-types": "^15.7.2",
-    "@telus-uds/components-web": "^4.6.0",
-    "@telus-uds/components-base": "^3.8.0",
-    "@telus-uds/system-theme-tokens": "^4.6.0",
-    "styled-components": "6.1.13",
-    "smooth-scrollbar": "8.8.4",
-    "smooth-scrollbar-react": "2.4.1"
+    "@telus-uds/components-web": "^4.7.0",
+    "@telus-uds/components-base": "^3.10.0",
+    "@telus-uds/system-theme-tokens": "^4.8.0",
+    "styled-components": "6.1.13"
   },
   "devDependencies": {
     "@telus-uds/browserslist-config": "^1.0.4",
@@ -46,5 +44,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.3.4"
+  "version": "1.4.0"
 }

package/src/DataGrid.jsx

@@ -52,7 +52,8 @@ const DataGrid = React.forwardRef(
       variant,
       copy = 'en',
       testID = 'data-grid',
-      isHeaderVisible
+      isHeaderVisible,
+      isHeaderSticky = false
     },
     ref
   ) => {
@@ -428,7 +429,7 @@ const DataGrid = React.forwardRef(
         testID={testID}
       >
         <>
-          <DataGridHead>
+          <DataGridHead isHeaderSticky={isHeaderSticky}>
             <DataGridRow type={ROW_TYPE.HEADING}>{HeaderContent}</DataGridRow>
           </DataGridHead>
           <DataGridBody>{BodyContent}</DataGridBody>
@@ -542,7 +543,11 @@ DataGrid.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,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: PropTypes.bool
 }
 
 export default DataGrid

package/src/DataGridHead.jsx

@@ -1,7 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const DataGridHead = React.forwardRef(({ children }, ref) => <thead ref={ref}>{children}</thead>)
+import styled from 'styled-components'
+
+const StyledHeader = styled.thead`
+  ${(props) => {
+    if (props.isHeaderSticky) {
+      return {
+        position: 'sticky',
+        top: '-9px',
+        zIndex: 1,
+        backgroundColor: 'white'
+      }
+    }
+    return `
+      position: relative;
+    `
+  }}
+`
+
+const DataGridHead = React.forwardRef(({ children, isHeaderSticky }, ref) => (
+  <StyledHeader ref={ref} isHeaderSticky={isHeaderSticky}>
+    {children}
+  </StyledHeader>
+))
 
 DataGridHead.displayName = 'DataGridHead'
 
@@ -9,7 +31,11 @@ DataGridHead.propTypes = {
   /**
    * Accepts any React or HTML node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Use isHeaderSticky prop to provide sticky header
+   */
+  isHeaderSticky: PropTypes.bool
 }
 
 export default DataGridHead

package/src/DataGridTable.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { Scrollbar } from 'smooth-scrollbar-react'
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -23,23 +22,13 @@ const StyledTable = styled.table`
   border-spacing: 0;
 `
 
-const WrappedScrollbar = styled(Scrollbar)`
-  width: 100%;
-`
-
-const DataGridTable = React.forwardRef(
-  ({ children, tokens, makeScrollBarAlwaysVisible, testID }, ref) => {
-    return (
-      <StyledWrapper tokens={tokens} ref={ref} testID={testID}>
-        <WrappedScrollbar alwaysShowTracks={makeScrollBarAlwaysVisible}>
-          <div>
-            <StyledTable>{children}</StyledTable>
-          </div>
-        </WrappedScrollbar>
-      </StyledWrapper>
-    )
-  }
-)
+const DataGridTable = React.forwardRef(({ children, tokens, testID }, ref) => {
+  return (
+    <StyledWrapper tokens={tokens} ref={ref} testID={testID}>
+      <StyledTable>{children}</StyledTable>
+    </StyledWrapper>
+  )
+})
 
 DataGridTable.displayName = 'DataGridTable'
 
@@ -52,10 +41,6 @@ DataGridTable.propTypes = {
    * Tokens passed to the component
    */
   tokens: PropTypes.object,
-  /**
-   * Set this to true to make scrollbar always visible when content is larger than the grid
-   */
-  makeScrollBarAlwaysVisible: PropTypes.bool,
   /**
   /**
    * Use in tests if the datagrid test cases need to find the element with the id.