BREAKING: refactor useTable to be composable

[ling1726]

⚠️ BREAKING CHANGE

This PR refactors the useTable API to be more composable. The useTable hook now accepts plugins that will modify/enhance the state.

Due to typescript limitations, the state is completely typed on our side and any extension that's not an officially supported plugin will need to extend types in userland. The main benefit is that future features for the table can be more SOLID through the implementation of plugins.

The plugins in theory can be order dependent, however there is no plugin that has this limitation.

Current Behavior

All functionality was configured on the single useTable hook.

const {
    rows,
    sort: { getSortDirection, toggleColumnSort },
  } = useTable({ columns, items, defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } });

New Behavior

Functionality should be composed from the useTable hook using other react hooks that are plugins for the table state. Unless the relevant hook plugin is used, the user will have default state which is essentially a more complex noop

const {
    getRows,
    sort: { getSortDirection, toggleColumnSort, sort },
  } = useTable(
    {
      columns,
      items,
    },
    [useSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } })],
  );

Prototypes of other plugins such as pagination and column sizing can be found in #24944

Related Issue(s)

Fixes #24226

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	189.188 kB 52.396 kB
react-components react-components: FluentProvider & webLightTheme	33.4 kB 11.008 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB

_{🤖 This report was generated against 5129090c2dedbaf91b8441898788413992c556e3}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 5129090c2dedbaf91b8441898788413992c556e3 (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1573	1556	5000
Button	mount	1100	1067	5000
FluentProvider	mount	1841	1789	5000
FluentProviderWithTheme	mount	660	662	10
FluentProviderWithTheme	virtual-rerender	612	670	10
FluentProviderWithTheme	virtual-rerender-with-unmount	654	669	10
MakeStyles	mount	2150	2119	50000
SpinButton	mount	3069	3017	5000

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit edf133a:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[bsunderhus]

nit: Would be nice to add a comment here explaining why this is not a big deal.

[bsunderhus]

nit: Would be nice to add a comment here explaining why this is not a big deal.