How to build an Actionable data table with react table and tailwindcss

In this article, we will see how to build an Actionable data table using a react table and tailwindcss. Data table is an important UI element for the application dashboard. It is always important to know how to build a reliable data table in frontend development.

What is a Data table?

Before going into the technical part of it. let's try to understand what is a data table and why it's important as in user's perspective.

Data table is clear representation of a list of data. it is a way of representing the data in rows and columns.

Why it is important?

Consider that you are running a e-commerce store with online services. you want to see the monthly orders in a nice represented format and you also want to know from the most frequent purchased item in the particular month.

One of the traditional approach is to manage all those data in the excel or google sheet. you can still do that. but, it will be cumbersome once it became large set of data.

Here comes the role of data tables. basically, you manage all the reports data in a table with all the functionalities such as sorted order, filtering option and paginated data.

it will help you manage your data in a easy way with all the features.

Demo

Here, we are going to build a smart data table where we can add rows dynamically into the table and add/edit data in the data table itself.

Setup and Install

Here, we need a client application which will have data table. then it sends the data to server which saves the data to google sheet.

But, this article is mainly going to focus on building data table using react table. if you want to learn how to integrate google sheet in nodejs. checkout this article

let's create a react application using the command, create-react-app

1npx create-react-app client

Now, you will have a react application inside your root directory.

After that, install react-table which is a headless ui for creating a table in react application.

1npm i react-table

finally, let's install tailwindcss in your react application. i don't want go deep into this one, because there are already a well-written tutorials on this setup. checkout this article

Getting started

Firstly, A table contains mainly rows and columns. same goes for the react table. so, you need to pass data and columns in the react table hooks to render the columns and rows.

let's create a react table component which takes columns and rows are argument to render the table.

1import React from "react";
2import { useTable } from "react-table";
3
4const Table = ({ columns, data }) => {
5  const {
6    getTableProps,
7    getTableBodyProps,
8    headerGroups,
9    rows,
10    prepareRow,
11    state,
12  } = useTable({
13    columns,
14    data,
15
16  });
17
18  return (
19    //Render UI Here
20  );
21};
22
23export default Table;

Here, we take columns and data as props and pass it to hooks called useTable which returns some props to render the table component in our component.

let's break it down one by one to understand it better,

For any table, we will have html semantics such as table , th,tbody , tr and td. we need some properties for this semantics to make it work properly. for example, to create a pagination or filter logic from scratch. you might need to access the html elements.

react-table provides this functionalities out of the box. to do this, you need to map the props from the useTable hooks to your HTML elements.

that's the purpose of the props from useTable hooks.you can also override these properties with your custom one. some of the props are getTableProps , getTableBodyProps etc.

1<table className="min-w-full divide-y divide-gray-200"
2{...getTableProps()} />
3
4</table>

Here, we have the table with getTableProps props from react table mapped with it.

like that, we need to render the thead,tbody etc

1<thead>
2  {headerGroups.map(headerGroup => (
3    <tr {...headerGroup.getHeaderGroupProps()}>
4      {headerGroup.headers.map(column => (
5        <th
6          className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
7          {...column.getHeaderProps()}
8        >
9          {column.render("Header")}
10        </th>
11      ))}
12    </tr>
13  ))}
14</thead>

important thing to note here is, headerGroup return headers which is going to be the headers of the table.

After that, we renders the tbody with same kind of pattern,

1<tbody className="bg-white divide-y divide-gray-200" {...getTableBodyProps()}>
2  {rows.map((row, i) => {
3    prepareRow(row)
4    return (
5      <tr {...row.getRowProps()}>
6        {row.cells.map(cell => {
7          return (
8            <td
9              className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"
10              {...cell.getCellProps()}
11            >
12              {cell.render("Cell")}
13            </td>
14          )
15        })}
16      </tr>
17    )
18  })}
19</tbody>

See the full Table/index.js component here,

1import React from "react"
2import { useTable } from "react-table"
3
4const Table = ({ columns, data }) => {
5  const {
6    getTableProps,
7    getTableBodyProps,
8    headerGroups,
9    rows,
10    prepareRow,
11    state,
12  } = useTable({
13    columns,
14    data,
15  })
16
17  return (
18    <div className="flex flex-col w-full">
19      <div className="-my-2 py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
20        <div className="align-middle inline-block min-w-full shadow sm:rounded-lg border-b border-gray-200">
21          <table
22            className="min-w-full divide-y divide-gray-200"
23            {...getTableProps()}
24          >
25            <thead>
26              {headerGroups.map(headerGroup => (
27                <tr {...headerGroup.getHeaderGroupProps()}>
28                  {headerGroup.headers.map(column => (
29                    <th
30                      className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
31                      {...column.getHeaderProps()}
32                    >
33                      {column.render("Header")}
34                    </th>
35                  ))}
36                </tr>
37              ))}
38            </thead>
39            <tbody
40              className="bg-white divide-y divide-gray-200"
41              {...getTableBodyProps()}
42            >
43              {rows.map((row, i) => {
44                prepareRow(row)
45                return (
46                  <tr {...row.getRowProps()}>
47                    {row.cells.map(cell => {
48                      return (
49                        <td
50                          className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"
51                          {...cell.getCellProps()}
52                        >
53                          {cell.render("Cell")}
54                        </td>
55                      )
56                    })}
57                  </tr>
58                )
59              })}
60            </tbody>
61          </table>
62        </div>
63      </div>
64    </div>
65  )
66}
67
68export default Table

