Olorì Àṣàbí

Posted on Sep 8, 2022

How to create table with data grid, checkbox and pagination using React table and Tailwind CSS.

#react #tailwindcss #datagrid #table

In this tutorial, we will be learning how to build a smart React data table UI with many functionalities such as searching, row and column selection, customised pagination using numbers using react-table and styling with Tailwind CSS.

Make sure you have the necessary requirements.

Node.js installed
Code editor ( Visual Studio Code preferably )
Basic knowledge of React

React Table

React-Table UI library is very lightweight and offers all the basic features necessary for displaying data on any simple table. For most developers, when building a dashboard displaying data in form of a table with columns is usually necessary and required, react-table provides features like search, filters, and sorting, pagination and many more.

First, let’s get started by creating our application using Create React App and installing all necessary dependencies by running the following commands:



npx create-react-app react-table-dashboard
cd react-table-dashboard
npm instal react-table

Setting Up Our project by a data folder with a dummy.js to provide the necessary data to display on our table.



export const customersData = () => {
  const data = [
  {
    customerID: 1001,
    customer: 'Nirav Joshi',
    CustomerEmail: 'nirav@gmail.com',
    imgUrl:
      avatar2,
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    selected: false,
    customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1002,
    customer: 'Sunil Joshi',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerEmail: 'sunil@gmail.com',
    Status: 'Active',
    imgUrl:
      avatar3,
          customerNumber: "+234 803 0000",
      selected: false,
  },
  {
    CustomerID: 1003,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Failed',
    CustomerEmail: 'andrew@gmail.com',
    imgUrl:
      avatar4,
      customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1004,
    customer:'Christopher Jamil',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerEmail: 'jamil@gmail.com',
    imgUrl:
      avatar,
          customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1005,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerName: 'Michael',
    customerEmail: 'michael@gmail.com',
   imgUrl:
      avatar2,
        customerNumber: "+234 803 0000",
  },
 {
    CustomerID: 1005,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerName: 'Michael',
    customerEmail: 'michael@gmail.com',
    imgUrl:
      avatar2,
        customerNumber: "+234 803 0000",
  }

];
 return [data]
}

And creating a file in src/Table.js, we'll mostly use the code of the basic example from the React Table docs.

Let’s create the basic UI with the useTable Hook. We will create a new Table component that will accept two props: data and columns. data is the data we got through the dummy data we created, and columns is the object to define the table columns (headers, rows, how the row will be shown, etc.).



import React, {useMemo} from 'react';
import { customersData } from '../data/dummy';

function Table() {
     const columns = useMemo(() => [
      {
        Header: "Customer",
        accessor: "customer",
      },
      {
        Header: "Deposit",
        accessor: "deposit",
      },
      {
        Header: "Date",
        accessor: "date",
      },
      {
        Header: "Voucher NO.",
        accessor: "voucherNo",
      },
      {
        Header: "Trans.Status",
        accessor: "status",
      },

], []);

  const data = useMemo(() => customersData(), []);

  return (
    <>
      <h1>Hello React!</h1>
      <div>
        <Table columns={columns} data={data} />
      </div>
    </>
  );
}

export default Table;

run npm start

Building Our Table

React-table uses React Hook called useTable. The Hook will return the necessary props for the table, body, and transformed data to create the header and cells. The header will be created by iterating through headerGroups, and the rows for the table body will be created by looping through rows. We'll also set up Tailwind CSS in our project, follow the instructions from the documentation. It's a few steps, but it should work seamlessly, we'll also copy most of the classes from the table component on TailwindUI



