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

In Data Table II, we built a users data table that displays users in a paginated format and allows for sorting rows by specific columns in both ascending and descending order.

However, the DataTable component is tightly coupled to the user data it is meant to be rendered and cannot be used for other types of data.

Generalize the component to take in the data and any necessary configuration so that the DataTable component can render any kinds of data.

Requirements

• The DataTable component should not contain any logic that is specific to users.
• Modify the DataTable component to take in any props/attributes necessary to be generalized.
• The appearance and functionality of the end result should remain – it should look the same and still allow for pagination and sorting.

To assist in your testing, another data set (src/data/houses.json) is being provided for you to test your generalized component with.

Hint: Have a look at TanStack Table to get a sense of the configuration approach and available options for production-ready data table libraries.

Notes

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

Solution

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

While a refactoring question will probably not be asked verbatim during interviews, there is a lot of learning value from this exercise.

You can also build your data tables in a similar fashion from the start so that it can be easily extended for the new requirements.

Decoupling the component

Notice that the header columns have already been declared as an array. We can use that as a base. Let's look at which parts of the DataTable are still coupled to user data:

1. sortUsers function