The Table component is a powerful React component, based on TanStack's @tanstack/react-table headless library, that provides advanced filtering, sorting, column visibility, and exporting functionality. It also includes support for saving filter/sorting/column layout states, although this functionality is currently disabled due to server-side dependencies. This Table component is set-up with advanced memoization to increase performance by reducing the number of unnecessary re-renders while the Context Provider modifies state. The next evolution of this table that I would like to explore is replacing the Context Provider set-up with multiple singles via Preact's Signals library.
To run the project, follow these steps:
- Clone the repository:
git clone https://github.com/CowDotDev/TanStack-React-Table
- Install the dependencies
cd TanStack-React-Table && npm i
- Start the application
npm start
The Table component includes the following features:
- Filtering: Users can filter the table data based on specific criteria.
- Sorting: Users can sort the table data by one or more columns.
- Column Visibility: Users can hide or show columns in the table.
- Exporting: Users can export the table data in various formats (e.g., CSV, Excel).
The Table component is built using React and leverages a React Context Provider for state management. It utilizes codegen hooks and types generated from a GraphQL API schema to ensure type security and provide TypeScript IntelliSense.