Stack Overflow
Stack Overflow

Questions tagged [react-table]

React Table is a lightweight, fast and extendable datagrid built for React.

Tanstack table for react

Headless UI for building powerful tables & datagrids.

Supercharge your tables or build a datagrid from scratch while retaining 100% control over markup and styles.

Features

  • Lightweight (10 - 15kb)
  • Tree-Shaking
  • Headless
  • Cell Formatters
  • Auto-managed internal state
  • Opt-in fully controlled state
  • Sorting
  • Multi Sort
  • Global Filters
  • Columns Filters
  • Pagination
  • Row Grouping
  • Aggregation
  • Row Selection
  • Row Expansion
  • Column Ordering
  • Column Visibility
  • Column Resizing
  • Virtualizable
  • Server-side/external Data
  • Nested/Grouped Headers
  • Footers

Resources

1381 questions
5
votes
1 answer

SyntaxError: react-table/src/publicUtils.js: Support for the experimental syntax 'jsx' isn't currently enabled

I'm having problems when building with webpack. This is the error that I see when I'm building... ERROR in ./node_modules/react-table/src/publicUtils.js 10:35 Module parse failed: Unexpected token (10:35) You may need an appropriate loader to handle…
L_Cleo
  • 1,073
  • 1
  • 10
  • 26
5
votes
2 answers

How to initially auto-expand all rows with react-table 7?

I'm looking for an easy and clean way to make all rows to be auto-expanded when using react-table v7. When I map all the data to true and set it as an initial state, it does not expand my rows. const expanded = { 1: true, 2: true, …
simPod
  • 11,498
  • 17
  • 86
  • 139
5
votes
1 answer

How to access to another column's value from a column in v7 (React-Table)

I see in previous versions that you can access it using : const columns = [ { Header: "Name", accessor: "name", Cell: (e) => { return e.original.name; } } ]; But in v7 it doesn't work.
antoninislam
  • 117
  • 1
  • 2
  • 9
5
votes
1 answer

Create nested table using react-table v7

thanks for your help in advance. The problem that I am trying to solve is to create a table with react-table v7 and within that table using the expand and display another table with data related to the first selection as it is attached in the…
Cristian Turcios
  • 63
  • 1
  • 6
5
votes
1 answer

react-table and TypeScript: how do custom properties on columns work?

I'm building a table using react-table, but TypeScript complains about properties I've added to the columns. My columns are set up like so: const columns = useMemo( () => [ { Header: 'Name', accessor: 'name', …
Théophile
  • 1,032
  • 10
  • 16
5
votes
1 answer

React table Gives empty table in build

This is a very strange issue but I was using react-table 7.0.0.rc16 and I recently upgraded to react-table 7.0.1 the problem is my data works in dev mode but as soon I create a react build it wont render anything I would like to know why and I am…
vinayak shahdeo
  • 1,348
  • 2
  • 11
  • 21
5
votes
0 answers

How to use rowspan in react-table

Any idea how to use rowSpan in react table. for below example usernameFormatter there are multiple values. Note: attach picture is copied but that's looks like what I wanted const columns = [ { accessor: "id", show: false, …
Oshini
  • 613
  • 4
  • 17
5
votes
1 answer

How to access the row index in the columns of a react-table component

I have a column inside my columns array for my react-table Table component that needs to render a Dropdown button inside the cell to allow users to render that row of data into another modal component to edit. I am using dropdownToggles, an array of…
rantao
  • 1,621
  • 4
  • 14
  • 34
5
votes
1 answer

React-Table V7 useSortBy Hook not working properly

Using react-table V7 useSortBy hook's toggleSortBy function toggles ascending first then descending and then on third toggle instead of setting isSortedDesc to false, it sets isSorted to false. I want to keep toggling between true and false values…
priyanshu sinha
  • 595
  • 6
  • 14
5
votes
2 answers

Re-rendering Table component when parent passes new or updated data

I am transitioning from React Table 6 to 7, which comes with a lot of new changes as React Table 7 is now a headless utility library, built with lots and lots of hooks. This is much different from React Table 6. I am not too familiar with hooks, and…
Canovice
  • 9,012
  • 22
  • 93
  • 211
5
votes
1 answer

React table - rearranging - group by keep position of column

I'm using the useGroupBy hook to group my react-table table. However when grouping the default behaviour is to group re-arrange the columns in the table but I wan't to keep them in the same position, do you know how to do this with the optional…
Cisum Inas
  • 11,552
  • 11
  • 40
  • 55
5
votes
1 answer

React Table using hooks expand and collapse rows

I am using react-table component inside my project. The row expansion property is something that my features utilized and it is working fine now. I need the ability to collapse all the rows while I expand a row. ie Only one row should be open at a…
Vivek V Nair
  • 199
  • 1
  • 3
  • 12
5
votes
2 answers

Has column show property stopped working in latest react-table v7?

I have used the show property to show/hide columns in my table earlier and it has worked fine using react-table v7. However, recently I cannot get it to work any longer, since I've made a bunch of changes and my table is quite complex I'm not sure…
jola
  • 977
  • 2
  • 10
  • 31
5
votes
2 answers

React Modal doesn't show up correctly

I'm having a problem with a modal which doesn't show up correctly. When I click the button the screen becomes all gray without showing me the content of the modal and when I try to insert a text in the input lets me do it, even if you don't see what…
Salah Miftah
  • 146
  • 8
5
votes
1 answer

How to handle click row event on react-table

All the examples on the internet are using old-style > component, I could not found any example for showing how to handle row_click event. I tried my below example but no luck. It won't be stopped by const onRowClick = (state, rowInfo, column,…
newBike
  • 14,385
  • 29
  • 109
  • 192
1 2 3
…
92 93