fix: data grid layout backwards compat with older tables. Support res…

…ponsive tables (#2307) * feat(table): add responsive tables * feat(data-grid): inherit table layout options including responsive layout support * fix(website): adopt responsive table layouts where tables break out moble experience * fix: pr feedback and prop name change
twilio-labs · Mar 24, 2022 · b1359c9 · b1359c9
1 parent badff09
commit b1359c9
Show file tree

Hide file tree

Showing 34 changed files with 1,075 additions and 152 deletions.
diff --git a/.changeset/giant-pillows-lick.md b/.changeset/giant-pillows-lick.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/table': minor
+'@twilio-paste/core': minor
+---
+
+[Table] Adds the ability to safely render tables for mobile screens using the `scrollHorizontally` prop. Also adds the `noWrap` prop to control cell density by preventing line wrapping.
diff --git a/.changeset/lovely-guests-think.md b/.changeset/lovely-guests-think.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/data-grid': minor
+'@twilio-paste/core': minor
+---
+
+[Data grid]: inherit more things from the base table component, including the new responsive and no line wrapping behaviours for better table rendering options.
diff --git a/packages/paste-core/components/data-grid/src/DataGrid.tsx b/packages/paste-core/components/data-grid/src/DataGrid.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import {Box} from '@twilio-paste/box';
 import {useUID} from '@twilio-paste/uid-library';
 import {useCompositeState, Composite} from '@twilio-paste/reakit-library';
 import {Table} from '@twilio-paste/table';
@@ -130,27 +129,21 @@ export const DataGrid = React.forwardRef<HTMLTableElement, DataGridProps>(
 
     return (
       <DataGridContext.Provider value={dataGridState}>
-        <Box
+        <Composite
+          {...props}
+          {...compositeState}
           id={dataGridId}
-          element={`${element}_WRAPPER`}
-          overflowX="auto"
-          whiteSpace="nowrap"
-          boxShadow={actionable ? 'shadowFocus' : null}
-        >
-          <Composite
-            {...props}
-            {...compositeState}
-            ref={ref}
-            as={Table}
-            element={element}
-            role="grid"
-            onKeyDown={handleKeypress}
-            onMouseDown={handleMouseDown}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            data-actionable={actionable}
-          />
-        </Box>
+          ref={ref}
+          as={Table}
+          element={element}
+          role="grid"
+          onKeyDown={handleKeypress}
+          onMouseDown={handleMouseDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          isActionable={actionable}
+          data-actionable={actionable}
+        />
       </DataGridContext.Provider>
     );
   }

diff --git a/packages/paste-core/components/data-grid/src/DataGridCell.tsx b/packages/paste-core/components/data-grid/src/DataGridCell.tsx
@@ -14,6 +14,7 @@ const isElement = require('lodash.iselement');
 
 type CellType = 'th' | 'td';
 export interface DataGridCellProps extends Pick<TdProps, 'textAlign'> {
+  colSpan?: number;
   as?: CellType;
   element?: BoxElementProps['element'];
 }