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
12
votes
3 answers

Something went wrong with react table using typescript

I have an typescript error when using react-table with useGlobalFilter. I just followed some instructions on internet. Here is my code: const DataTable : React.FC = ({columns, data}) => { const { getTableProps, …
Quang Khải Đàm
  • 555
  • 1
  • 6
  • 21
11
votes
1 answer

tanstack v8 react table - how to sort server-side with manualSorting

new to V8 of tanstack react table ... appears to be quite different to V7 in areas would love some advice. I need to sort server-side using apollo graphql from reading the docs i know that you need to use the prop "manualSorting" It just isnt clear…
devmike9113
  • 111
  • 1
  • 3
11
votes
3 answers

I want to create a button inside a cell of react-table column

I am trying to create this button that works well when I am using the map() function : {bands.events.map((group, i) => ( {group.start} {" "} …
artworkjpm
  • 1,255
  • 2
  • 19
  • 40
11
votes
4 answers

Fixed column in ReactTable component

Could we fix a column when we get a horizontal column with smaller pages? For example could we fix the column firstName in this example. Cheers!!
bhb
  • 2,476
  • 3
  • 17
  • 32
10
votes
2 answers

React useTable hook with typescript

So I have a JavaScript class with useTable. In Java script its been used like below import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table"; const {getTableProps,getTableBodyProps, headerGroups,…
AMendis
  • 1,346
  • 4
  • 18
  • 34
10
votes
5 answers

How does one supply a custom sort function for react table 7?

The documention for useSortBy sortType properties says: sortType: String | Function(rowA: , rowB: , columnId: String, desc: Bool) Used to compare 2 rows of data and order them correctly. If a function is passed, it must be…
Tom
  • 6,325
  • 4
  • 31
  • 55
10
votes
2 answers

How to pass props to row in react-table

I've been following https://blog.logrocket.com/complete-guide-building-smart-data-table-react/. To apply custom styling depending on cell value, I'm updating the column object like so: return { Header: key, accessor: key, width: "150", …
Maikol
  • 195
  • 2
  • 2
  • 10
10
votes
3 answers

React-Table: not assignable to type Partial>

I try to use "react-table": "^7.0.0-rc.15" with React + Typescript. I get the pagination example from sandbox https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination and I try to run it. But in the point…
user3417479
  • 1,830
  • 3
  • 18
  • 23
10
votes
3 answers

React-table Individual Cell Style

I am using react-table and want to change the background color of specific cells based on their number inside. Ex. Cell > 1 = green, Cell < 1 = Red, and different shades in-between. I have seen a ton of stuff about coloring rows and columns, but am…
David
  • 786
  • 3
  • 9
  • 19
10
votes
3 answers

Custom "Previous" & "Next" text in react-table

Is there a way to customize the text in the footer part of react-table? I'm trying to customize the default text there. Thanks in advance.
cankentcode
  • 460
  • 1
  • 5
  • 20
9
votes
1 answer

react-table rows sort filter resetting on data change

I am trying to sort data in a react-table, but as new data arrives the sorts are nullified. The component containing the table gets its data from a prop. That data itself comes from redux, which is updated every 15 seconds with the latest data from…
S..
  • 5,511
  • 2
  • 36
  • 43
9
votes
2 answers

How to prevent expanded React-Table row from collapsing on re-render?

I have a simple react-table with an expanded sub component whose data is tied to a Redux state object. When the sub component gets expanded, I trigger an api call to get some additional data to be lazy-loaded onto the redux store. The redux store…
LCIII
  • 3,102
  • 3
  • 26
  • 43
9
votes
2 answers

Display boolean and timestamp values inside react-table : React Table+ React+Typescript

I am trying to print the boolean and timestamp values that are returned by some API. I am unable to do the same. Help would be appreciated column config object:
joy08
  • 9,004
  • 8
  • 38
  • 73
9
votes
1 answer

React table- doesn't refresh content

I am trying to refresh content in the table generated with this library react-table. However, for some reason, it doesn't work, even though I change the state of the parameter which I pass to the Component.
Grzegorz Brzęczyszczykiewicz
  • 1,630
  • 1
  • 20
  • 45
9
votes
1 answer

React-Table: How to change the background color of a row if it is clicked (selected) with the mouse?

I have the following code for retrieving data of the clicked row: { return { onClick: (e, handleOriginal) => { if (typeof rowInfo !== "undefined")…
dergroncki
  • 798
  • 1
  • 12
  • 24
1 2
3
…
92 93