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.
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.
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.
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.
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
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";34const Table = ({ columns, data }) => {5 const {6 getTableProps,7 getTableBodyProps,8 headerGroups,9 rows,10 prepareRow,11 state,12 } = useTable({13 columns,14 data,1516 });1718 return (19 //Render UI Here20 );21};2223export 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()} />34</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 <th6 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 <td9 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"34const Table = ({ columns, data }) => {5 const {6 getTableProps,7 getTableBodyProps,8 headerGroups,9 rows,10 prepareRow,11 state,12 } = useTable({13 columns,14 data,15 })1617 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 <table22 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 <th30 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 <tbody40 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 <td50 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}6768export 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"34function App() {5 const [rowdata, setRowData] = useState([])67 const onAddRowClick = () => {8 setRowData(9 rowdata.concat({ username: "", email: "", gender: "", phone: "" })10 )11 }1213 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 ]3132 return (33 <div className="container mx-auto">34 <button35 onClick={onAddRowClick}36 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"37 >38 Add Row39 </button>40 <div className="flex justify-center mt-8">41 <Table columns={columns} data={rowdata} />42 </div>43 </div>44 )45}4647export 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.
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"23const EditableCell = ({4 value: initialValue,5 row: { index },6 column: { id },7 updateMyData, // This is a custom function that we supplied to our table instance8}) => {9 // We need to keep and update the state of the cell normally10 const [value, setValue] = React.useState(initialValue)1112 const onChange = e => {13 setValue(e.target.value)14 }1516 // We'll only update the external data when the input is blurred17 const onBlur = () => {18 updateMyData(index, id, value)19 }2021 // If the initialValue is changed external, sync it up with our state22 React.useEffect(() => {23 setValue(initialValue)24 }, [initialValue])2526 return <input value={value} onChange={onChange} onBlur={onBlur} />27}2829export default EditableCell
Here, we pass the few values and functions as props. let's break it down one by one,
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 }2526 return (27 <DropDown28 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.
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([])34// Searchbar functionality5const onSearchbarChange = e => {6 const value = e.target.value78 if (value === "") {9 setFilteredData(rowdata)10 } else {11 if (filteredData.length > 0) {12 const result = filteredData.filter(item => item.email === value)1314 setFilteredData(result)15 } else {16 const result = rowdata.filter(item => item.email === value)1718 setFilteredData(result)19 }20 }21}2223// Filter functionality24const 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)3031 setFilteredData(result)32 }33}
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.
No spam, ever. Unsubscribe anytime.