CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-table

Hooks for building lightweight, fast and extendable datagrids for React

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-table@7.8.x
Publish Source
CLI
Badge
tessl/npm-react-table badge