⚛️ 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.

Comments
  • 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 66
  • 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
  • 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
  • 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
  • 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 38
  • feat(useGridLayout): Add functionality for proposed useGridLayout

    feat(useGridLayout): Add functionality for proposed useGridLayout

    Add functionality for a new hook called useGridLayout. Other Layout hooks require the layout to be driven by the individual cells and row wrappers. This hook allows for a more stripped down markup and lets the top level div control the layout while still allowing individual cells and headerCells to control themselves. This works with useResizeColumns while not editing the useResizeColumns hook itself.

    released 
    opened by CodyMoore240 35
  • 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
  • Cell does not render content in production builds

    Cell does not render content in production builds

    Describe the bug (required)

    In react-table v7.0.0, cells of the table are rendered empty only in production builds of the app, but works in the development server

    Provide an example via Codesandbox! (required) Example: Virtualized-Rows sandbox works fine when run in development mode. But, when run by building the project(yarn build), the cells are empty.

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

    Build the project and the run the built version, the cells of the table are empty

    Expected behavior (Recommended) The built version should works exactly as the development version, the cells of the table should be rendered correctly.

    Screenshots

    When run locally(development version) image

    When run after building(production version) image

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser: Chrome
    • Version: 80

    Smartphone (please complete the following information): N/A

    Additional context React Table version: v7.0.0

    Works fine on v7.0.0-rc.10

    opened by nikhilem 33
  • react-table v7 sorting by floating point number gives wrong result

    react-table v7 sorting by floating point number gives wrong result

    Describe the bug

    We are using "react-table": "^7.7.0",

    If you sort by column that bound to floating point number the sorting result is wrong. The code base on example that was taken from react-table v7 site: https://react-table-v7.tanstack.com/docs/examples/sorting

    Your minimal, reproducible example

    https://codesandbox.io/s/long-lake-upehd5

    Steps to reproduce

    1. Sort by Age
    2. Check a result

    Expected behavior

    The result should be in right order and not mixed up

    How often does this bug happen?

    Every time

    Screenshots or Videos

    image

    Platform

    Windows 10 chrome browser

    react-table version

    7.7.0

    TypeScript version

    No response

    Additional context

    No response

    Terms & Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    • [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
    opened by DenisTL 0
  • While resizing columns, the cursor can become out of sync with the resize handles after scrolling horizontally

    While resizing columns, the cursor can become out of sync with the resize handles after scrolling horizontally

    Describe the bug

    This issue can be seen in the examples for resizing in the docs: https://tanstack.com/table/v8/docs/examples/react/column-sizing?from=reactTableV7&original=https://react-table-v7.tanstack.com/docs/examples/column-resizing

    Here is a video that depicts the issue:

    https://user-images.githubusercontent.com/87341995/205720084-7f95b9cd-1cc6-4d9c-bb2e-ecb99fc78856.mp4

    Notice that the cursor appears to the left of the handles after scrolling the table and attempting to resize for the second time.

    Your minimal, reproducible example

    https://tanstack.com/table/v8/docs/examples/react/column-sizing?from=reactTableV7&original=https://react-table-v7.tanstack.com/docs/examples/column-resizing

    Steps to reproduce

    1. Resize a column to be a bit wider on a table that is wider than its parent element (the important part being that the table is horizontally scrollable)
    2. Scroll horizontally on the table
    3. Try to resize the same column in step 1 to be smaller

    Expected behavior

    The cursor always appears above the scroll handles while resizing

    How often does this bug happen?

    Every time

    Screenshots or Videos

    https://user-images.githubusercontent.com/87341995/205720084-7f95b9cd-1cc6-4d9c-bb2e-ecb99fc78856.mp4

    Platform

    osx, chrome

    react-table version

    7.8.0 + the version currently being used in the online documentation

    TypeScript version

    No response

    Additional context

    No response

    Terms & Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    • [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
    opened by teddyty 0
  • Aggregation Median incorrect calculation

    Aggregation Median incorrect calculation

    Describe the bug

    The current implementation of calculation of the median is incorrect. This bug has been report before here, and it was fixed in the following commit.

    However, if you now go to the current file the old version is back again.

    Your minimal, reproducible example

    https://codesandbox.io/s/exciting-sun-ddlcoz?file=/src/main.tsx

    Steps to reproduce

    Go to the given sandbox and click on the hand icon with More info. This will turn the table into a grouped view and will calculate the median for the age column and for the progress column.

    Expected behavior

    With the fixed data set it should be: age 15 and profile progress should be 20%. Those are the middle values of the three options. An alternative test case would be to add one more row and see if it calculates the average correctly of the two middle rows.

    How often does this bug happen?

    Every time

    Screenshots or Videos

    No response

    Platform

    Any platform - version 8.7.1

    react-table version

    v8.7.1

    TypeScript version

    No response

    Additional context

    No response

    Terms & Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    • [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
    opened by timsun28 0
  • minimal turborepo conversion poc

    minimal turborepo conversion poc

    This is the start of a potential switch from lerna/yarn to turborepo/pnpm.

    First commit is the bare minimum where everything builds correctly, but now all linking features have been taken advantage of.

    More research into how https://pnpm.io/workspaces work in the publish flow needs to be done.

    opened by KevinVandy 0
  • Separate useState input causes infinite rerenders

    Separate useState input causes infinite rerenders

    Describe the bug

    Inside a react functional component if a separate input field is used alongside a table, entering anything into the input will cause an infinite loop of rerenders to occur Commenting out the prevents this issue from happening.

    Your minimal, reproducible example

    https://codesandbox.io/s/musing-forest-x6cgtg?file=/src/App.js

    Steps to reproduce

    Enter anything into input field.

    Expected behavior

    Only one rerender should occur, should not loop.

    How often does this bug happen?

    Every time

    Screenshots or Videos

    No response

    Platform

    All

    react-table version

    v8.7.0

    TypeScript version

    No response

    Additional context

    Unsure if related to #4566

    Terms & Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    • [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
    opened by FredMcAwesome 0
  • Fix: onColumnSizingChange does not return correct value when react.strictmode is not used

    Fix: onColumnSizingChange does not return correct value when react.strictmode is not used

    When onColumnSizingChange is used without react.strictmode / production the function does not return the correct updated values. This breaks the resize feature as discussed in https://github.com/TanStack/table/issues/4479

    opened by bjoe87 0
Releases(v8.7.1)
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 20k Dec 4, 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 40 Jul 22, 2022
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 467 Nov 28, 2022
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 67 Oct 11, 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 209 Jul 16, 2022
Beautiful and fast spreadsheet React component

Beautiful and fast spreadsheet React component

Farseer 39 Jul 15, 2022
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 Nov 27, 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 38 Dec 4, 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 87 Nov 26, 2022
A React UI Component library for building modern applications easily & quickly

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

Elementz 344 Nov 11, 2022
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.

Important information We permanently moved this project to the main Handsontable repository at https://github.com/handsontable/handsontable/tree/maste

Handsontable 520 Nov 11, 2022
react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.

react-xls react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. ?? Features Compatible with both JavaScript and TypeScript ?? U

Bunlong VAN 13 Oct 12, 2022
A windowed React table built on top of react-window

react-fluid-table A React table inspired by react-window (Note: This project is under construction) Install # using yarn yarn add react-fluid-table #

Mckervin Ceme 41 Jul 29, 2022
react-collapsing-table: a React rewrite of the jQuery table plugin from

React Collapsing Table Thanks for taking a look at the react collapsing table. This was inspired by the the jquery datatables library. You can see a w

MassMutual 28 Jun 10, 2022
React Table - React table component with useful functions

React Table - React table component with useful functions

react-component 1.1k Dec 5, 2022
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.7k Dec 2, 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 422 Dec 8, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

Brian Vaughn 13.4k Nov 28, 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.4k Dec 2, 2022