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
4
votes
1 answer

React table - how to merge tables for specific column and cell value

This is 2 tables that I've created. and it's its data const callData = [ { id: 1, type: "call", volume: 50000, strike: 3000 }, { id: 2, type: "call", volume: 30000, strike: 5000 }, { id: 3, type: "call", volume: 20000, strike: 7000 } …
CCCC
  • 5,665
  • 4
  • 41
  • 88
4
votes
1 answer

Is it necessary to use useMemo in react table?

I would like to know it's necessary to use useMemo in react table for columns and data if yes why it's so? This is my code: import React, { useMemo } from "react"; import useData from "../../hooks/useData"; import Table from "./Table"; import…
r121
  • 2,478
  • 8
  • 25
  • 44
4
votes
2 answers

react-table CellProps issue with on TypeScript

On react-table v7, I have a table where each row is a nested object. When using TypeScript, For the properties that are not directly on the base row object, I have some issues getting the column definition array to work properly. As seen in the…
Knut Marius
  • 1,588
  • 18
  • 40
4
votes
1 answer

React-table - disable global filter for one column, but add another filter for disabled one

Is it possible to disable global filter for one column, but add another filter for disabled one in the react-table ? Something like:
klijakub
  • 845
  • 11
  • 31
4
votes
1 answer

React-Table: Get selectedRowIds in parent component

I'm rendering a react-table and need to know which rows are selected in the parent component. Here is my table component: const TableComponent = (props) => { const { columns, data } = props; const { getTableProps, getTableBodyProps, …
MarksCode
  • 8,074
  • 15
  • 64
  • 133
4
votes
4 answers

How to use useMemo with an external API?

I'm working with react-table library for filtering and pagination. I am requesting data from a custom API using Node and rendering it using useTable hook from react-table. The documentation for react-table says the table data should be memoized, so…
yksolanki9
  • 429
  • 2
  • 7
  • 14
4
votes
1 answer

Can't fix the width of React-Table column

Super noob question here, I'm trying to fix the widths of my react-table columns but it doesn't change (it stays at generated according to the width of the items inside), most of this table is from a tutorial to be honest so I'm not sure how most of…
JeannelMYT
  • 41
  • 1
  • 4
4
votes
3 answers

Why is my react Table not updating the data?

I got a react Table that I want to delete or modify my data. My code is below for all my cells. deleteTableElement = (row) => { let data = this.state.list.data; data.splice(row.id, 1); this.setState({ list:{ …
Reinaldo Pastran
  • 61
  • 1
  • 1
  • 8
4
votes
2 answers

Problems with react-table using "useSortBy"

I am having some problems on react-table using useSortBy. With no useSortBy the table works fine. Getting this error: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or…
Daniel Teixeira
  • 61
  • 7
4
votes
1 answer

Prevent re-sort on data change or while row is being edited

On react-table when the table is sorted and data changes, the table can either reset (go to default sort state) or re-sort (by putting the edited row in the correct place and keeping the column sort selection) This is handled by autoResetSortBy:…
Juan Rebella
  • 43
  • 4
4
votes
2 answers

React table is getting sorted on filter

I am creating a grid for my project where I need to implement column filtering. I have done it mostly, but facing an issue, that is whenever I click on the filter input box for ID column that column gets sorted. I have tried using…
Polly Banerjee
  • 197
  • 1
  • 10
4
votes
0 answers

How to re-render only one cell?

I am using react-table v7 and I'm running into an issue where when I change one cell's data, the entire table re-renders. I have thousands of rows, so re-rendering every time is pretty slow. My react-table calls a form that the user can fill out to…
Anonymous
  • 239
  • 4
  • 16
4
votes
1 answer

react-table - How to fix width of th elements

I using react-table and I want to use table-layout: fixed. I would like to specify the width of the columns using classNames. Is there any way react-table allows to set a fix width for some columns ? If not, How could I add classNames to …
kitimenpolku
  • 2,604
  • 4
  • 36
  • 51
4
votes
3 answers

How to resize columns with React Table Hooks with a specific table width

I'm trying to implement the resizing feature with React-Table and the Hook useResizeColumns. I want to force the table to take always the full width of its container. Only the columns should change theirs size. Not the table. If you take a look into…
Zied Hf
  • 491
  • 3
  • 10
  • 30
4
votes
2 answers

How to add react-table default filter

I am using react-table 7.0.4 (https://www.npmjs.com/package/react-table). I want to apply a default filter for the column 'Status' ('leaveRequestStatus') when the table loads for the first time (filter is a dropdown). I tried with 'defaultFiltered'…
Asela
  • 303
  • 1
  • 5
  • 16
1 2 3
…
92 93