Home / React / Table

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

name route Getting Started / Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all
Information
Category: React / Table
Watchers: 168
Star: 22.5k
Fork: 2.9k
Last update: Sep 27, 2023
Resource links
http://react-table.zabapps.com
https://github.com/TanStack/table
Popular

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

Become a Sponsor

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

Used By

These analytics are made available via the awesome Scarf package analytics library

Github Sponsors

This library is being built and maintained by me, @tannerlinsley and I am always in need of more support to keep this project afloat. If you would like to get additional support, add your logo or name on this README, or simply just contribute to my open source Sponsorship goal, visit my Github Sponsors page!

Diamond Sponsors

Get Your Logo Here!

Gold Sponsors

Silver Sponsors

Nozzle - Google Keyword Rank Tracker Nozzle - Google Keyword Rank Tracker

Bronze Sponsors

Supporters

Fans

  • Hugo Meissner
  • Benoit Leger-Derville
  • Thomas Funk
  • David Pickut
  • Jordan Soltman
  • Robert Tajnšek
  • Eric Lanehart (@pushred)
  • Anish P Patel (@anishpatelyaadada)
  • Janus Reith (@janus-reith)
  • Timo Mämecke (@timomeh)
  • Tyler Reiff (@reiff12)
  • Matt Stvartak (@mattstvartak)
  • JP Rosevear (@jprosevear)
  • Stefan Khan-Kernahan (@skhanker)
  • Jesse Jafa (@awareness481)
  • Salik Syed (@saliksyed)
  • Ujjwal Pachori (@UjjwalP2)
  • Chet Corcos (@ccorcos)
  • Yefri Laura (@yefrioscar)
  • Muhammad Umar (@umarmuha)
  • Joe Alden (@joalden)
  • Standard Resume (@StandardResumeSponsors)
  • Jay (@jjstrat3)

Become a Sponsor

Documentation

  • Installation - Walk through how to install React Table
  • Concepts - Read how React Table works and how you can use it better
  • Examples - Experience and learn from some examples and guides of how to use React Table and implement common patterns
  • API - Get to know React Table's API
  • FAQ - Learn how to use React Table for specific challenges and tasks
  • Previous Versions
  • Contributing - Become familiar with how to contribute back to React Table
  • Code of Conduct - Be a good React Table citizen by following these repository rules

Product Examples

The examples below are built by our partners from Creative Tim and demonstrate how React Table can be integrated in real world applications. There are many examples that you can play with and each premium product comes with a free & open source version, too!

Material Dashboard PRO React
Premium: $59 - Lite: Free
Black Dashboard PRO React
Premium: $59 - Lite: Free
Now UI Dashboard PRO React
Premium: $59 - Lite: Free

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.

172 Open More issues
Closed

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 Feb 6, 2019 by Grsmto 101
Closed

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 Oct 11, 2019 by hassankhan 66
Closed

columnHelper.accessor Type issue

Describe the bug

When defining the columns for the table, columnHelper.accessor seems to cause a type issue. Although, table seems to render fine.

Type error: Type 'ColumnDef<Room, string>' is not assignable to type 'ColumnDef<Room, unknown>'.

StackBlitz Type Error:

Type instantiation is excessively deep and possibly infinite.(2589)
(property) accessor: <"id", string>(accessor: "id", column: Omit<ColumnDef<Room, string>, "accessorKey">) => ColumnDef<Room, string>

Your minimal, reproducible example

https://stackblitz.com/edit/github-sq9c9a?file=pages%2Findex.tsx

Steps to reproduce

Line 22 on index.tsx

Expected behavior

No type error

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11 Pro Chrome: Version 103.0.5060.134 (Official Build) (64-bit)

react-table version

8.5.2

TypeScript version

4.7.4

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 Jul 29, 2022 by opti21 55
Closed

Sticky columns

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

opened Mar 8, 2018 by visarts 49
Closed

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 May 9, 2019 by Oskii2311 47
Closed

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 Jul 21, 2017 by iamakulov 47
Open

Cannot read properties of undefined (reading 'rows')

Describe the bug

Cannot read properties of undefined (reading 'rows') with basic example on github

const defaultData = [ { firstName: "tanner", lastName: "linsley", age: 24, visits: 100, status: "In Relationship", progress: 50, }, { firstName: "tandy", lastName: "miller", age: 40, visits: 40, status: "Single", progress: 80, }, { firstName: "joe", lastName: "dirte", age: 45, visits: 20, status: "Complicated", progress: 10, }, ];