import { useTable } from "react-table";

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });

  // Render the UI for your table and the styles
  return (
  <div className="mt-2 flex flex-col">
            <div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8">
              <div  className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table {...getTableProps()} className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-10">
                      {headerGroups.map((headerGroup) => (
                          <tr {...headerGroup.getHeaderGroupProps()}>
                              {headerGroup.headers.map((column) => (
                                  <th {...column.getHeaderProps()}
                                  className="px-6 py-5 text-left text-20 font-medium text-gray-400 uppercase rounded-sm tracking-wider"
                                  >
                                    {column.render("Header")}
                                    </th>
                              ))}
                          </tr>
                      ))}
                  </thead>
                  <tbody {...getTableBodyProps()}
                  className="bg-white divide-y divide-gray-200">
                    {row.map((row, i) => {
                      prepareRow(row);
                      return (
                          <tr {...row.getRowProps()}>
                          {row.cells.map((cell) => {
                              return <td {...cell.getCellProps()} className="px-6 py-10 whitespace-nowrap">{cell.render("Cell")}</td>
                          })}
                          </tr>
                      );
                      })}
                  </tbody>
                    </table>
                </div>
              </div>
          </div>
         </div>
  );
}

export default Table;

Run npm start to open the app in the browser.

Adding Search Functionality with GlobalFilter

Let's add a global search feature to our table, it can enable users to find text typed in the input field, and the table only displays rows with data that matches this text.

In the src/Table.js, add the following code.



import { useTable, useGlobalFilter, useAsyncDebounce } from 'react-table'  // new

// Define a UI for filtering

function GlobalFilter({
    globalFilter,
    setGlobalFilter,
    placeholder
  }) {
    const [value, setValue] = useState(globalFilter)
    const onChange = useAsyncDebounce(value => {
      setGlobalFilter(value || undefined)
    }, 200)

    return (
      <span className='flex justify-between  pt-10 pb-10 '>
        <input
          value={value || ""}
          onChange={e => {
            setValue(e.target.value);
            onChange(e.target.value);
          }}
          className='w-8/12 rounded-xl border p-4 text-gray-500 cursor-pointer' 
          type="search"  
          placeholder="Search..."
        />
      </span>
    )
  };

The GlobalFilter component accepts a few props that will be provided by the Table component.

It also defines value using the useState hook, which is coupled to the element's value. When the user types in the element, the onChange handler will call the setGlobalFilter method to pass the value to the parent Table component. The useAsyncDebounce is used to add a little delay to avoid too many re-renders while the user is typing.

Finally, make a few updates to the Table component to integrate the GlobalFilter.



function Table({ columns, data }) {
  // Use the state and functions returned from useTable 
  const {
    ...
    state, // new
    preGlobalFilteredRows, // new
    setGlobalFilter, // new
  } = useTable({
    columns,
    data,
  },
    useGlobalFilter // new
  )

  // Render the UI for your table
  return (
    <>
      <GlobalFilter
        preGlobalFilteredRows={preGlobalFilteredRows}
        globalFilter={state.globalFilter}
        setGlobalFilter={setGlobalFilter}
      />
      <table {...getTableProps()}>
        ...
      </table>
    </>
  )
}

run npm start and try out the search functionality in the browser.

Adding useRowSelectColumn

The useRowSelectColumn react-table plugin hook injects a new column at the beginning showing checkboxes to select rows. This hook depends on the useRowSelect hook from react-table.

First we need to add this dependency @lineup-lite/hooks to help with row and column selection in the table. Enter the following command

npm install @lineup-lite/hooks

In the src/Table.js, add the following code.



import { useTable, useGlobalFilter, useAsyncDebounce, useRowSelect } from 'react-table';
import { useRowSelectColumn } from '@lineup-lite/hooks';


  // Use the state and functions returned from useTable to build your UI
    const {
    ...
   getTableProps,
   getTableBodyProps, 
   headerGroups, 
   rows, 
   prepareRow
  } = useTable({
    columns,
    data,
  },
    useRowSelect, //new
    useRowSelectColumn //new
  );

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {column.render('Header')}
                {column.id === 'selection' && column.render('Summary')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <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>
    </table>
  );
}

Custom Status cell component

Let's custom components for different cells, e.g. a show a thumbnail of the user image with the name, or a nice color-coded pill indicating the status.

