[Data Table] Add zebra striping to table and change table density

[blboyle]

As you look at the examples below, you will see examples of this bug, related to the Card component. #5377 I updated this PR to make the border radius of the table match the Card.

WHY are these changes introduced?

• Visual consistency and alignment with Index table updates.
• Facilitate data scanning through visual treatment of rows.
  (Ping @mirualves if you have UX questions)

WHAT is this pull request doing?

Density changes

This PR will reduce the padding around the cells to allow for a higher data density. It also aims to align with the visual changes and improvements coming soon to the Index Table component.

Before
After

Zebra striping

This PR will update the data table to have the zebra striping where the first row is a dark colour and it alternates between that and the white colour for each subsequent row.

The alternating rows (zebra stripes) help users scan data more efficiently, especially for long horizontal datasets. The users may lose their place when parsing large datasets without alternating rows.

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';

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

const rows = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3],
];
const rowsEven = [
  [1, 2, 3],
  [1, 2, 3],
];

const totals = [4, 5, 6];

const headings = ['one', 'two', 'three'];

const props = {
  increasedTableDensity: true,
  hasZebraStripingOnData: true,
  rows,
  headings,
};

export function Playground() {
  return (
    <Page title="Playground">

      <Heading>Simple</Heading>
      <Card>
        <DataTable
          {...props}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          sortable={[true, false, true]}
        />
      </Card>
      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          sortable={[true, false, true]}
        />
      </Card>
      <Heading>With footer</Heading>
      <Card>
        <DataTable
          {...props}
          rows={rows}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          footerContent="Hi, this is the footer"
          sortable={[true, false, true]}
        />
      </Card>
      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          footerContent="Hi, this is the footer"
          sortable={[true, false, true]}
        />
      </Card>
      <Heading>Totals on top, no footer</Heading>
      <Card>
        <DataTable
          {...props}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          sortable={[false, true, true]}
        />
      </Card>
      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          sortable={[false, true, true]}
        />
      </Card>
      <Heading>Totals at bottom, no footer</Heading>
      <Card>
        <DataTable
          {...props}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          showTotalsInFooter
          sortable={[false, false, true]}
        />
      </Card>
      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          showTotalsInFooter
          sortable={[false, false, true]}
        />
      </Card>
      <Heading>Totals at bottom, with footer</Heading>
      <Card>
        <DataTable
          {...props}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          showTotalsInFooter
          footerContent="Hi, this is the footer"
          sortable={[true, false, false]}
        />
      </Card>

      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          showTotalsInFooter
          footerContent="Hi, this is the footer"
          sortable={[true, false, false]}
        />
      </Card>
      <Heading>Totals at top, with footer</Heading>
      <Card>
        <DataTable
          {...props}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          footerContent="Hi, this is the footer"
          sortable={[true, false, false]}
        />
      </Card>
      <Card>
        <DataTable
          {...props}
          rows={rowsEven}
          headings={headings}
          columnContentTypes={['numeric', 'numeric', 'numeric']}
          totals={totals}
          footerContent="Hi, this is the footer"
          sortable={[true, false, false]}
        />
      </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
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

size-limit report 📦

Path	Size
cjs	157.87 KB (+0.12% 🔺)
esm	89.19 KB (+0.15% 🔺)
esnext	138.66 KB (+0.36% 🔺)
css	36.69 KB (+0.79% 🔺)

[sarahill]

Updates visually lgtm 👍 ❇️

[philschoefer]

LGTM!

[ghost]

🎉 Thanks for your contribution to Polaris React!