fix(DataTable): align items top on text wrapping

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -1679,6 +1679,9 @@ Map {
         "className": Object {
           "type": "string",
         },
+        "experimentalAutoAlign": Object {
+          "type": "bool",
+        },
         "isSortable": Object {
           "type": "bool",
         },
@@ -2259,6 +2262,9 @@ Map {
       "translateWithId": [Function],
     },
     "propTypes": Object {
+      "experimentalAutoAlign": Object {
+        "type": "bool",
+      },
       "filterRows": Object {
         "type": "func",
       },
@@ -7314,6 +7320,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "experimentalAutoAlign": Object {
+        "type": "bool",
+      },
       "isSortable": Object {
         "type": "bool",
       },

packages/react/package.json

@@ -95,6 +95,7 @@
     "babel-preset-carbon": "^0.5.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
+    "canvas": "^2.11.2",
     "clipboardy": "^2.1.0",
     "css-loader": "^6.5.1",
     "enquirer": "^2.3.6",

packages/react/src/components/DataTable/DataTable.js

@@ -75,6 +75,11 @@ const translateWithId = (id) => defaultTranslations[id];
  */
 class DataTable extends React.Component {
   static propTypes = {
+    /**
+     * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+     */
+    experimentalAutoAlign: PropTypes.bool,
+
     /**
      * Optional hook to manually control filtering of the rows from the
      * TableToolbarSearch component
@@ -416,6 +421,7 @@ class DataTable extends React.Component {
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover,
+      experimentalAutoAlign,
     } = this.props;
     return {
       useZebraStyles,
@@ -424,6 +430,7 @@ class DataTable extends React.Component {
       useStaticWidth,
       stickyHeader,
       overflowMenuOnHover,
+      experimentalAutoAlign,
     };
   };
 

packages/react/src/components/DataTable/DataTable.mdx

@@ -1,4 +1,5 @@
 import { Story, Props, Source, Preview } from '@storybook/addon-docs';
+import { Table, TableHead, TableHeader, TableRow, TableCell, TableBody } from '../DataTable'
 
 # DataTable
 
@@ -14,7 +15,6 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs';
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-
 ## Table of Contents
 
 - [Getting started](#getting-started)
@@ -24,9 +24,14 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs';
 - [Expansion](#expansion)
   - [Programmatic expansion](#programmatic-expansion)
 - [Selection](#selection)
-  - [Programmatic selection](#programmatic-selection)
+    - [Programmatic selection](#programmatic-selection)
 - [Filtering](#filtering)
 - [Batch actions](#batch-actions)
+- [Toolbar](#toolbar)
+  - [Overflow Menu](#overflow-menu)
+- [Text Wrapping Alignment](#text-wrapping-alignment)
+  - [Table with `experimentalAutoAlign = true`](#table-with-experimentalautoalign--true)
+  - [Table with `experimentalAutoAlign = false`](#table-with-experimentalautoalign--false)
 - [Props](#props)
   - [Render props](#render-props)
     - [Prop getters](#prop-getters)
@@ -314,6 +319,121 @@ cell.
 </TableBody>
 ```
 
+## Text Wrapping Alignment
+
+DataTable provides an experimental `experimentalAutoAlign` prop that you may
+opt into to have the table automatically align contents to the top when at least
+one table cell content is being wrapped on the table. Keep in mind this feature
+is experimental and might not be performant in tables with large datasets.
+
+### Table with `experimentalAutoAlign = true`
+
+<div style={{width: '300px'}}>
+  <Table experimentalAutoAlign>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+
+```jsx
+<div style={{width: '300px'}}>
+  <Table experimentalAutoAlign>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+```
+
+### Table with `experimentalAutoAlign = false`
+
+<div style={{width: '300px'}}>
+  <Table>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+
+```jsx
+<div style={{width: '300px'}}>
+  <Table>
+    <TableHead>
+      <TableRow>
+          <TableHeader>
+            Header1
+          </TableHeader>
+          <TableHeader>
+            Header2
+          </TableHeader>
+          <TableHeader>
+            Header3
+          </TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+        <TableRow>
+          <TableCell>Wrapping content</TableCell>
+          <TableCell>content</TableCell>
+          <TableCell>content</TableCell>
+        </TableRow>
+    </TableBody>
+  </Table>
+</div>
+```
+
 ## Props
 
 <Props />