feat(component): add responsiveness to table components plus stateless table

[davelinke]

What?

Adds responsiveness to public table components and creates a low-level stateless table option

Why?

Historically responsiveness on table has been one of our main gaps in mobile experience. This PR adds a default responsive view to tables. It also creates a low-level stateless table for applications where the table format is not aligned with the high-level components we already have

Screenshots/Screen Recordings

Testing/Proof

dev.tsx code

import React, { FunctionComponent, useState } from 'react';
import {
  Button,
  Checkbox,
  Table,
  TableItem,
  Dropdown,
  Panel,
  Box,
  StatelessTable,
  TBody,
  TR,
  TD,
  THead,
  TH,
  StatefulTable,
  TableFigure,
  Text,
} from '@bigcommerce/big-design';
import { MoreHorizIcon } from '@bigcommerce/big-design-icons';

import styled from 'styled-components';
import { BoxProps } from '@bigcommerce/big-design';

/**
 * Interface for defining the structure of an item in the table.
 */
interface Item extends TableItem {
  sku: string;
  name: string;
  stock: number;
  image: string;
  categories: string;
  price: string;
}

/**
 * Mock data for the items to be displayed in the table.
 */
const data: Item[] = [
  // Sample data for items
  {
    sku: '649C853EC78E9',
    image: 'unisex-tri-blend-t-shirt-athletic-grey-triblend-front-649c8533a9535__28840.jpg',
    name: 'US H1 2023 Hackathon T-Shirt',
    categories: 'Shirts, Shop all',
    stock: 10,
    price: '$27.00',
  },
  {
    sku: '63F7E833D2F85',
    image: 'unisex-tri-blend-t-shirt-charcoal-black-triblend-back-63f7e82d1ec00__11413.jpg',
    name: 'Built For Growth T-Shirt',
    categories: 'Shirts, Shop all',
    stock: 77,
    price: '$36.00',
  },
  {
    sku: '63F6D66B58B96',
    image: 'stainless-steel-tumbler-white-front-63f6d6648c6bb__16236.jpg',
    name: 'City Pattern Tumbler',
    categories: 'New, Shop all',
    stock: 6,
    price: '$23.00',
  },
  {
    sku: '63F6D301C5F1C',
    image: 'stainless-steel-tumbler-black-front-63f6d2fb75b9e__30788.jpg',
    name: 'Logo Tumbler',
    categories: 'New, Shop all',
    stock: 3,
    price: '$21.00',
  },
  {
    sku: '63F6D0B2ADA7B',
    image: 'stainless-steel-tumbler-white-front-63f6d0ac552b9__33511.jpg',
    name: 'Patterned Tumbler',
    categories: 'New, Shop all',
    stock: 0,
    price: '$23.00',
  },
  {
    sku: '63F6D0B2ADA7C',
    image: 'tie-dye-hat-cotton-candy-front-6283b883884fa__86520.jpg',
    name: `Community Tie Dye Hat "Celebrity"`,
    categories: 'Baseball caps, S...',
    stock: 0,
    price: '$18.00',
  },
  {
    sku: '626C6BABE588D',
    image: 'unisex-tri-blend-t-shirt-white-fleck-triblend-front-626c6ba2622f1__53288.jpg',
    name: 'I Love Small Businesses Unisex T-Shirt',
    categories: 'Shirts, Shop All',
    stock: 21,
    price: '$29.00',
  },
  {
    sku: '626C6AB917066',
    image: 'kiss-cut-stickers-3x3-default-626c6ab65721c__69931.jpg',
    name: 'I Love Small Businesses 3x3 Sticker',
    categories: 'Stickers, Acces...',
    stock: 31,
    price: '$5.00',
  },
  {
    sku: '626C6A762DEF3',
    image: 'white-glossy-mug-15oz-handle-on-left-626c6a735697e__28707.webp',
    name: 'I Love Small Businesses 15 oz Mug',
    categories: 'Mugs, Accesso...',
    stock: 23,
    price: '$18.00',
  },
  {
    sku: '621E68891BB26',
    image: 'unisex-heavy-blend-hoodie-black-front-621e6e5255811__14735.jpg',
    name: 'Team on a Mission Unisex Hoodie',
    categories: 'Hoodies, Shop...',
    stock: 8,
    price: '$45.00',
  },
];

export const StyledPanelContents = styled.div<BoxProps>`
  display: block;
  box-sizing: border-box;
  margin-inline: -${({ theme }) => theme.spacing.medium};
  max-width: calc(
    100% + ${({ theme }) => theme.spacing.medium}px + ${({ theme }) => theme.spacing.medium}px
  );
  overflow-x: auto;
  @media (min-width: ${({ theme }) => theme.breakpointValues.tablet}) {
    margin-inline: -${({ theme }) => theme.spacing.xLarge};
    max-width: calc(
      100% + ${({ theme }) => theme.spacing.xLarge}px + ${({ theme }) => theme.spacing.xLarge}px
    );
  }
`;

/**
 * Column definitions for the table.
 */
