React Table Tutorial

React Table is a flexible and customizable library for creating data tables in React applications.

It offers features like sorting, filtering, pagination, and more to handle large datasets efficiently.

Installing React Table

You can install React Table via npm or yarn.

npm install react-table

Creating a Basic React Table

To create a basic table, import the necessary components from React Table.
Define columns and data for your table.

import { useTable } from 'react-table';

function BasicTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
    <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
            </tr>
        ))}
        </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
              </tr>
          );
        })}
        </tbody>
    </table>
  );
}

Data and Columns Configuration

Define the columns and data for your table. You can customize column headers, cell renderers, and more.

const columns = [
{
  Header: 'Name',
  accessor: 'name',
},
{
  Header: 'Age',
  accessor: 'age',
},
];

const data = [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 },
];

Sorting and Filtering

React Table provides built-in support for column sorting and filtering.
Enable sorting by setting the 'sortable' property on columns.

const columns = [
{
  Header: 'Name',
  accessor: 'name',
  sortable: true,
},
{
  Header: 'Age',
  accessor: 'age',
  sortable: true,
},
];

React Pagination

Implementing pagination is a pretty straightforward in React Table.
Add a pagination component and configure the number of rows per page.

import { usePagination } from 'react-table';

  // Inside the table setup
  const {
    // ...
    page,
    pageOptions,
    state: { pageIndex, pageSize },
    gotoPage,
    previousPage,
    nextPage,
    setPageSize,
  } = useTable(
    // ...
    usePagination
  );
  
  // Add pagination controls
  <div>
    <button onClick={() => gotoPage(0)}>{'<<'}</button>
    <button onClick={() => previousPage()}>{'<'}</button>
    <button onClick={() => nextPage()}>{'>'}</button>
    <button onClick={() => gotoPage(pageOptions.length - 1)}>{'>>'}</button>
    <span>
      Page{' '}
      <strong>
        {pageIndex + 1} of {pageOptions.length}
      </strong>{' '}
    </span>
    <span>
      | Go to page:{' '}
      <input
        type="number"
        defaultValue={pageIndex + 1}
        onChange={(e) => {
          const page = e.target.value ? Number(e.target.value) - 1 : 0;
          gotoPage(page);
        }}
        style={{ width: '50px' }}
      />
    </span>
    <select
      value={pageSize}
      onChange={(e) => {
        setPageSize(Number(e.target.value));
      }}
    >
      {[10, 20, 30, 40, 50].map((pageSize) => (
      <option key={pageSize} value={pageSize}>
          Show {pageSize}
      </option>
      ))}
    </select>
  </div>

Previous Next