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

How to use drag and drop functionality both columns and rows in my React Table - ReactJS

I have created a table in React Table. I want to add both drag and drop functionality on columns and rows. How can I do this? Here is my CodeSandbox Sample - https://codesandbox.io/s/2wp7jk23kr Here I have got a Code Sandbox for drag and drop rows -…
tommy123
  • 587
  • 1
  • 10
  • 28
16
votes
3 answers

How to change CSS of columns - ReactTable

I am using react-table in my application. I am stuck in doing one thing i.e. changing the CSS of columns while a column is being resized. Currently when you resize a column only cursor changes. What I want is to add border to the selected column. I…
Rahul
  • 5,594
  • 7
  • 38
  • 92
16
votes
2 answers

React-Table column fixed width spoils whole table

Can someone explain this to me why i cant set fixed width on First Name column?It's setting passed width but it spoils whole table.If you tinker with resizing(by mouse) the column other columns will appear.Is this due to flebox?Im not familiar with…
Jan Ciołek
  • 1,796
  • 3
  • 17
  • 32
15
votes
1 answer

Why use `useTable` over `ReactTable` when using react-table

On their npm page, the example shows the usage of component: import ReactTable from 'react-table' ... render() { return ( ) } However, on their API Docs and…
Andy
  • 198
  • 1
  • 1
  • 7
15
votes
2 answers

react-table render component inside data

I'm attempting to add a component inside the data using react-table package (https://www.npmjs.com/package/react-table#example) Using the example from the package readme, I'm trying to use a fancy component to add an image to a cell: using ** to…
benishky
  • 901
  • 1
  • 11
  • 23
14
votes
0 answers

fetch from api that I send requested in react-table

I will need a server-side table so after I saw react-table got 9k+ stars on github then decided to use it. I'm trying to build a React-Table which can make polling to a remote server every requested data to fetch newest data. In the example I use…
Şehir Rehberi
  • 225
  • 2
  • 11
14
votes
3 answers

React table dynamic page size but with size limit and pagination

I am using React Table and i need to set the table rows dynamically depending on the length of my data. this is what i got: let pgSize = (data.length > 10) ? 5 : data.length;
Page F.P.T
  • 653
  • 4
  • 11
  • 24
14
votes
4 answers

Access filtered data in ReactTable

I am using ReactTable, and have filterable set to true. I need to access the data that gets returned after applying filters, so I can generate CSV's of the filtered down data. Any ideas on how I might be able to get the filtered down data, as JSON?…
Ryan Rebo
  • 1,278
  • 2
  • 13
  • 27
13
votes
2 answers

How do you call a function in a react-table accessor? (reactjs)

I am modifying a ReactJS component. I have added a react-table to get the pagination, which works beautifully. But one of the columns in the table needs to call a function that is also in this component, so it can render a link depending on the…
ann mcg
  • 131
  • 1
  • 1
  • 5
13
votes
6 answers

How to get React Table Row Data Onclick

Hi I am trying to set up my react app such that when you click on a button in a row item in my react-table the data in that row is passed onto another component. At the moment I am simply trying to console.log the correct data but am unsure of how…
Tamjid
  • 4,326
  • 4
  • 23
  • 46
13
votes
3 answers

How to disable and hide the pagination footer for react-table?

I'm new to react-table. Currently, I have a 5 rows table to render on react-table, and I don't need the pagination function. I understand turning pagination off, it can be done by "pagination={false}". However, the pagination control still showing,…
user3547219
  • 171
  • 1
  • 1
  • 4
12
votes
1 answer

How to handle one to many relationship in TanStack Table (React-Table V8)

I'm currently trying Tanstack Table, which is a great library! What I'm trying to do is build up a table that looks like this: My data come from an API with this type: type Accounting = { category: string; total: number; // Sum of all expenses …
Zenor27
  • 171
  • 1
  • 11
12
votes
1 answer

How to implement server-side pagination using react-table?

I am new to react-table. I am trying to implement server-side pagination but I am not getting the logic on how to detect the page change in the new react-table version. I am using fetch data proper I am unable to detect the change. Each time I click…
Sriharsha K
  • 303
  • 1
  • 6
  • 18
12
votes
3 answers

React-Table - How to remove the 'Toggle sortBy' tooltip from the column header?

In the latest version (7.5.x) of React-Table, when using the Material-UI Table components, is there a way to remove the 'Toggle sortBy' tooltip from the column header? Two tooltips I have a tooltip with the column header name. both tooltips appear…
Vladi Feldman
  • 872
  • 1
  • 8
  • 16
12
votes
5 answers

disable sort in react-table

let { getTableProps, getTableBodyProps, headerGroups, prepareRow, page, canPreviousPage, canNextPage, nextPage, previousPage, state: { pageIndex, sortBy } } = useTable( { columns, data, …
Md. Parvez Alam
  • 4,326
  • 5
  • 48
  • 108
1
2
3
…
92 93