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

Access nested JSON in React table

I want to display nested JSON data in a react-table. I tried it like this: render() { const columns = [{ //Not Displaying Header: 'Owner ID', id: 'ownerid', accessor: '_links.customer.href.ownerid', // <- i think this…
M.Dan
  • 554
  • 1
  • 4
  • 16
6
votes
3 answers

React Table not sorting numbers correctly

React-table is sorting decimals like this: My guess is that, although I'm receiving numbers from server, react-table handles them as text. So, I modified the accessor like this: accessor: d => Number(d.Invoice_Weight).toFixed(2) but I keep getting…
Morgana
  • 337
  • 8
  • 19
6
votes
2 answers

Dynamically update the count for number of records available in react-table

I am a beginner in React JS. I am using React-tables How do I get to display the total number of records available in the table and update the count as I filter? I have tried to add the array length -- Total Records: {this.props.data.length}. But…
pree
  • 239
  • 1
  • 3
  • 12
6
votes
3 answers

How to change Table Cell width in Material-ui React table

I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns. I've tried manually setting the width in each cell like this:
Uciebila
  • 481
  • 2
  • 9
  • 27
6
votes
1 answer

React tables Calculating Footer sum on page change on Sort on search, how can we achieve that

React tables Calculating Footer sum on page change on Sort on search, how can we achieve that. import React from "react"; import { render } from "react-dom"; import ReactTable from "react-table"; import "react-table/react-table.css"; const data =…
Srikanth Gowda
  • 6,163
  • 7
  • 19
  • 34
6
votes
1 answer

Horizontal scroll in React Table

I have a problem to get pretty basic functionality, ie. I'd like to set horizontal scroll on React table when the page is less wider then the table size. There is nothing unusual in my code but I'll leave it here anyway:
Murakami
  • 3,474
  • 7
  • 35
  • 89
6
votes
1 answer

React table with static header on browser scroll

Is there a table component for react, which would have fixed header while browser scrollbar scrolls it's long body? (The table height grows as user clicks "Load more"). Here's a code sample: https://codesandbox.io/s/rm0x6lmypm The table header…
Dmitry Stril
  • 1,385
  • 4
  • 16
  • 34
6
votes
1 answer

ReactTable is ordering elements vertically

I'm trying to use the 'react-table' library in my application. I'm not sure what I'm doing wrong but all of the elements in the table appear vertically on the left side, and not in a grid. This was happening in my application, so I tried creating a…
Zip184
  • 1,792
  • 2
  • 21
  • 34
6
votes
2 answers

React-table package: formatting float as currency

I am using react-table package and it's table. In the table column props I have submitted object as it formats properly. Header: 'Charter', columns: [ { Header: 'Title', accessor: 'charter_title', …
Lululu
  • 675
  • 3
  • 9
  • 21
6
votes
1 answer

How to reset filter fields in React Table?

Is there an instruction for reset the filter fields in some moment ? To filter for any column works fine calling in onFetchData an Ajax call to get the data filtered. But some actions that I need after info filtered, re-render the table. In another…
Angel Cuenca
  • 1,637
  • 6
  • 24
  • 46
5
votes
2 answers

React table v8 - how to render custom cell content?

I'm using @tanstack/react-table v8, and I want to have some icons and buttons in one of my table row cells. Looking at the docs I can use a display column for this: Display columns do not have a data model which means they cannot be sorted,…
Thijs
  • 587
  • 5
  • 16
5
votes
2 answers

Global Filter in react-table v8 isn't working

I have a slightly modified implementation of the react-table v8 filters: https://tanstack.com/table/v8/docs/examples/react/filters In the original they seem to use a custom filter function to filter the table globally but it requires another library…
Nicolas Carvajal
  • 53
  • 1
  • 4
5
votes
2 answers

How can I render/update my table using REACT?

I'm not able to do multi cross filtering, when I click on Apply (to apply all my selected options from my dropdowns) or Cancel button (to reset the selected options). For example filter by taste and availability (please see the picture). But I'm not…
Zokulko
  • 211
  • 4
  • 25
5
votes
1 answer

React-table: how to use getCellProps, getHeaderProps etc.?

The documentation of React Table is really sparse and I can't make sense of the examples. For example here: https://react-table.tanstack.com/docs/examples/data-driven-classes-and-styles, we see this code: {row.cells.map(cell => { …
Plumpie
  • 426
  • 1
  • 6
  • 22
5
votes
1 answer

How to add a new editable row in React-Table?

I'm building a dynamic table using React-Table and i want to add a new row of editable cells. At the moment i can add new row but only when i press the global edit button i can edit it, instead i want to add a row which would be editable at…
stephan bazbaz
  • 63
  • 4
1 2 3
…
92 93