Let's import the Table component inside our parent component and pass the required data as props.

add the following code in the App.js,

1import React, { useState, useEffect } from "react"
2import Table from "./components/Table"
3
4function App() {
5  const [rowdata, setRowData] = useState([])
6
7  const onAddRowClick = () => {
8    setRowData(
9      rowdata.concat({ username: "", email: "", gender: "", phone: "" })
10    )
11  }
12
13  const columns = [
14    {
15      Header: "Name",
16      accessor: "username",
17    },
18    {
19      Header: "Email",
20      accessor: "email",
21    },
22    {
23      Header: "Gender",
24      accessor: "gender",
25    },
26    {
27      Header: "Phone",
28      accessor: "phone",
29    },
30  ]
31
32  return (
33    <div className="container mx-auto">
34      <button
35        onClick={onAddRowClick}
36        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
37      >
38        Add Row
39      </button>
40      <div className="flex justify-center mt-8">
41        <Table columns={columns} data={rowdata} />
42      </div>
43    </div>
44  )
45}
46
47export default App

Here, we have columns and rows passed into the Table component. An important thing to note is the structure of columns array. it contains Header and accessor.

Header is what we render inside Table th if you remember,

1{
2  column.render("Header")
3}

accessor is referring to the row name to render in the Table component.

So far, we have seen how to render columns and rows inside the Table. let's see how to render the editable cell inside the row.

Render Editable Cell

To render a editable cell, you need render the custom cell component inside the columns array.

create a component EditableCell/index.js and add the following code,

1import React from "react"
2
3const EditableCell = ({
4  value: initialValue,
5  row: { index },
6  column: { id },
7  updateMyData, // This is a custom function that we supplied to our table instance
8}) => {
9  // We need to keep and update the state of the cell normally
10  const [value, setValue] = React.useState(initialValue)
11
12  const onChange = e => {
13    setValue(e.target.value)
14  }
15
16  // We'll only update the external data when the input is blurred
17  const onBlur = () => {
18    updateMyData(index, id, value)
19  }
20
21  // If the initialValue is changed external, sync it up with our state
22  React.useEffect(() => {
23    setValue(initialValue)
24  }, [initialValue])
25
26  return <input value={value} onChange={onChange} onBlur={onBlur} />
27}
28
29export default EditableCell

Here, we pass the few values and functions as props. let's break it down one by one,

value - it returns the value to the custom cell, you will need the initial value to render it inside the component
row - it returns the value of row that you are inserted the cell into.
column - it returns the value of columns that you are adding the cell into.
updateMyDate - it is a props to update the parent component on the onBlur event

you need to map the custom component inside the columns array

1const columns = [
2  {
3    Header: "Name",
4    accessor: "username",
5    Cell: EditableCell,
6  },
7  {
8    Header: "Email",
9    accessor: "email",
10    Cell: EditableCell,
11  },
12  {
13    Header: "Gender",
14    accessor: "gender",
15    Cell: ({
16      value: initialValue,
17      row: { index },
18      column: { id },
19      updateMyData,
20    }) => {
21      const onItemClick = value => {
22        console.log("value", value)
23        updateMyData(index, id, value)
24      }
25
26      return (
27        <DropDown
28          options={[
29            { label: "Male", value: "male" },
30            { label: "Female", value: "female" },
31          ]}
32          title={"Select Gender"}
33          selectedValue={initialValue}
34          onItemClick={onItemClick}
35        />
36      )
37    },
38  },
39  {
40    Header: "Phone",
41    accessor: "phone",
42    Cell: EditableCell,
43  },
44]

if you watch it carefully, we inserted a dropdown in the same we implemented the custom Input.

Search and Filter

finally, you need to implement the search and filter functionality for data table. it is going to be simple, since we render the search and filter outside of our Table component.

we don't need to implement it inside Table. we can directly manipulate our parent component state and filter the data based on search or filter input.

1const [rowdata, setRowData] = useState([])
2const [filteredData, setFilteredData] = useState([])
3
4// Searchbar functionality
5const onSearchbarChange = e => {
6  const value = e.target.value
7
8  if (value === "") {
9    setFilteredData(rowdata)
10  } else {
11    if (filteredData.length > 0) {
12      const result = filteredData.filter(item => item.email === value)
13
14      setFilteredData(result)
15    } else {
16      const result = rowdata.filter(item => item.email === value)
17
18      setFilteredData(result)
19    }
20  }
21}
22
23// Filter functionality
24const onItemClick = e => {
25  console.log("e", e)
26  if (e === "all") {
27    setFilteredData(rowdata)
28  } else {
29    const result = rowdata.filter(item => item.gender === e)
30
31    setFilteredData(result)
32  }
33}

Conclusion

It is important to know how to build a data table in your web development career. because, you might need to implement it in some point of time in your development life. keep exploring the concept of it and practice a lot to become better at it.

Source Code