const columns = [ columnHelper.accessor("firstName", { cell: (info) => info.getValue(), footer: (info) => info.column.id, }), columnHelper.accessor((row) => row.lastName, { id: "lastName", cell: (info) => {info.getValue()}, header: () => Last Name, footer: (info) => info.column.id, }), columnHelper.accessor("age", { header: () => "Age", cell: (info) => info.renderValue(), footer: (info) => info.column.id, }), columnHelper.accessor("visits", { header: () => Visits, footer: (info) => info.column.id, }), columnHelper.accessor("status", { header: "Status", footer: (info) => info.column.id, }), columnHelper.accessor("progress", { header: "Profile Progress", footer: (info) => info.column.id, }), ];

const table = useReactTable({ defaultData, columns, state: { columnPinning, }, getCoreRowModel: getCoreRowModel(), });

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( ))} ))} {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( ))} ))}
{header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )}
{flexRender( cell.column.columnDef.cell, cell.getContext() )}

Your minimal, reproducible example

local

Steps to reproduce

Basic example

Expected behavior

Work

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Windows latest Edge Chromium

react-table version

8.10.3

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 Sep 27, 2023 by clautro 0
Open

Column visibility not able to manage after refresh (even passing the same data while rendering on page load)

Describe the bug

When react-table render then I am doing Column Visibility and managing that Column Visibility JSON/OBJECT/Params (with required column names) in localstorage / Cookies so when I do again refresh then passing same value in column visibility method but it is just showing toggle (active/inactive) but it is showing all columnsrenders

Your minimal, reproducible example

https://codesandbox.io/s/new

Steps to reproduce

When react-table render then I am doing Column Visibility and managing that Column Visibility JSON/OBJECT/Params (with required column names) in localstorage / Cookies so when I do again refresh then passing same value in column visibility method but it is just showing toggle (active/inactive) but it is showing all columnsrenders

Expected behavior

Expected behaviour if I pass same format with required value in column visibility method/function then it should work as his behaviour

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

All Browser

react-table version

^7.8.0

TypeScript version

No response

Additional context

Code

{allColumns?.map((column, index) => ( <div key={column.id} id={column.id} className="column-list"> {/* {console.log(column,"status")} /}

{/ {console.log(column?.getToggleHiddenProps())} */} <Input {...column.getToggleHiddenProps()} type="switch" name={"status"} theme={selectThemeColors} id={switch-success${column.id}} checked={showColumn[index]?.show} onClick={() => setShowColumn((showColumn) => showColumn.map((content, i) => { if (index === i) { let newContent = { ...content }; newContent.show = newContent.show === 0 ? 1 : 0; return newContent; } return content; }) ) } className="mx-50" /> {column?.sortField}
))}

const filteredColumn = useMemo( () => allColumns.map((column) => { return { id: column?.id, col: column?.sortField, show: column?.totalVisibleHeaderCount, getToggleHiddenProps: column?.getToggleHiddenProps, }; }), [allColumns] ); // console.log(filteredColumn,"filteredColumnn") const [showColumn, setShowColumn] = useLocalStorage( "colunmns", filteredColumn );

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.
### Tasks

@tannerlinsley

opened Sep 27, 2023 by pruthvidarji1993 1
Open

Expanding Rows rapidly decreasing performance using vue-table

Describe the bug

I'm currently converting the react-table v8 examples to Vue3 examples. When trying to replicate the "Expanding" example (https://tanstack.com/table/v8/docs/examples/react/expanding), I ran into this issue, showcased here: https://codesandbox.io/p/sandbox/mystifying-herschel-hhzwnn?file=%2Fsrc%2FApp.vue%3A1%2C1 Clicking the "👉" button, changes the expansion model and causes the selected row toggle its expansion. The more often you trigger the expansion model change, the slower "getExpansionRowModel" gets, resulting in increasing lag.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/mystifying-herschel-hhzwnn?file=%2Fsrc%2FApp.vue%3A1%2C1

Steps to reproduce

Run the CodeSandBox and click any of the "👉" buttons for about 5-10 times. Debug times are shown in the console.

Expected behavior

The time to process "getExpandedRowModel" should stay consistent, as it does in the React example.

How often does this bug happen?

Every time

Screenshots or Videos

tanstack-vue-table-performance

Platform

macOS 13.5.2 M1 Chip

react-table version

