Socket
Socket
Sign inDemoInstall

react-table

Package Overview
Dependencies
3
Maintainers
1
Versions
217
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-table

Hooks for building lightweight, fast and extendable datagrids for React


Version published
Maintainers
1
Weekly downloads
1,264,147
decreased by-7.82%

Weekly downloads

Package description

What is react-table?

The react-table package is a lightweight, flexible, and extensible data grid library for React. It allows developers to build complex, interactive, and performant data grids and tables with minimal effort. It provides hooks and utilities to turn any table into a fully functional data grid, including features like sorting, filtering, pagination, and more.

What are react-table's main functionalities?

Sorting

This feature allows users to sort data in the table by clicking on the column headers. The code sample demonstrates how to set up a basic table with sortable columns using react-table hooks.

const { useTable, useSortBy } = require('react-table');

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

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
                <span>
                  {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
                </span>
              </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>
  );
}

Pagination

This feature enables pagination for the table data, allowing users to navigate through pages. The code sample shows how to implement pagination controls and functionality using react-table hooks.

const { useTable, usePagination } = require('react-table');

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable({ columns, data }, usePagination);

  // Table structure similar to the sorting example

  return (
    <div>
      {/* Table structure here */}
      <div className="pagination">
        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>{'<<'}</button>
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>{'<'}</button>
        <button onClick={() => nextPage()} disabled={!canNextPage}>{'>'}</button>
        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>{'>>'}</button>
        <span>
          Page{' '}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>
        </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>
    </div>
  );
}

Filtering

This feature allows users to filter table data based on input. The code sample illustrates how to add a simple text input for filtering data in a specific column using react-table hooks.

const { useTable, useFilters } = require('react-table');

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

  // Table and header structure similar to the sorting example

  return (
    <div>
      <input
        value={filterInput}
        onChange={e => setFilter('columnName', e.target.value)}
        placeholder={`Search ${'columnName'}`}
      />
      {/* Table structure here */}
    </div>
  );
}

Other packages similar to react-table

Readme

Source

React Table v7

Looking for the latest version?

Visit react-table-v7.tanstack.com for docs, guides, API and more!

Quick Features

  • Lightweight (5kb - 14kb+ depending on features used and tree-shaking)
  • Headless (100% customizable, Bring-your-own-UI)
  • Auto out of the box, fully controllable API
  • Sorting (Multi and Stable)
  • Filters
  • Pivoting & Aggregation
  • Row Selection
  • Row Expansion
  • Column Ordering
  • Animatable
  • Virtualizable
  • Resizable
  • Server-side/controlled data/state
  • Extensible via hook-based plugin system

Become a Sponsor

Keywords

FAQs

Last updated on 16 May 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc