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 the user’s perspective.
The data table is a 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 an 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 frequently 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 in sorted order, filtering option and paginated data.
it will help you manage your data in an 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.
Setup and Install
Here, we need a client application that will have a data table. then it sends the data to the server which saves the data to google sheet.
But, this article is mainly going to focus on building a 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
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.
finally, let’s install TailwindCSS in your react application. I don’t want to go deep into this one, because there are already 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 that takes columns and rows are arguments to render the 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 these 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.
Here, we have the table with getTableProps props from react table mapped with it.
like that, we need to render the thead, tbody etc
an 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,
See the full Table/index.js component here,
Let’s import the Table a component inside our parent component and pass the required data as props.
add the following code in the App.js,
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,
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 an editable cell, you need to render the custom cell component inside the columns array.
create a component EditableCell/index.js and add the following code,
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 have 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
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.
Conclusion
It is important to know how to build a data table in your web development career. because you might need to implement it at some point in time in your development life. keep exploring the concept of it and practice a lot to become better at it.
Originally published at https://cloudnweb.dev.