⚛️ Hooks for building fast and extendable tables and datagrids for React

Overview

React Table Header

Hooks for building lightweight, fast and extendable datagrids for React

#TanStack semantic-release Join the discussion on Github

Enjoy this library? Try them all! React Query, React Form, React Charts

Visit react-table.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

Previous Versions

Version 6

v6 is a great library and while it is still available to install and use, I am no longer offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.

Where are the docs for the older v6 version?

Please visit the v6 branch

I want to migrate from v6 to v7. How do I do that?

The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component.

In case you would need to have both v6 and v7 in one app during the migration process (large codebase, complex use cases), you can either (1) fork and maintain your own local version of React Table v6 or (2) install the react-table-6 alias package for use alongside the react-table package.

Issues
  • v7 Feedback & Ideas

    v7 Feedback & Ideas

    Hi, First, I'm trying v7, it's awesome to work with Hooks! Trying it for the first time so my comments might be wrong.

    Describe the bug This are more of an architecture comment than a bug: If you disable useExpanded hook, the table breaks. ~~I know in userland you can't disable this hook but the fact that this happens,~~ (edit: actually you can) probably demonstrates wrong app design: I figured out this is happening because you're building initial state within the useExpanded hook (row.cells = ...).

    Expected behavior I think that adding or removing hooks should not break the entire component. Hooks should be encapsulated.

    Codesandbox! https://codesandbox.io/s/nk9rmym6m4

    Solution That initial state logic could be within useTable itself (tested and works fine). I can provide a PR if needed.

    opened by Grsmto 101
  • Typescript Discussion

    Typescript Discussion

    Hi all,

    I'd like to start by saying thank you to all the maintainers and contributors of this package 💯 and also apologies for not using the issue template format, wasn't quite sure if this was a bug or a feature request.

    I've been trialling the v7 branch, and overall its really really impressive 🙌 The only part that seemed a little ... lacking was the Typescript types. This was not a huge issue, as I was able to create my own types file that the compiler merges with the types provided by react-table (using declaration merging)

    I noticed that beta 12 has recently been released, and I updated (from beta 10). Unfortunately, it seems that the situation has somewhat worsened from a developer experience perspective. I'm assuming the changes were made in order to better handle the fact that any number of plugin hooks might be specified by a user. However, these changes seem to have come at the cost of requiring users to include a custom types file in their projects (which is a little unusual, even for Typescript projects).

    In an ideal world, it'd be great to see react-table written natively in Typescript to avoid situations where the code and types are not in sync, but I do understand that might not be what the maintainers/contributors want. That said, the procedure in beta 12 seems like it could be improved, and I'm happy to help 😄 I'm including my additions to the types file from beta 10 that mostly fixed the plugin issues, as well as adding a few other missing types. There are some definite improvements in the beta 12 types, so it'd be good to see if we can find some middle ground.

    import {
      Row,
      TableInstance,
      TableOptions,
      useGroupBy,
      useFilters,
      useSortBy,
      useExpanded,
      usePagination,
      useRowSelect,
      useRowState,
      useColumnOrder,
      useBlockLayout,
      useAbsoluteLayout,
      useResizeColumns,
      Column,
    } from "react-table";
    
    declare module 'react-table' {
      export interface TableInstance<D = {}> extends TableOptions<D> {
        getTableBodyProps: (userProps?: any) => any
        selectedFlatRows: Row<D>[]
      }
    
      export interface HeaderColumn<D> {
        disableFilters?: boolean;
      }
    
      export interface EnhancedColumn<D>
        extends Omit<Column<D>, 'columns'>,
          TableInstance<D> {
        canFilter?: boolean
      }
    
      export interface UsePaginationValues<D = {}> {
        pageOptions: number[]
      }
    
      export type Plugin<D> = useGroupBy<D> |
        useFilters<D> |
        useSortBy<D> |
        useExpanded<D> |
        usePagination<D> |
        useRowSelect<D> |
        useRowState<D> |
        useColumnOrder<D> |
        useBlockLayout<D> |
        useAbsoluteLayout<D> |
        useResizeColumns<D>
    
      export function useTable<D = {}, P = Plugin<D>>(
        props: TableOptions<D>,
        ...plugins: P[]
      ): TableInstance<D> & ReturnType<typeof P>
    
      export function useRowSelect<D = {}>(
        props: TableOptions<D>
      ): TableOptions<D>
    }
    
    types 
    opened by hassankhan 63
  • Thank you for this library

    Thank you for this library

    Hey,

    Just started using react-table and wanted to say thanks for such a great job. Customization is so well through-out that I’m just enjoying working with it: I can change almost every detail to adapt the table for design requirements; and, at the same time, I need to change only a small number of things because defaults also work very well. And the number of features just blows my mind.

    Thank you. Such an amazing job.

    opened by iamakulov 47
  • react table lose input focus on change. V 6.10 - 6.8.6

    react table lose input focus on change. V 6.10 - 6.8.6

    Describe the bug Live https://codesandbox.io/s/6l7op9lovr After input value change, input is losing focus and we cannot type in more than 1 letter. When downgrade to 6.8.6 input is not losing focus after typing in 1 letter

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://codesandbox.io/s/6l7op9lovr website
    2. Click first input
    3. try to write more than 1 letter in input
    4. check that input has lost focus
    5. downgrade to 6.8.6
    6. Click first input
    7. try to write more than 1 letter
    8. notice that it s possible now
    opened by Oskii2311 47
  • Updating types

    Updating types

    So some of this is still broken. I attempted to read through all the API Docs and through most of the source to rid the typings of any and anything missing in the typings.

    Looking for feedback on how I have broken this stuff down and ways we could improve it.

    I have broken all hooks down to:

    • The hook function
    • Options
    • Hooks
    • State
    • Column Options
    • Instance Props
    • Column Props
    • HeaderGroup Props
    • Row Props
    • Cell Props

    I'm still iterating on some ways to make the plugin/composable nature easier to work with on a per-table basis.

    /cc @ggascoigne

    opened by stramel 42
  • show: false in column is still showing column

    show: false in column is still showing column

    In Version 7:

    Describe the bug Setting show to false in the column appears to have no effect

    To Reproduce Steps to reproduce the behavior:

    //In code useTable({columns: [{accessor: "uid", Header: "uid", show: false}], data})

    Result: column uid is still visible.

    Expected behavior The column with show: false to not be visible

    Codesandbox! codesandbox

    Screenshots image

    Desktop (please complete the following information):

    • OS: Windows
    • Browser firefox
    • Version 71.0

    Additional context

    opened by agray5 39
  • Sticky columns

    Sticky columns

    Is there any plan to add a feature for fixed or 'sticky' columns allowing for horizontal scrolling, in addition to vertical

    opened by visarts 39
  • React Table v6 unable to get data since 6.11.2 update

    React Table v6 unable to get data since 6.11.2 update

    Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined.

    React table unable to get the data since last update & throwing above error.

    Issue since: Version 6.11.2

    Not reproducible till Version 6.10.3

    opened by prathmeshphuke 36
  • react-table not working in chrome / Css-Problem?

    react-table not working in chrome / Css-Problem?

    What version of React-Table are you using?

    react-table 6.5.3 react: 15.6.1 webpack: 3.4.1

    What bug are you experiencing, or what feature are you proposing?

    react-table looks good in Mozilla, Edge and IE, but not in Chrome (61.0) I have taken the exact same code as in this example: Simple Table and haven`t modified anything here. I haven't added, modified or changed the code.

    I can see the pagination-bottom div, but not the <div class=rt-table>. It seems that the div class=rt-table is only 1px in size above the pagination-bottom div. (Css problem?)

    A picture how it looks in Chrome

    In the console: I don`t get an error in the console of chrome, and I see the data in the table.

    I have no idea why the div rt-table doesn`t show up. I have also tried to set a fix height:

     style={{
    height: "800px" // This will force the table body to overflow and scroll, since there is not enough room
     }}	
    

    I have also tried to change the import css to the old style: import "react-table/react-table.css"; ->

    Nothing changed

    opened by Paul6552 35
  • Custom sort function

    Custom sort function

    Hi

    Sorry if this exists already, but I think it would be nice to be able to pass a custom sort function for a column, probably as part of the columns configuration object e.g:

    const  columns =[{
        accessor:"foo",
        header:"Foo",
        sortable:true,
        sortFunction: (a, b) => a > b ? 1 : -1},
    ...]
    
    
    opened by RalphSleigh 34
  • `Column` type declaration is wrong for deeply nested values

    `Column` type declaration is wrong for deeply nested values

    From the documention Column Options accessor: String | Function(originalRow, rowIndex) => any If a string is passed, the column's value will be looked up on the original row via that key, eg. If your column's accessor is firstName then its value would be read from row['firstName']. You can also specify deeply nested values with accessors like info.hobbies or even address[0].street

    Next example shows how wrong Column type declaration makes TS errors:

    import { Column } from "react-table";
    
    export interface RowData {
      person: Person,
      profile: Profile
    }
    
    const columns: Column<RowData>[] = [
      {
        accessor: 'person.name'   // <--- TS2322: Type "person.name" is not assignable to type "person" | "profile".
      },
      {
        accessor: 'profile.userName' // <--- TS2322: Type "profile.userName" is not assignable to type "person" | "profile".
      }
    ]
    

    The cause of the issue is too strict declaration of accessor field

    { accessor?: (keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>) | undefined; };
    

    You should give more flexible rule for the field (add | string option)

    export type ColumnWithLooseAccessor<D extends object = {}> =
        & ColumnInterface<D>
        & ColumnInterfaceBasedOnValue<D>
        & (
            | { Header: string }
            | { id: IdType<D> }
            | { accessor: keyof D extends never ? IdType<D> : never | string}  // <-- here 
        )
        & { accessor?: (keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>) | string | undefined; }; // <-- and here 
    
    opened by BanderasPRO 0
  • How to sort a column with combined values as accessor?

    How to sort a column with combined values as accessor?

    Sorry of this comes off as a spoon feeding question but I can’t seem to find my answer on the internet. If I have a header like so Header: “Price”, Accessor: “priceInUsd”, Cell: custom_cell

    and in my custom cell I have value of priceInUsd plus another price of another item which then be combined as the final value. I need to sort that column from with desc and asc option with the value of price A + price B, but it seems that the sorting is based on only price A, how do I achieve this?

    opened by thenotoriousjr 0
  • Question: range select on table

    Question: range select on table

    I’m trying to implement range select on my table where a user can hold down shift, select one row, then another, and both rows with any in between are selected.

    I can’t find any good examples of the best way to do this using react-table and was wondering how I would approach implementing that feature using the library?

    I tried this callback function to select rows using the index buts it’s extremely unreliable and non performant for table with only 120 rows:

    ` /**

    • Handle Row Click */ const handleRowClick = React.useCallback(( event: React.MouseEvent, row: Row, ) => { if (event.ctrlKey || event.metaKey) { row.toggleRowSelected() } else if (event.shiftKey) { // Range Select if (rangeSelectFirstIndex > -1) {

      // Second click for range select const rangeSelectLastIndex = row.index console.log(rangeSelectFirstIndex, rangeSelectLastIndex) for (const indexRow of rows) { if (rangeSelectFirstIndex > rangeSelectLastIndex) { if (indexRow.index >= rangeSelectLastIndex && indexRow.index <= rangeSelectFirstIndex) { console.log("start toggle", indexRow.index) indexRow.toggleRowSelected(true) console.log("finish toggle", indexRow.index) } } else { if (indexRow.index >= rangeSelectFirstIndex && indexRow.index <= rangeSelectFirstIndex) { console.log("start toggle", indexRow.index) indexRow.toggleRowSelected(true) console.log("finish toggle", indexRow.index) } } } } else { setRangeSelectFirstIndex(row.index) } } else { // Just select single row toggleAllRowsSelected(false) row.toggleRowSelected(true) setRangeSelectFirstIndex(row.index) } }, [rangeSelectFirstIndex]) `

    opened by dgildeh 0
  • References isSorted and isSortedDesc never changes when a column is provided under hiddenColumns

    References isSorted and isSortedDesc never changes when a column is provided under hiddenColumns

    Describe the bug (required)

    1. I would like to hide a column, and table header for all the columns
    2. I still want to use sort feature in a different way i.e., I will place the sort option right above the table where user can click to change the order of the list view
    3. In this case, Global search and Filter above the table are working as expected where the sorting is not. isSorted and isSortedDesc never changes when I click the sort for the hidden column

    Provide an example via Codesandbox! (required) react-table codesandbox to reproduce the issue.

    Steps To Reproduce (required)

    1. Click Device Usage, you will see an arrow appears and changes up/down.
    2. Click Memory, you will see an arrow appears and changes up/down.
    3. When you click Name, you will NOT see the same behavior but the list view still orders in the asc order

    Expected behavior (Recommended) Arrow should appear when Name is clicked i.e., isSorted and isSortedDesc must change when clicking the sort option for the hidden column

    Desktop (please complete the following information):

    • OS: MacOS BigSur 11.6
    • Browser Chrome
    • Version 96.0
    opened by aravindtrue 0
  • fix(useGroupBy): set depth on leaf rows when grouping

    fix(useGroupBy): set depth on leaf rows when grouping

    Add the computed depth to leaf rows returned from groupUpRecursively

    fixes #3631

    opened by tyrdavis 1
  • row.depth is 0 for leaf rows while using useGroupBy

    row.depth is 0 for leaf rows while using useGroupBy

    Describe the bug (required) While using useGroupBy, row.depth is always 0 for leaf rows in groupings. If multiple groupings are done, grouped rows below the top level do have the correct depth set.

    Provide an example via Codesandbox! (required) https://codesandbox.io/s/elegant-poincare-h9suj?file=/src/App.js

    Steps To Reproduce (required) Steps to reproduce the behavior:

    1. Click one or more header cell groupBy toggle icon
    2. Expand groupings until a set of leaf rows is visible
    3. See that the cells' backgrounds are blue (depth === 0)

    Expected behavior (Recommended) row.depth should be parent row's depth + 1 for leaf nodes.

    Screenshots Blue rows are depth === 0, white rows are anything else. image

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser: Chrome
    • Version: 96
    opened by tyrdavis 0
  • Table with useExpanded and useGlobalFilter not working properly

    Table with useExpanded and useGlobalFilter not working properly

    Describe the bug (required) I am trying to create a table with sub rows and filtering (global) functionality. When the filtration is applied the expand functionality breaks and we no longer see the expand buttons. Notice I am doing a very simple filtration, just on the root level and not on the sub rows.

    Provide an example via Codesandbox! (required) https://codesandbox.io/s/busy-stallman-1tcx5?file=/src/App.js

    Steps To Reproduce (required) Steps to reproduce the behavior:

    1. Go to the search field
    2. Type some characters to filter
    3. See the expand buttons are no longer available

    Expected behavior (Recommended) The table should still expand.

    Screenshots CleanShot 2022-01-06 at 19 05 26

    Desktop (please complete the following information):

    • OS: MacOS 12.1
    • Browser: chrome
    • Version: Version 97.0.4692.71 (Official Build) (x86_64)
    opened by mahadazad 0
  • How to add Sub Components Lazy for react table 6.7.5 ?

    How to add Sub Components Lazy for react table 6.7.5 ?

    I have created a nested table inside the subcomponent.... that data I am fetching from the server but till the time I get a response it's moved to the next line.

    tried adding async and wait.... no luck how to add Sub Components Lazy for react table 6.7.5

    Thanks in Advance!

    opened by AjayShivanagol 0
  • Run aggregateValue for all nested groups

    Run aggregateValue for all nested groups

    Resolves #3323, #3583

    I will recreate this PR to adhere to the contribution guidelines later.

    opened by jcranendonk 1
Releases(v7.7.0)
Owner
Tanner Linsley
Husband, Co-Founder, Open source fanatic, React Junkie, Javascripter
Tanner Linsley
⚛️ Hooks for building fast and extendable tables and datagrids for React

Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all! React Query, React Form, React Charts Visit

Tanner Linsley 16.1k Jan 20, 2022
virtualized and extendable tables and datagrids for React

Tablex 基于 react-window 的表格组件 Learn more at the website Install yarn add tablex import React, { Component } from "react"; import Table, { flatten, unfl

nexx 38 Dec 22, 2021
DripTable is a solution, launched by JD Retail, for building dynamic tables in mid-and-back end webapp

DripTable is a solution, launched by JD Retail, for building dynamic tables in mid-and-back end webapp

JD.com 159 Jan 18, 2022
Responsive and dynamically-sized fixed headers and columns for tables

React Sticky Table Responsive and dynamically-sized fixed headers, footers, and columns for tables. SEEKING EXAMPLE LINKS - please comment in this iss

Symbolic Frameworks 204 Nov 4, 2021
A small demo for sortable tables of React Semantic UI.

React-Semantic-UI-Sortable-Table-Example An example for React Semantic UI sortable table. Prerequisite Node.js runtime environment of 10.16.0. Quick S

Yu-Chia Wu 62 Jan 8, 2022
Beautiful and fast spreadsheet React component

Beautiful and fast spreadsheet React component

Farseer 22 Dec 23, 2021
A library providing an abstraction for React components that allows for fast top-down rendering embracing immutable data for js

Retirement Notice We can happily announce that as of React 16.6, Omniscient.js can enjoy retirement after a job well done. The new React.memo API can

null 1.2k Jan 15, 2022
Solid SimpleTable is a blazing fast reactive table component that gives you freedom.

Solid SimpleTable Solid SimpleTable is a blazing fast reactive table component that gives you freedom. Features Very fast as it is compiled down to Va

Amin Yahyaabadi 20 Jan 19, 2022
A fast, efficient tree table component for ReactJS.

cp-react-tree-table A fast, efficient tree table component for ReactJS. Live Demo | Documentation Documentation v0.x Installation [Method A] Using npm

Constantin Panaitescu 75 Nov 25, 2021
A React UI Component library for building modern applications easily & quickly

A React Component library for buliding modern applications easily & quickly.

Elementz 338 Dec 31, 2021
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

react-data-grid Install npm install react-data-grid react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to sc

Adazzle 5.1k Jan 14, 2022
Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more

The customizable, extendable, lightweight and free React Table Component Site | Demos | Docs Demo link Installation npm npm install ka-table yarn yarn

Alexander Komarov 256 Jan 12, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

Brian Vaughn 11.8k Jan 14, 2022
BaseTable is a react table component to display large datasets with high performance and flexibility

A react table component to display large datasets with high performance and flexibility

Autodesk 1.2k Jan 13, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

Brian Vaughn 23.1k Jan 22, 2022
SmartTable.js - Smart and simple react bootstrap table

SmartTable.js - Smart and simple react bootstrap table

Amine Amine 6 Jan 2, 2022
🤸 Configurable grid and layout engine for React

gymnast is a configurable grid for React With gymnast, you can eliminate your layout css or reduce it to just a few lines. Learn how to use gymnast in

gymnast.js 35 Dec 1, 2021
A react table component to display large datasets with high performance and flexibility

react-base-table BaseTable is a react table component to display large datasets with high performance and flexibility Install # npm npm install react-

Autodesk 1.2k Jan 13, 2022
React-based list (table) components that support events, callback functions, and custom styles.

React-based list (table) components that support events, callback functions, and custom styles.

Oceanxy 20 Oct 13, 2021