Demo data table grid built with ag-grid-react. Additional external filter integrated with react-select drop down component.
Demo project can be viewed deployed here.
- Name - integrated "contains" text filter
- Created - Date Picker range filter
- Asset Type - integrated external filter with react-select drop down.
- Is Crown Jewel - custom icon displayed based on boolean logic. Can update boolean value of cells.
The external react-select drop down was integrated because the ag-grid integrated set filters are "enterprise only" feature and not free. The logic implemented is for the react-select component to update state that is shared by the parent component of the table and select. The parent component then uses the ag-grid api to update a custom external filter on the ag-grid.
Project was scaffolded using Vite + React + Typescript template.
To run locally
git clone
npm install
npm run dev
Unit testing with vitest
npm run test