fix(DataTable): useStaticWidth fix for title/description (#9632)

* fix(DataTable): ensure header matches content with useStaticWidth * test(snapshot): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 20, 2021 · 9bba19b · 9bba19b
1 parent a803128
commit 9bba19b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 1 deletion.
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -724,6 +724,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1132,6 +1132,9 @@ Map {
         "title": Object {
           "type": "node",
         },
+        "useStaticWidth": Object {
+          "type": "bool",
+        },
       },
     },
     "TableExpandHeader": Object {
@@ -1769,6 +1772,9 @@ Map {
       "title": Object {
         "type": "node",
       },
+      "useStaticWidth": Object {
+        "type": "bool",
+      },
     },
   },
   "TableExpandHeader" => Object {

diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
@@ -46,6 +46,7 @@ const props = () => ({
     'lg'
   ),
   stickyHeader: boolean('Sticky header (experimental)', false),
+  useStaticWidth: boolean('Use static width (useStaticWidth)', false),
 });
 
 export default {

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -429,10 +429,11 @@ export default class DataTable extends React.Component {
    * Helper utility to get the TableContainer Props.
    */
   getTableContainerProps = () => {
-    const { stickyHeader } = this.props;
+    const { stickyHeader, useStaticWidth } = this.props;
 
     return {
       stickyHeader,
+      useStaticWidth,
     };
   };
 

diff --git a/packages/react/src/components/DataTable/TableContainer.js b/packages/react/src/components/DataTable/TableContainer.js
@@ -18,13 +18,15 @@ const TableContainer = ({
   title,
   description,
   stickyHeader,
+  useStaticWidth,
   ...rest
 }) => {
   const tableContainerClasses = cx(
     className,
     `${prefix}--data-table-container`,
     {
       [`${prefix}--data-table--max-width`]: stickyHeader,
+      [`${prefix}--data-table-container--static`]: useStaticWidth,
     }
   );
 
@@ -60,6 +62,11 @@ TableContainer.propTypes = {
    * Provide a title for the Table
    */
   title: PropTypes.node,
+
+  /**
+   * If true, will use a width of 'fit-content' to match the inner table width
+   */
+  useStaticWidth: PropTypes.bool,
 };
 
 export default TableContainer;