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
65
votes
10 answers

Select row on click react-table

I am trying to find the best table to use with my react apps, and for now, the react-table offers everything I need (pagination, server-side control, filtering, sorting, footer row). This being said, I can't seem to be able to select a row. There…
gyosifov
  • 3,193
  • 4
  • 25
  • 41
53
votes
4 answers

Export to CSV button in react table

Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table). I need to add a custom button for exporting the table data to an excel sheet in the csv or xls format?
Ajay Singh
  • 732
  • 1
  • 7
  • 16
39
votes
7 answers

How to do default sorting in react-table

I am using react-table v7 https://www.npmjs.com/package/react-table for creating tables. I am able to do sorting to all the columns by referring this example of sorting…
Blessy Julie
  • 899
  • 3
  • 8
  • 19
37
votes
2 answers

How to show and hide some columns on React Table?

I have created a React Table. I want to hide or show some columns in my table by user action. By default all columns should be visible but we will have some check boxes to hide or show some columns. Image of my table Suppose I want to show 4 of the…
user10374052
33
votes
4 answers

How to stop memory leak in useEffect hook react

I am using Effect hook to fetch the datas from server and these data are passed to the react table there i have used the same api call to load the next set of datas from server. When the application gets loaded i am getting an warning like…
Nidhin Kumar
  • 3,278
  • 9
  • 40
  • 72
28
votes
6 answers

Changing column width in react-table

I have a react-table and I am trying to change the column size. I've tried editing the "width" value within the columns, editing the values in the scss stylesheet, and adding inline styling, but nothing is working. Where do I make css changes to…
Spring_Reboot
  • 341
  • 1
  • 4
  • 10
24
votes
5 answers

How to make some columns align left and some column align center in React Table - React

Hello Stack overflow members This is array for the column headers. I want column 1 to column 5 left align (all the header, sub header and table data cells of column 1 to column 5 to be left aligned) while I I want column 6 to column 8 to be centre…
user10374052
22
votes
3 answers

react-table add edit/delete column

I use Rails and React-Table to display tables. It works fine so far. But How can one add an edit/delete column to the React-Table? Is it even possible? return (
Trinity76
  • 665
  • 1
  • 6
  • 20
21
votes
2 answers

How to pass a custom prop from App to cell for react-table v7?

This is how I render my Table body: {rows.map((row, i) => { prepareRow(row); return ( {row.cells.map((cell) => { …
user2218544
  • 342
  • 1
  • 3
  • 10
19
votes
2 answers

react-table pagination properties doesn't exist on type 'TableInstance{}'

I'm trying to implement a pagination using react-table. In most tutorials we start with this: const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, visibleColumns, …
Tobi
  • 213
  • 1
  • 2
  • 7
19
votes
4 answers

How to do word-wrap for data using react-table?

I am using https://react-table.js.org/#/story/readme for displaying table from server response. But for column data with long length, its showing ellipsis. I am not finding a way for wrapping it, so that full data is displayed. In the doc, they have…
xploreraj
  • 3,792
  • 12
  • 33
  • 51
18
votes
3 answers

react-table custom cell component that references several row properties

I need to implement table sorting by column so am rewriting my react table component using react-table's ReactTable component. One of table cells will contain a link and needs to access more one row property. So far, the link column code looks…
softweave
  • 1,455
  • 2
  • 16
  • 27
17
votes
2 answers

Adding multiple data to a column in react-table

I have a table using react-table but for one of the columns I want to show two pieces of data - name and description. getInitialState(){ return { data: [{ id: 1, keyword: 'Example Keyword', product: [ …
user42010
  • 297
  • 1
  • 3
  • 8
16
votes
4 answers

Module not found: Can't resolve 'react-table/react-table.css'

I have create the app using create-react-app. Then I installed the react-table package(using command npm install --save react-table). When I started my application I am getting Module not found: Can't resolve 'react-table/react-table.css' this…
ganesh phirke
  • 471
  • 1
  • 3
  • 12
16
votes
1 answer

Export to PDF in React-Table

I have 10 row of values in react-table .I need to convert to PDF format?.ss it possible to convert?
reckinam deva
  • 315
  • 1
  • 2
  • 6
1
2 3
…
92 93