/react-table-example

React-Table v7 with Typescript and Material-UI

Primary LanguageTypeScriptMIT LicenseMIT

React Table Example

This demo is forked from : https://github.com/ggascoigne/react-table-example

Demo of React Table V7 using TypeScript as well as Material UI

  • yarn and yarn start to run and edit the example

This example uses:

  • useGroupBy to enable header groups
  • useFilters for per-column filters. Note that filters are displayed in a separate filter dropdown rather than being embedded in each column header.
  • useSortBy for column sorting
  • useExpanded to allow expansion of grouped columns
  • useFlexLayout for a scalable full width table
  • usePagination for pagination
  • useResizeColumns for resizable columns
  • useRowSelect for row selection

Other features:

  • Demonstrates hiding columns.
  • use react-json-view to optionally display the table instance for better exploration.
  • use useLocalStorage and useDebounce, both from https://usehooks.com to persist table settings.

Cleanup I did:

  • Remove makeStyles calls from MUI and replace it with emotion
  • The following pages has been done:
    • TooltipCell.tsx
    • TablePagination.tsx (Removed MUI pagination, re-write)
    • ResizeHandle.tsx
    • Table.tsx (50%)
    • TableStyles.tsx (50% done, need to clean styled)

Todo:

  • Remove the dependency from MUI, find the alternatives for the following:

    • MUI Popover

  • The current example is using MUI 4, if we have to use MUI components (e.g. Popover), we need to upgrade to MUI 5.