const columns = [
  {
    header: 'Name',
    hash: 'name',
    render: ({ name }: { name: string }) => {
      return name;
    },
  },
  { header: 'Sku', hash: 'sku', render: ({ sku }: { sku: string }) => sku },
  {
    header: 'Categories',
    hash: 'categories',
    render: ({ categories }: { categories: string }) => categories,
  },
  {
    header: 'Stock',
    hash: 'stock',
    render: ({ stock }: { stock: number }) => stock,
  },
  {
    header: 'Price',
    hash: 'price',
    render: ({ price }: { price: string }) => price,
  },
  {
    header: '',
    hash: 'actions',
    isAction: true,
    render: () => {
      return (
        <Dropdown
          items={[
            {
              content: 'Edit',
              onItemClick: (item) => item,
              hash: 'edit',
            },
            {
              content: 'Duplicate',
              onItemClick: (item) => item,
              hash: 'duplicate',
            },
            {
              content: 'Delete',
              onItemClick: (item) => item,
              hash: 'delete',
              actionType: 'destructive',
            },
          ]}
          maxHeight={250}
          placement="bottom-end"
          toggle={
            <Button mobileWidth="auto" variant="utility" iconOnly={<MoreHorizIcon />}></Button>
          }
        />
      );
    },
  },
];

const PageTable: FunctionComponent = () => {
  const [selectedItems, setSelectedItems] = useState<Item[]>([]);

  return (
    <>
      <Box margin={'xxLarge'}>
        <Panel header="Table">
          <StyledPanelContents>
            <Table
              columns={columns}
              itemName="Products"
              items={data}
              keyField="sku"
              selectable={{
                selectedItems,
                onSelectionChange: setSelectedItems,
              }}
              onRowDrop={(items) => {
                console.log('Dropped items:', items);
              }}
            />
          </StyledPanelContents>
        </Panel>
      </Box>

      {/* STATEFUL TABLE */}

      <Box margin={'xxLarge'}>
        <Panel header="Stateful Table">
          <StyledPanelContents>
            <StatefulTable
              columns={columns}
              itemName="Products"
              items={data}
              keyField="sku"
              stickyHeader={true}
            />
          </StyledPanelContents>
        </Panel>
      </Box>

      {/* STATELESS TABLE */}

      <Box margin={'xxLarge'}>
        <Panel header="Stateless Table">
          <StyledPanelContents>
            <StatelessTable>
              <THead>
                <TR>
                  <TH></TH>
                  {columns.map((column) => (
                    <TH key={column.hash}>{column.header}</TH>
                  ))}
                </TR>
              </THead>
              <TBody>
                {data.map((item) => (
                  <TR key={item.sku}>
                    <TD isCheckbox={true}>
                      <Checkbox label="" />
                    </TD>
                    <TD mobileHeader={columns[0].header}>{item.name}</TD>
                    <TD mobileHeader={columns[1].header}>{item.sku}</TD>
                    <TD mobileHeader={columns[2].header}>{item.categories}</TD>
                    <TD mobileHeader={columns[3].header}>{item.stock}</TD>
                    <TD mobileHeader={columns[4].header}>{item.price}</TD>
                    <TD isAction={true}>
                      <Button
                        mobileWidth="auto"
                        variant="utility"
                        iconOnly={<MoreHorizIcon />}
                      ></Button>
                    </TD>
                  </TR>
                ))}
              </TBody>
            </StatelessTable>
          </StyledPanelContents>
        </Panel>
      </Box>

      <Box margin={'xxLarge'}>
        <Panel header="Status Rows Table">
          <StyledPanelContents>
            <TableFigure marginBottom="none">
            <StatelessTable>
              <THead>
                <TR>
                  <TH>Description</TH>
                </TR>
              </THead>
              <TBody>
                <TR status="danger">
                  <TD mobileHeader="Description">A row with danger status</TD>
                </TR>
                <TR status="success">
                  <TD mobileHeader="Description">A row with success status</TD>
                </TR>
                <TR status="warning">
                  <TD mobileHeader="Description">A row with warning status</TD>
                </TR>
                <TR status="info">
                  <TD mobileHeader="Description">A row with info status</TD>
                </TR>
                <TR>
                  <TD mobileHeader="Description">A row with no status</TD>
                </TR>
              </TBody>
            </StatelessTable>
            </TableFigure>
          </StyledPanelContents>
        </Panel>
      </Box>
    </>
  );
};

export default PageTable;

[changeset-bot]

⚠️ No Changeset found

Latest commit: 26e991c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[davelinke]

Hello @bigcommerce/big-design-stewards this is a biggie.

I'd like you to review it before removing the draft state, as it touches many parts of the tables components.

I also used Sonnet to solve a few things, especially tests and such, so please advise if you find something you want to correct.

I also wanna know if this should be a major update.

Thanks in advance for your help!

[chanceaclark]

Hey @davelinke, can we split this StatelessTable addition in another PR. It'll be a little easier for us to review + having separate changesets.