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

Custom Loader does not get applied with respect to react-table

I am trying to over ride the default loader provided by react-table with the Spinner provided by the semantic-ui-react . But this does not seem like working. I have maintained three components; one is the App, one for Data Grid and the other for the…
joy08
  • 9,004
  • 8
  • 38
  • 73
5
votes
2 answers

How to merge cell in react-table

I am using react-table and want to merge cell of specific cells based on their number inside. It likes remove divider border. it looks like this: https://i.stack.imgur.com/2sJ9O.png I tried with className in Columns by using border-bottom: 1px solid…
Hung Vu
  • 81
  • 1
  • 3
  • 12
5
votes
1 answer

how to show alternate red and green color of row?

I am using react table in react.I learn from here https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples and from here https://www.npmjs.com/package/react-table I want to show my rows alternate color "red" and "green" having a…
user944513
  • 12,247
  • 49
  • 168
  • 318
5
votes
0 answers

react-table inner input losing reference to itself after onChange

I am using the react-table library to create a table with filterable columns. The table is of the following format: const defaultFilter = [{ id: 'title', value: '', }]; const ExampleTable = ({ documents, filter = defaultFilter }) => { const…
Xenyal
  • 2,136
  • 2
  • 24
  • 51
5
votes
1 answer

onClick event - change data for a single row in react table

I have a column in my react table that is using a variable (named item) for displaying its data. As shown in the code below: { Header: this.generateHeaderCell(this.props.headers[3]), accessor: 'last_updated_status', Cell: (props: any) =>…
Pranav Bhatia
  • 155
  • 4
  • 14
5
votes
2 answers

Delete particular item in React Table?

Header: "Delete", id:'delete', accessor: str => "delete", Cell: (row)=> ( this.onRemoveHandler(row,props)} style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}> Delete ) React Table This is…
Amit
  • 325
  • 1
  • 5
  • 16
5
votes
1 answer

Change React-Table default styling

I have a react-table, each row has the arrow that when clicked expands into a sub-component of another react-table. I want to change the color of that arrow as well as move it to the right side of the column if possible. Does anyone know if that's…
Augustus Brennan
  • 147
  • 1
  • 6
5
votes
5 answers

How do I change the style of the header using ReactTable

I need to change the default style to the style below
Felipe Muniz
  • 53
  • 1
  • 1
  • 4
5
votes
1 answer

How to rerender only the updated row using react-table?

I am trying to implement an editable data grid using react-table. The code looks something like below: The problem I am facing is whenever a cell value in a specific row is updated the entire visible…
bp4D
  • 915
  • 12
  • 20
5
votes
5 answers

How to add a sortable index column in react-table

So I'd like use react-table to create a sortable column that numbers each row (according to its position in the data set). According to docs, sorting is done via a sorting function that compares the accessor value. However, the accessor option does…
strider
  • 5,674
  • 4
  • 24
  • 29
5
votes
1 answer

ReactTable: changing pageSize based on container height #552

I've accomplished to change the pageSize based on my live resizable container: It works well until I change page. Once I change page, if I reduce the height of the container, the height of the table can't go lower then the height when I changed the…
Francesco Meli
  • 2,484
  • 2
  • 21
  • 52
4
votes
3 answers

TanStack react table v8 style each cell based on the cell value

We are migrating our tables from v7 to v8. And I'm kinda got a problem with cells conditional styling. So basically what I want to do is, based on a status (which is coming to table data) I need to add a specific className to every cell in a row. In…
Null
  • 518
  • 7
  • 13
4
votes
0 answers

How to implement server-side columns filtering with different filter operators in TanStack Table (React-Table V8)

I am trying to implement server-side column filtering in TanStack Table (React-Table V8). The problem is that I don't know how to convert the ColumnFiltersState object to the right format for the backend. My backend uses nestjs-paginate which uses…
monotype
  • 217
  • 2
  • 10
4
votes
1 answer

TypeError: Cannot read properties of undefined (reading 'filter') Tanstack table (React)

I have a tanstack table in NextJS and it works perfectly in dev. However, in prod, it gives a client-side exception: framework-3b5a00d5d7e8d93b.js:9 TypeError: Cannot read properties of undefined (reading 'filter') at…
Joel Hager
  • 2,990
  • 3
  • 15
  • 44
4
votes
1 answer

Is this possible in react-table: Displaying colored circles according to numbers?

Hello I have no idea on how to get the result on the right side picture. Is this possible with react-table ?? If yes, how do I do? I have grades for comments 1,2,3,4, and instead of display numbers, I would like to fill in different colors…
Zokulko
  • 211
  • 4
  • 25
1 2 3
…
92 93