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
7
votes
2 answers

Removing a header name in react table and making it empty

I am trying to create a new checkbox column for a react table. I don't need a header name for the checkbox column. If I put in an empty string in the header, my app crashes and I get the error message below const columns = React.useMemo( …
Baba
  • 2,059
  • 8
  • 48
  • 81
7
votes
2 answers

How to customize a column in react table 7

I want to add a button in one of my columns, so that when i click it, i can get the details of the row in which the button is located. Currently there is no button in my table and i don't know how to put a button init. Also i want to know how can i…
Nabeel Hussain Shah
  • 774
  • 2
  • 9
  • 15
7
votes
1 answer

How to clear all filters in react-table

I am using react-table v7 (https://www.npmjs.com/package/react-table) . I am able to filter the data (referred from https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering ) and I am using SelectColumnFilter function…
Blessy Julie
  • 899
  • 3
  • 8
  • 19
7
votes
3 answers

React table getting issue TypeError: Cannot read property 'forEach' of undefined

Since today morning we are getting below issue, After building latest node_modules : **methods.js?ab36:59 Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined at ReactTable.getDataModel (methods.js?ab36:59)
hari
  • 144
  • 1
  • 2
  • 9
7
votes
3 answers

React-Table with hooks looses focus on input inside table?

CodeSandBox: https://codesandbox.io/embed/react-table-editable-content-ggvcy When attempting to handle input into React-table my input is losing focus so i can only type 1 character at a time. How can i fix my render cycle to allow input? Edit: I…
Quinma
  • 1,436
  • 2
  • 17
  • 39
7
votes
2 answers

Selecting multiple rows with React-Table? (Shift + Click)

does anyone know a way to select multiple rows with React-Table. Say if we wish to click a cell in a row and then press SHIFT and then select another row and perhaps color code the selected rows with CSS? Is this even possible?
Rachel
  • 557
  • 10
  • 21
6
votes
3 answers

React Table Typescript "Type is not assignable"

I've set up my React project with Typescript and React-Table. I was following the Quick Start Guide from the React-Table website and got an error. const data = React.useMemo( () => [ { col1: 'Hello', col2: 'World', }, …
Royi Levy
  • 513
  • 1
  • 3
  • 14
6
votes
2 answers

How can I filter out a date between a range of date in a react-table

How can I filter table data on the basis of a range of dates? setting filter to date column here: const tableInstance = useRef(null); const filterTable = (dates) => { if (tableInstance.current) { …
Hafiz Muhammad Bilal
  • 305
  • 3
  • 14
6
votes
1 answer

React-table date range filter

I'm trying to implement a date range filter in my React-table. When I'm changing the start or end date, it triggers the filter function, creating the min and max date but when it finishes no dates are being filtered and the input is empty from the…
Shira
  • 394
  • 1
  • 6
  • 21
6
votes
2 answers

How to deal with "Warning: validateDOMNesting(...): cannot appear as a child of

I'm using react-window to create virtual tables with react-table 7 (and material UI tables). I'm embedding FixedSizeList instead TableBody. Something like this:
Tom
  • 6,325
  • 4
  • 31
  • 55
6
votes
1 answer

How to make a Column data clickable one in React table?

I'm using React Table (React Bootstrap Table-2) to display a table in a page and populate it with data from an database API. I want to make the values displayed in one of the columns as links( hrefs). This particular column contains only URLs. What…
Thomas Martin
  • 666
  • 2
  • 6
  • 26
6
votes
1 answer

Filter data going through Nivo Bar Chart

Using react-table, I can filter the data really well, but would like it to be more dynamic Now what I'm struggling to complete is filtering the data in the graph, so that it's more meaningful, partly by clumping products from singular brands…
LeCoda
  • 538
  • 7
  • 36
  • 79
6
votes
4 answers

Bubble up selection in react-table

I'm trying to pass the current selection in my react-table component up to the parent to do some logic when a selection has occurred, but I can't seem to find a way to reliably get the selection. I've tried the following: function Table({ columns:…
Chris
  • 7,830
  • 6
  • 38
  • 72
6
votes
1 answer

How to render an editable table with formik 2 and react-table 7?

I have this scenario where I load up a form's data from a server (let's say a user entity with the user's list of friends). The form has the list of friends with editable names rendered as a table with react-table 7. The problem I am facing is that…
Dan Caragea
  • 1,784
  • 1
  • 19
  • 24
6
votes
1 answer

Ant Design + React-table. How can I build the filtering capability of react-table on top of the UI elements provided by Ant Design?

I've been looking at the docs between react-table and Ant Design's table element. It seems that Ant design is a bit opinionated in regards to allowing the developer freedom to add props to either the , , or . React-table is a…
kdizzle
  • 577
  • 1
  • 11
  • 23
1 2 3
…
92 93