How To Create a Table With Expandable Rows in React

A quick guide to sometimes such a desirable feature

Have you ever needed a table whose rows can be expanded and, when expanded, some arbitrary content can be rendered inside? If yes, I’ve got you covered!

In this tutorial we will create such a table and to make it a little bit more interesting, the table will contain the movies that I enjoy re-watching the most.

Preparations

Let’s start with creating a new react app and clearing all the styles and components (except App.js ) that come with it.

The table component

Our table will except three parameters:

1. items — an array of elements that will be rendered.
2. columns — an array that defines how many columns the table will have and how each cell will be rendered.
3. renderExpendedRow — a function that allows rendering of arbitrary content when a row is expanded.

Let’s create a new folder expandableTable with a couple of files inside: ExpandableTable.js , index.js and styles.css .

ExpandableTable.js :

import './styles.css';

export const ExpandableTable = ({ columns, items…