Let's implement a custom cell for the status.



// src/Table.js
export function StatusPill({ value }) {
  const status = value ? value.toLowerCase() : "unknown";

  return (
    <span
      className={classNames(
        "px-3 py-1 uppercase leading-wide font-bold text-xs rounded-full shadow-sm",
        status.startsWith("active") ? "bg-green-100 text-green-700" : null,
        status.startsWith("inactive") ? "bg-yellow-100 text-yellow-700" : null,
        status.startsWith("offline") ? "bg-red-100 text-red-700" : null
      )}
    >
      {status}
    </span>
  );
}

Let's import this in our data and use it in the column definition.




function Table() {
  const columns = React.useMemo(
    () => [
      // ...
      {
        Header: "Status",
        accessor: "status",
        Cell: StatusPill, // new
      },
      // ...
    ],
    []
  );

  // ...
}

Let's check the result.

This is the greatness of React Table combined with the beauty of Tailwind CSS.

Adding User avatar cell component

In the first column, to show a user avatar and the email address. Let's write a component for this. plus necessary styles.



// src/Table.js
export function AvatarCell({ value, column, row }) {
  return (
    <div className="flex items-center">
      <div className="flex-shrink-0 h-10 w-10">
        <img
          className="h-10 w-10 rounded-full"
          src={row.original[column.imgAccessor]}
          alt=""
        />
      </div>
      <div className="ml-4">
        <div className="text-sm font-medium text-gray-900">{value}</div>
        <div className="text-sm text-gray-500">
          {row.original[column.emailAccessor]}
        </div>
      </div>
    </div>
  );
}

The AvatarCell takes two additional props as arguments, column and row. This is useful, because it allows you to use extra data from the object and use it within the cell.

Column configuration:



// src/App.js
function App() {
  const columns = React.useMemo(() => [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      imgAccessor: "imgUrl",
      emailAccessor: "email",
    },
    // ...
  ]);

  // ...
}

Pagination

The last feature I want to implement is pagination, to implement pagination, make the following changes (all of which are copied from the React Table pagination example)



// src/Table.js
import { ..., usePagination } from 'react-table'  // new

function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

    //new
    page, // Instead of using 'rows', we'll use page,
    // which has only the rows for the active page

    // The rest of these things are super handy, too ;)
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,

    state,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable({
      columns,
    data,
  },
    useGlobalFilter,
    usePagination,  // new
  )

Before we display on UI, let's customise the pagination, so as to display numbers as the pagination options.

Create another file ./useCustomPagination.js



import {useMemo} from 'react';

export const DOTS = '...';

const range = (start, end) => {
    const length = end - start + 1;
    return Array.from({length}, (_, idx) => idx + start);
};

export const useCustomPagination = ({totalPageCount, siblingCount = 1, currentPage}) => {
    return useMemo(() => {

        // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
        const totalPageNumbers = siblingCount + 5;

        /*
          If the number of pages is less than the page numbers we want to show in our
          paginationComponent, we return the range [1..totalPageCount]
        */
        if (totalPageNumbers >= totalPageCount) {
            return range(1, totalPageCount);
        }

        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
        const rightSiblingIndex = Math.min(
            currentPage + siblingCount,
            totalPageCount
        );

        /*
          We do not want to show dots if there is only one position left
          after/before the left/right page count as that would lead to a change if our Pagination
          component size which we do not want
        */
        const shouldShowLeftDots = leftSiblingIndex > 2;
        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;

        const firstPageIndex = 1;
        const lastPageIndex = totalPageCount;

        if (!shouldShowLeftDots && shouldShowRightDots) {
            const leftItemCount = 3 + 2 * siblingCount;
            const leftRange = range(1, leftItemCount);

            return [...leftRange, DOTS, totalPageCount];
        }

        if (shouldShowLeftDots && !shouldShowRightDots) {
            const rightItemCount = 3 + 2 * siblingCount;
            const rightRange = range(
                totalPageCount - rightItemCount + 1,
                totalPageCount
            );
            return [firstPageIndex, DOTS, ...rightRange];
        }

        if (shouldShowLeftDots && shouldShowRightDots) {
            const middleRange = range(leftSiblingIndex, rightSiblingIndex);
            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
        }
    }, [totalPageCount, siblingCount, currentPage]);
};

