How to implement React Table Project Setup and useTable

In this article We will learn how to implement react table in our project and understand each and every thing.
So let's install react in our system.

npx create-react-app rtdemo
cd rtdemo
npm start

We will use this module for displaying the table. React Table is a collection of hooks for building powerful tables and Datagrid experiences. These hooks are lightweight, composable, and ultra-extensible, but do not render any markup or styles for you. This effectively means that React Table is a "headless" UI library.

React Table is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements. You are in charge of utilizing the state and callbacks of the hooks provided by this library to render your own table 0markup.

Now install react table module. React Table is compatible with React v16.8+ and works with ReactDOM and React Native.

npm install react-table --save

Edit APP.js file and add following code.

import React, { useState, useEffect, useMemo } from "react";
import { useTable } from "react-table";
const App = (props) => {
const [tutorials, setTutorials] = useState([]);
const retrieveTutorials = () => {
const { tutorials, totalPages } = {
tutorials: [
{
invoice_date: "18 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "19 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "20 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "21 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "22 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "23 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
],
totalPages: 1,
};
setTutorials(tutorials);
};
useEffect(retrieveTutorials, []);
const columns = useMemo(
() => [
{
Header: "Date",
accessor: "invoice_date",
},
{
Header: "Vendor",
accessor: "company",
},
{
Header: "Invoice No.",
accessor: "invoice_no",
},
],
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data: tutorials,
});
return (
<div>
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
{tutorials.length > 0 ? (
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
) : (
<tbody>
<tr>
<td colSpan="8">
<figure className="noRecord-found"></figure>
<span className="norecord-text">No records found</span>
</td>
</tr>
</tbody>
)}
</table>
</div>
);
};
export default App;

Here we are using useState, useEffect, useMemo hooks.

useState : The useState hook is a special function that takes the initial state as an argument and returns an array of two entries. Syntax: The first element is the initial state and the second one is a function that is used for updating the state. … And the value returned by the function will be used as the initial state.

useEffect : What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing the DOM updates.

useMemo : React has a built-in hook called useMemo that allows you to memoize expensive functions so that you can avoid calling them on every render. You simple pass in a function and an array of inputs and useMemo will only recompute the memoized value when one of the inputs has changed.

useTable : useTable is the root hook for React Table. To use it, pass it with an options object with at least a columns and data value, followed by any React Table compatible hooks you want to use.

getTableProps : This function is used to resolve any props needed for your table wrapper.

getTableBodyProps : This function is used to resolve any props needed for your table body wrapper.

headerGroups : An array of normalized header groups, each containing a flattened array of final column objects for that row.

rows : An array of materialized row objects from the original data array and columns passed into the table options.

prepareRow : This function is responsible for lazily preparing a row for rendering. Any row that you intend to render in your table needs to be passed to this function before every render.

Why? Since table data could potentially be very large, it can become very expensive to compute all of the necessary states for every row to be rendered regardless if it actually is rendered or not (for example if you are paginating or virtualizing the rows, you may only have a few rows visible at any given moment). This function allows only the rows you intend to display to be computed and prepped with the correct state.

So this was all about implementing the basics of React Table using useTable. I hope you have understood the example.

You can also check out YouTube channel: https://www.youtube.com/channel/UCOWT2JvRnSMVSboxvccZBFQ