*vue-table v8.10.1

TypeScript version

5.0.2

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 Sep 26, 2023 by falkfrentzen 3
Open

Dropdown in header fires the sorting fn.

Describe the bug

Dropdown in header fires the sorting fn.

When i press on the header and show the dropdown nothing happens and when i dismiss it also nothing happened but if i choose something from the dropdown like All Time it will fire the sorting. image

Steps to reproduce

Add dropdown menu as header inside accessor and try to select anything from the dropdown it will do sort and select at the same time.

Expected behavior

It should only change the dropdown status and not fire the sort

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

MAC OS chrome

react-table version

8.9.3

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 Sep 26, 2023 by AbdallaEmadEldinAbdalla 2
Open

SubRows should not be sorted when SortingState is an empty

Describe the bug

SubRows should not be sorted when SortingState is an empty.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/keen-tristan-2sj3ym

Steps to reproduce

Reproducible scenario:

  1. Create a table with the following items structure:

| Item 2 | | Item 5 | | Item 3 | | Item 1 | | Item 4 |

The second item should contain subitems

| SubItem 2 | | SubItem 1 | | SubItem 3 |

When user sorts by this column using ascending or descending type of sorting, it works fine including subitems. When SortingState is an empty array, it means there is no any sorting but subrows are sorted using descending type. So, it doesn't reset sorting for the subitems.

Expected behavior

It should reset sorting for the subitems.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 10, Chrome 116.0.5845.141

react-table version

8.9.3

TypeScript version

4.9.5

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 Sep 20, 2023 by StanislavStativa 0
Open

flexRender doesn't work with anchorEl of material ui popover

Describe the bug

You will see this warning when trying to use flexRender to render a jsx component which should be an anchor element of a popover, and the popover displays on top of the website instead of based on the anchor element

