Member-only story
Generic Table component with React and Typescript
Display any kind of data using the same table component while enjoying the benefits of typescript features.
A very common use case is to be able to list multiple types of data using tables. This happens quite frequently in dashboards for instance.
For example, an e-commerce dashboard might want to display a table to list the items they have in their stock, and in another table, they want to display the list of client addresses.
When using React with Typescript we want to explore as much as possible the typing benefits it brings to us by creating a consistent component API. Which is both pleasant to work with and also powerful.
We’ll illustrate this by creating a simple Table component which provides us the basic functionality to have a generic table which deals primarily with 3 things:
- Displaying primitives types (string, numbers, and booleans) out of the box.
- Table Headers
- Custom rendering of data for advanced types, such as Object or Array.