import and integrate it into ./Table.js



import {DOTS, useCustomPagination} from './useCustomPagination';


function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

    //new
    page, 
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,

    state,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable({
      columns,
    data,
  },
    useGlobalFilter,
    usePagination,  // new
  )


  const {pageIndex} = state;
            const paginationRange = useCustomPagination({
              totalPageCount: pageCount,
              currentPage: pageIndex
       }); //new

          useEffect(() => {
                  setPageSize(5);
            }, [setPageSize]); //set according to your preferrence


              return (
      <>
      ...
      <table {...getTableProps()} border="1">
        ...
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {  // replace row with page
            ...
          })}
        </tbody>
      </table>
      {/* new */}
            <div className="py-3 flex items-center text-center justify-center pt-10">
        <div className="flex-1 flex justify-between md:hidden">
          <Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
          <Button onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
        </div>
        <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between" aria-label="Pagination">
          <div className="relative z-0 inline-flex items-center ml-auto mr-auto rounded-md shadow-sm space-x-10" aria-label="Pagination">
                {paginationRange?.map((pageNumber, index) => {
                    if (pageNumber === DOTS) {
                        return (
                            <div
                            key={index}>...</div>
                        );
                    }

                    if ((pageNumber - 1) === pageIndex) {
                        return (
                            <div
                                key={index}
                                className=' active:bg-gray-500 active:border-gray-300'
                                onClick={() => gotoPage(pageNumber - 1)}>{pageNumber}</div>
                        );
                    }

                    return (
                        <div
                            key={index}
                            className='active:bg-gray-500 active:border-gray-300'
                            onClick={() => gotoPage(pageNumber - 1)}>{pageNumber}</div>
                    );
                })}
             </div>
          </div>
            </div>
          </div>
           )
};

Note that we've replaced row with page, which is an object provided by React Table that only contains the data for the current page.

In order to properly demo the pagination properly, we need a bit more data, so let's modify the getData function to concatenate the initial array three times using the JavaScript spread operator ..., before returning it.



const getData = () => {
  const data = [
    ...
  ]
  return [...data, ...data, ...data]
}

Run npm start and Vula!!!

Style the input elements

For the input elements (search field, filter drop-down and number-of-pages selector) we've relied on the default browser styling so far. Let's change that and make it fit to the rest of our design. I'll use another Tailwind plug-in for that: @tailwindcss/forms. Check out their live demo to see examples of styles you can achieve with it.

Install it with npm.

npm install @tailwindcss/forms

Then add it to your tailwind.config.js file:



// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require("@tailwindcss/forms"),

    // ...

  ],

};

Conclusion

In this tutorial, we have learnt how to create table with data grid, checkbox and pagination using React table and Tailwind CSS. I hope you enjoyed and learnt from this tutorial, kindly like, share and drop your comment and also I've provided the code repo for you, below.

Code

References

React Table Tutorial Part 1: Style the table with Tailwind CSS
Tailwind CSS
React-Table

DEV Community

How to create table with data grid, checkbox and pagination using React table and Tailwind CSS.

React Table

Building Our Table

Adding Search Functionality with GlobalFilter

Adding useRowSelectColumn

Custom Status cell component

Adding User avatar cell component

Pagination

Conclusion

References

Top comments (0)

Read next

How can I integrate Leaflet to React Native

Using MiniSearch in React: Advanced Search and Filtering Made Easy

15 Essential JavaScript Concepts To Learn Before Starting React

Step-by-Step Guide to Server-Side Render React with Rust