[DataTable] Update DataTable summary row implementation to support columnContentTypes

[philschoefer]

Currently the summary row in DataTable does not properly inherit columnContentTypes given in the prop. Usually this results in no problems as 99% of the time summary rows display numerical values.

As per given logic numerical values are left aligned and string values are right aligned. In shopify/web we have a case where a string field has a summary row where alignment is now incorrect.

While it is debatable whether this should be the case in the Admin, it probably makes more sense for summary rows to inherit the columnContentType for each column, so we allow for consumers to decide how they want to use these.

WHY are these changes introduced?

https://github.com/Shopify/core-issues/issues/47369

WHAT is this pull request doing?

Before/After Screenshots

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';

import {Page, Card, DataTable} from '../src';

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

  return (
    <Page title="Sales by product">
      <Card>
        <DataTable
          columnContentTypes={['text', 'numeric', 'numeric', 'text', 'numeric']}
          headings={[
            'Product',
            'Price',
            'SKU Number',
            'Last updated date',
            'Net sales',
          ]}
          rows={rows}
          totals={['', '', '', 'Nov 8, 2022', '$155,830.00']}
        />
      </Card>
    </Page>
  );
}

🎩 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]

size-limit report 📦

Path	Size
polaris-react-cjs	210.03 KB (+0.01% 🔺)
polaris-react-esm	136.15 KB (+0.01% 🔺)
polaris-react-esnext	191.36 KB (+0.01% 🔺)
polaris-react-css	41.4 KB (0%)

[kyledurand]

Code looks good enough to me. Do you need to /snapit before merging to make sure it doesn't break any tests / type checks in web?

[philschoefer]

/snapit

[github-actions]

🫰✨ Thanks @philschoefer! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221110194357

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221110194357

yarn add @shopify/polaris@0.0.0-snapshot-release-20221110194357

[philschoefer]

Works well: https://admin.web.summary-row-issue.philipp-schofer.us.spin.dev/store/shop1/reports/sell_through_rate?since=-33d&until=-3d