[DataTable] Better prop compatibility and fixing `no-wrap` issue. #7043

philschoefer · 2022-08-29T14:28:20Z

WHY are these changes introduced?

@brianshen1990 was integrating the new DataTable in the BulkAccountInviter app and noticed that regular cells were never wrapping in multiple lines, pushing the table width beyond the available space. This triggered the condensed nav. This PR fixes this by defaulting to cells wrapping unless the truncate prop is specifically set.

This was caused by this PR which wrapped all cells in a TruncatedText component which would automatically add tooltips in case content doesn't have enough space. This was a bit too heavy handed. After this PR TruncatedText is only applied if the truncate prop is specifically set.

I also ensured the fixed first column feature will work properly no matter whether truncated is set or not. This means you can now have fixed first columns with text wrapping and with text being truncated depending on what the consumer prefers.

Lastly, there seemed to be a bug in the calculation of headers when fixedFirstColums is set to a value larger than 1. This was because currently we're only calculating columnVisibilityData when condensed was true. This means no heading widths are available to properly calculate the absolute positioning of fixed headings in the sticky header unless the viewport width was reduced to trigger condensed to be true. After this PR columnVisibilityData will be calculated when either stickyHeading is true or the table is condensed.

Screenshot of wrapping issue

Video of heading with calculation issue

WHAT is this pull request doing?

GIF of sticky heading width calculated correctly

GIF of truncation with and without fixed first column

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Spin-URL: (shopify/web) https://shop1.shopify.data-table-enhancements.philipp-schofer.us.spin.dev/admin/

Try combinations of the following props:
- truncate on/off
- fixedFirstColumns - 1,2,3 or 0
- stickyHeader on/off
Open the Playground in Safari and ensure everything renders correctly when the above props are combined.

Copy-paste this code in playground/Playground.tsx:

import {Page, Card, DataTable} from '@shopify/polaris';
import React from 'react';

export function Playground() {
  const rows = [
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
  ];

  return (
    <>
      <Page title="Sales by product">
        <Card>
          <DataTable
            columnContentTypes={[
              'text',
              'numeric',
              'numeric',
              'numeric',
              'numeric',
            ]}
            headings={[
              'Product',
              'Price',
              'SKU Number',
              'Net quantity',
              'Net sales',
            ]}
            rows={rows}
            // increasedTableDensity
            // truncate
            stickyHeader
            showTotalsInFooter
            // fixedFirstColumns={2}
            totals={['', '', '', 255, '$155,830.00']}
          />
        </Card>
      </Page>
      <br />
    </>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

github-actions · 2022-08-29T14:32:23Z

size-limit report 📦

Path	Size
polaris-react-cjs	201.15 KB (+0.02% 🔺)
polaris-react-esm	128.97 KB (+0.03% 🔺)
polaris-react-esnext	183.1 KB (+0.03% 🔺)
polaris-react-css	40.62 KB (+0.03% 🔺)

… or `condensed` is `true`.

…than the top

philschoefer · 2022-08-29T15:35:18Z

polaris-react/src/components/DataTable/DataTable.scss

 .FixedFirstColumn {
  position: absolute;
-  background: var(--p-surface);
+  background: inherit;


This used to assume that the table is --p-surface. However that might not be the case. This ensures it always is whatever the defined DataTable background is set to.

philschoefer · 2022-08-29T15:35:54Z

polaris-react/src/components/DataTable/DataTable.scss

-    &:last-of-type {
-      border-right: var(--p-border-divider);
-    }
-  }


No longer needed since now any cell that needs to be separated simply has the Cell-Seperate class.

philschoefer · 2022-08-29T15:36:56Z