MUI: The `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.

In my opinion, it means we're rendering the component in the wrong way.

Your minimal, reproducible example

https://codesandbox.io/s/wizardly-microservice-snqm5g?file=/src/App.tsx

Steps to reproduce

  1. Click the 'WithFlexRender' button then see the popover's position
  2. Click the 'WithoutFlexRender' and then see the difference of popover's position

Expected behavior

The popover's position should be impacted by the anchor element instead of displays on top of the body

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/table/assets/92464450/c700c7d6-dfc4-4e74-8c23-bedadb02b54e

Platform

Chrome Version 117.0.5938.88 (Official Build) (64-bit)

react-table version

v8.8.5

TypeScript version

any

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 Sep 17, 2023 by 7ranquocbao 0

v8.10.3(Sep 25, 2023)

Version 8.10.3 - 9/25/2023, 6:25 PM

Changes

Fix

  • selection bug (f6d716c0) by Tanner Linsley

Packages

v8.10.2(Sep 25, 2023)

Version 8.10.2 - 9/25/2023, 6:13 PM

Changes

Fix

  • allow opt-out for selecting child rows (4fb5627d) by Tanner Linsley

Chore

  • add jsdoc to apis and options (#5089) (f1be41d6) by @KevinVandy

Packages

v8.10.1(Sep 20, 2023)

Version 8.10.1 - 9/20/2023, 1:44 PM

Changes

Fix

  • set spread es2015 with array from (#5082) (908cfcec) by @KevinVandy

Other

  • row pinning css (#5075) (5086e8a4) by @KevinVandy

Packages

v8.10.0(Sep 16, 2023)

Version 8.10.0 - 9/17/2023, 12:58 AM

Changes

Feat

  • Row Pinning (#5074) (15a425af) by @KevinVandy

Packages

v8.9.11(Sep 15, 2023)

Version 8.9.11 - 9/15/2023, 4:49 PM

Changes

Fix

  • limit deep keys even more (51214a88) by Tanner Linsley

Chore

  • add more tests for row selection functions (#5072) (31871e9d) by @KevinVandy

Packages

v8.9.10(Sep 14, 2023)

Version 8.9.10 - 9/15/2023, 12:09 AM

Changes

Fix

  • getIsSomeRowsSelected should ignore unselectable rows (fix #5060) (#5061) (6c8fb5e6) by Joey Miller

Chore

  • rollback ts versions for older rollup compat (#5071) (2f4b2118) by @KevinVandy
  • upgrade faker and typescript (#5070) (e7608ca7) by @KevinVandy

Docs

  • Update header-group.md (#4927) (e80fb3c3) by @mrlubos

Packages

Contents

    TanStack ⚛️ Hooks for building fast and extendable tables and datagrids for React
    Gelio TSLint rule for detecting invalid uses of React Hooks
    rrousselGit React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
    rrousselGit React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.
    beizhedenglong A set of reusable React Hooks.
    roman01la React Hooks for ClojureScript
    purescript-react An implementation of React hooks on top of purescript-react-basic
    relay-tools Use Relay as React hooks
    alfredosalzillo React like Hooks implementation for Flutter.
    TanStack ⚛️ Hooks for managing form state and validation in React
    trojanowski Use Apollo Client as React hooks
    getify Provides React-inspired 'hooks' like useState(..) for stand-alone functions
    react-native-community React Native APIs turned into React Hooks for use in functional React components
    BrainMaestro Easily manage git hooks in your composer config
    nearform 🎣 Minimal hooks-first GraphQL client
    antonioru 🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
    antonioru 🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
    yyx990803 Experimental React hooks implementation in Vue
    LeetCode-OpenSource React hooks for RxJS
    sds A fully configurable and extendable Git hook manager
    ethereum-boilerplate React components and hooks for fast building dApps without running own backend
    Share this repo

    Related Repos


    Table
    374
    😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
    wellyshen 😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
     
    Table
    28
    Editable react table with support for types.
    archit-p Editable react table with support for types.
     
    Table
    1.4k
    🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
    tajo 🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
     
    Table
    107
    react hook for using google spreadsheet as a data table (API endpoint)
    idw111 react hook for using google spreadsheet as a data table (API endpoint)
     
    Table
    4.2k
    An elegant virtual list component for React
    petyosi React Virtuoso is a simple, easy to use React component made to render huge data lists. Out of the box, Virtuoso: Handles gracefully variable sized items; no manual measurements or hard-coding of item heights; Supports grouping wi
     
    Table
    1.4k
    A react table component to display large datasets with high performance and flexibility
    Autodesk react-base-table BaseTable is a react table component to display large data set with high performance and flexibility Install # npm npm install react-base-table --save # yarn yarn add react-base-table U
     
    Table
    352
    React Tabulator is based on tabulator - a JS table library with many advanced features.
    ngduc react-tabulator React Tabulator is based on tabulator - a JS table library with many advanced features. Live Demo: Codesandbox 🌟 Features Tabulator's features: Filters Sorting Formatting
     
    Table
    833
    ⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions
    drcmda npm install mauerwerk Demo: https://codesandbox.io/embed/0582jolnl Simplified Demo: https://codesandbox.io/embed/z6ly40071p How to use import { Grid } from 'mauerwerk' &lt;Grid // Arbitrary d
     
    Popular
    Table
    22.4k
    ⚛️ Hooks for building fast and extendable tables and datagrids for React
    TanStack name route Getting Started / Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all
     
    Table
    72
    A React and Redux-based table for server-processed data.
    kenforthewin redux-remote-datatable Test it out here. Installation npm i redux-remote-datatable --save Usage Add the reducer. import { dataTableReducer } from 'redux-remote-datatable'; ... const appReducer =
     
    Table
    95
    React grid using CSS Grid and styled-components
    nem035 react-gridit React grid using CSS Grid and styled-components Install npm i react-gridit or yarn add react-gridit Examples or checkout the examples React app. You can run the examples locall
     
    Table
    1.1k
    An Excel-like grid component for React with custom cell editors, performant scroll & resiz...
    denisraslov React Spreadsheet Grid An Excel-like grid component for React with custom cell editors, performant scroll &amp; resizable columns The key features This is an Excel-like Spreadsheet Grid component that supports:
     
    Table
    672
    A React table component.
    rsuite rsuite-table A React table component. Features Support virtualized. Support fixed header, fixed column. Support custom adjustment column width. Support for custom cell content. Support for displaying a
     
    Table
    5.3k
    Excel-like data grid (table) component for React
    nadbm React-Datasheet A simple react component to create a spreadsheet. Demo here: https://nadbm.github.io/react-datasheet/ Examples are located in https://github.com/nadbm/react-datasheet/tree/master/docs/src/examples Current
     
    Table
    1.9k
    Old examples of ZEIT Now projects you can deploy yourself
    vercel next-react-datasheet Example using Next.js and react-datasheet, with built-in server-rendering. Demo: https://react-datasheet.now.sh How to Deploy Install Now and run: now How to develop Clone this re