or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

built-in-types.mdcolumn-management.mdcore-table.mdfiltering.mdgrouping.mdindex.mdlayout.mdpagination.mdrow-features.mdsorting.mdutilities.md
tile.json

tessl/npm-react-table

Hooks for building lightweight, fast and extendable datagrids for React

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-table@7.8.x

To install, run

npx @tessl/cli install tessl/npm-react-table@7.8.0

index.mddocs/

React Table

React Table v7 is a headless, hook-based React library for building powerful data tables and datagrids. It provides extensive functionality including sorting, filtering, pagination, row selection, column resizing, and more through a composable plugin architecture.

Package Information

  • Package Name: react-table
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install react-table

Core Imports

import { useTable } from "react-table";

For plugin hooks:

import {
  useTable,
  useSortBy,
  useFilters,
  useGlobalFilter,
  useGroupBy,
  usePagination,
  useRowSelect,
  useExpanded,
  useColumnOrder,
  useResizeColumns
} from "react-table";

For default functions:

import {
  useTable,
  useGroupBy,
  defaultGroupByFn,
  defaultOrderByFn
} from "react-table";

CommonJS:

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

Basic Usage

import React from 'react';
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 => (
                <td {...cell.getCellProps()}>
                  {cell.render('Cell')}
                </td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Architecture

React Table v7 is built around several key design principles:

  • Headless: No UI components, only data logic and utilities
  • Hook-based: Built with React hooks for modern React applications
  • Plugin Architecture: Extensible through composable plugin hooks
  • Type-safe: Full TypeScript support with intelligent type inference
  • Performance Optimized: Uses memoization and selective updates for optimal rendering

Core Components

  • useTable Hook: The foundational hook that creates the table instance
  • Plugin Hooks: Optional hooks that extend table functionality (useSortBy, useFilters, etc.)
  • Table Instance: The object returned by useTable containing all table state and methods
  • Row/Column/Cell Objects: Structured data objects with rendering utilities

Capabilities

Core Table Functionality

Essential table creation and management functionality. Every React Table implementation starts here.

function useTable(
  props: TableOptions,
  ...plugins: PluginHook[]
): TableInstance;

interface TableOptions {
  columns: Column[];
  data: any[];
  initialState?: Partial<TableState>;
  defaultColumn?: Partial<Column>;
  getSubRows?: (row: any, index: number) => any[];
  getRowId?: (row: any, index: number, parent?: Row) => string;
  stateReducer?: (
    newState: TableState,
    action: ActionType,
    previousState: TableState
  ) => TableState;
  useControlledState?: (state: TableState) => TableState;
}

Core Table

Data Filtering

Column-level and global filtering capabilities for searching and filtering table data.

function useFilters(hooks: Hooks): void;
function useGlobalFilter(hooks: Hooks): void;

interface FilterInstance {
  setFilter: (columnId: string, filterValue: any) => void;
  setAllFilters: (filters: Filter[]) => void;
  setGlobalFilter: (filterValue: any) => void;
}

Data Filtering

Data Sorting

Single and multi-column sorting functionality with customizable sort types.

function useSortBy(hooks: Hooks): void;

interface SortByInstance {
  setSortBy: (sortBy: SortingRule[]) => void;
  toggleSortBy: (columnId: string, desc?: boolean, multi?: boolean) => void;
}

Data Sorting

Pagination

Built-in pagination functionality for large datasets.

function usePagination(hooks: Hooks): void;

interface PaginationInstance {
  canPreviousPage: boolean;
  canNextPage: boolean;
  pageOptions: number[];
  pageCount: number;
  gotoPage: (pageIndex: number) => void;
  previousPage: () => void;
  nextPage: () => void;
  setPageSize: (pageSize: number) => void;
}

Pagination

Data Grouping

Row grouping and aggregation capabilities for hierarchical data display.

function useGroupBy(hooks: Hooks): void;
function defaultGroupByFn(rows: Row[], columnId: string): Row[];

interface GroupByInstance {
  toggleGroupBy: (columnId: string, value?: boolean) => void;
  setGroupBy: (groupBy: string[]) => void;
  preGroupedRows: Row[];
  groupedRows: Row[];
}

Data Grouping

Row Features

Row expansion, selection, and state management capabilities.

function useExpanded(hooks: Hooks): void;
function useRowSelect(hooks: Hooks): void;
function useRowState(hooks: Hooks): void;

interface RowInstance {
  isExpanded: boolean;
  canExpand: boolean;
  isSelected: boolean;
  toggleRowExpanded: (expanded?: boolean) => void;
  toggleRowSelected: (selected?: boolean) => void;
}

Row Features

Column Management

Column ordering, resizing, and visibility control.

function useColumnOrder(hooks: Hooks): void;
function useResizeColumns(hooks: Hooks): void;

interface ColumnInstance {
  canResize: boolean;
  isResizing: boolean;
  getResizerProps: () => object;
}

Column Management

Layout Plugins

Specialized layout systems for different table rendering approaches.

function useAbsoluteLayout(hooks: Hooks): void;
function useBlockLayout(hooks: Hooks): void;
function useFlexLayout(hooks: Hooks): void;
function useGridLayout(hooks: Hooks): void;

Layout Systems

Utilities and Helpers

Built-in utilities, renderers, and helper functions for common table operations.

const actions: ActionTypes;
const defaultColumn: Column;
function flexRender(component: Renderer, props: any): React.ReactElement;
function makeRenderer(component: Renderer): Function;
function useAsyncDebounce<T>(fn: T, wait: number): T;
function useGetLatest<T>(obj: T): () => T;

Utilities

Built-in Types and Functions

Pre-built filter types, sort types, and aggregation functions for common data operations.

interface FilterTypes {
  text: FilterFunction;
  exactText: FilterFunction;
  includes: FilterFunction;
  between: FilterFunction;
}

interface SortTypes {
  alphanumeric: SortFunction;
  datetime: SortFunction;
  number: SortFunction;
  string: SortFunction;
}

interface AggregationTypes {
  sum: AggregationFunction;
  min: AggregationFunction;
  max: AggregationFunction;
  average: AggregationFunction;
  count: AggregationFunction;
}

Built-in Types

Types

interface TableInstance {
  // State
  state: TableState;
  dispatch: (action: ActionType) => void;
  
  // Columns
  columns: Column[];
  allColumns: Column[];
  visibleColumns: Column[];
  headerGroups: HeaderGroup[];
  footerGroups: HeaderGroup[];
  headers: Header[];
  flatHeaders: Header[];
  
  // Rows
  rows: Row[];
  flatRows: Row[];
  rowsById: Record<string, Row>;
  
  // Methods
  prepareRow: (row: Row) => void;
  getTableProps: PropGetter;
  getTableBodyProps: PropGetter;
}

interface Column {
  Header?: Renderer;
  Footer?: Renderer;
  Cell?: Renderer;
  accessor?: string | ((row: any) => any);
  id?: string;
  width?: number;
  minWidth?: number;
  maxWidth?: number;
  disableSortBy?: boolean;
  disableFilters?: boolean;
  disableGroupBy?: boolean;
}

interface Row {
  id: string;
  index: number;
  original: any;
  cells: Cell[];
  values: Record<string, any>;
  subRows?: Row[];
  getRowProps: PropGetter;
}

interface Cell {
  column: Column;
  row: Row;
  value: any;
  getCellProps: PropGetter;
  render: (type: string) => React.ReactElement;
}

type PropGetter = (props?: any) => object;
type Renderer = React.ComponentType | React.ReactElement | string;