Note: This is a follow up to the Data Table III question, you should complete that question first before attempting this question.

In Data Table III, we built a generalized data table that displays rows in a paginated format and allows for sorting rows by specific columns in both ascending and descending order. The DataTable component is not coupled to the data and can be used to render any type of data.

Extend the DataTable component to allow per-column filtering functionality.

Requirements

• Each column can be configured to have a filter input within the header cell
• The filter input filters rows that match the value of the input
• Supported types of filters:
  • Text search: For string fields. Match data based on case-insensitive string comparisons
  • Range search: For numerical fields. To keep things simple, use two text fields, indicating the min/max values. Match if the value lies between the provided min/max value
• If any filter inputs are empty or invalid, they should be ignored
• Only rows that pass all the filter criteria present should remain

To assist in your testing, another table has been rendered using houses data (src/data/houses.json). Feel free to comment out any code while working on the question. You should test your final solution with both datasets to ensure that the component remains generalized and flexible.

Hint: Have a look at this TanStack Table Column Filters example if you need inspiration on designing an API for adding filters.

Notes

The skeleton code uses the solution of Data Table III, but you are free to use your own solution as a starting point.

Solution

We'll build on top of Data Table III's solution.

In Data Table III, the DataTable implementation was generalized and no longer contains any code that is specific to users data. We need to preserve this generalization when extending the component with filtering functionality.

There are a few things that need to be done:

1. Add column-specific filter input UI in the header cell
2. Store the filter input state
3. Allow the DataTable component to read the filter inputs state and use it when filtering data. Filtering has to be done before sorting and pagination occurs.