fix(component): persist selection across TableNext pages

[chanceaclark]

What?

Enables TableNext to persist selected items across pagination.

Why?

For each page, we were returning the indexes of items without accounting for pagination. If you were on page 2, the indexes you were getting back were { 0: true, 1: true, 2.0: true, ...etc }. This made it difficult to both Selected all products across pages and persist selected items across pages. This update aligns with our vision of moving toward using @tanstack/react-table or other similar headless table API's to power our TableNext component.

Screenshots/Screen Recordings

Screen.Recording.2022-09-26.at.15.11.54.mov

Testing/Proof

Here's the dev.tsx page I used if you want to test it out yourself:

import { TableNext } from '@bigcommerce/big-design/dist/es/components/TableNext';
import React, { useEffect, useState } from 'react';

interface Item {
  name: string;
  children?: Item[];
}

const items = new Array(25).fill(undefined).map<Item>((_, index) => ({
  name: `Hello ${index}`,
  children: [{ name: `Child ${index}` }, { name: `Child ${index}` }],
}));

const DevPage = () => {
  const [currentPage, onPageChange] = useState(1);
  const [itemsPerPage, onItemsPerPageChange] = useState(10);
  const [selectedItems, onSelectionChange] = useState<Record<string, true>>({});
  const [pagedItems, setPagedItems] = useState<typeof items>([]);
  const [expandedRows, onExpandedChange] = useState({});

  useEffect(() => {
    setPagedItems(
      items.filter(
        (_item, index) =>
          index >= (currentPage - 1) * itemsPerPage && index < currentPage * itemsPerPage,
      ),
    );
  }, [currentPage, itemsPerPage]);

  return (
    <TableNext
      columns={[{ hash: 'name', header: 'Name', render: ({ name }) => name }]}
      expandable={{
        expandedRows,
        onExpandedChange,
        expandedRowSelector: ({ children }) => {
          if (children) {
            return children;
          }

          return undefined;
        },
      }}
      itemName="Worlds"
      items={pagedItems}
      pagination={{
        currentPage,
        onPageChange,
        itemsPerPage,
        totalItems: items.length,
        onItemsPerPageChange,
        itemsPerPageOptions: [10, 20, 30],
      }}
      selectable={{ onSelectionChange, selectedItems }}
    />
  );
};

export default DevPage;

// global.d.ts

// ...

declare module '@bigcommerce/big-design/dist/es/components/TableNext' {
  export * from '@bigcommerce/big-design/dist/components/TableNext';
}

[jorgemoya]

Maybe this was discussed before, but shouldn't select 25 select them all? I would've expected all items to be selected across pagination. This still works to persist selection.

Is this just a different ticket issue?

[chanceaclark]

Maybe this was discussed before, but shouldn't select 25 select them all? I would've expected all items to be selected across pagination. This still works to persist selection.

Is this just a different ticket issue?

Yeah we've discussed this before. The "Select all" checkbox should just select all the items on the current page. We have another pattern to "Select everything" using bulk actions.

[jorgemoya]

Looks good to me.