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

Use Buttons to trigger filter function on react-table in React

I don't know how to word this. I am learning React and I have data loaded into React-Table via fetch. I tried using React-Table and just custom plain divs and tables. I want to create a touch buttons of the alphabet from A, B, C, D ... Z. Those…
donlaur
  • 1,269
  • 1
  • 12
  • 21
8
votes
2 answers

How to make react table to scrollable?

I am trying to make react table scrollable horizontally and vertically but right now it is taking all the space according to the data. I want to make this table of fixed height and scrollable in both direction. Table component: import React from…
r121
  • 2,478
  • 8
  • 25
  • 44
8
votes
5 answers

How can I style Material UI table header?

How can I style Materials' UI table header? Maybe something like add classes with useStyle. Dessert (100g serving)
Eylon Shmilovich
  • 354
  • 1
  • 4
  • 11
8
votes
1 answer

How to resolve 'react-dnd-html5-backend' does not contain a default export?

I'm new to React and trying to emulate the Row Drag & Drop code found here: https://react-table-omega.vercel.app/docs/examples/row-dnd If I open the sandbox, all the default code works fine. If I copy-paste the code locally though, I get the…
Elliptica
  • 3,928
  • 3
  • 37
  • 68
8
votes
2 answers

react-table sorting not working for column with custom cell

I am using the react-table plugin and am having difficulty getting the sorting to work for one column that has a custom link defined. This column's content is based on some properties from the data in that row so I have created a custom Cell for it.…
MSOACC
  • 3,074
  • 2
  • 29
  • 50
8
votes
5 answers

How to fix pagination reset issue in react-table?

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side…
Javeria
  • 101
  • 1
  • 1
  • 7
8
votes
2 answers

Trigger cell onClick instead of row onClick in React Table

I have the following table: I want that clicking on the three dots on the right side of the row will open a pop up menu, so I wrote an onClick function for this cell. I also want that clicking on any other area in the row will redirect to another…
Emanuel
  • 163
  • 1
  • 9
8
votes
3 answers

How can I style React-Table?

I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?
Jeff Goes
  • 571
  • 3
  • 7
  • 17
8
votes
2 answers

TypeError: Object(...) is not a function with React Table and moment.js

I am using React Table module, and I'm trying to make use of moment to display a better date format from the created_at field of the data passed to ReactTable component. let columns = [{ id: "createdAt", Header: "Created", accessor: a =>…
user4383363
8
votes
1 answer

How to get cell value on React-Table?

I develop in React.js, and I'm using React-Table. I need to get cell value in a specific column. I have made a reference to the table component to access its internal state. but I don't know where to find the cell value from a column. Is it possible…
user3476614
  • 537
  • 2
  • 8
  • 26
8
votes
1 answer

Error while using React-table.js in Vue.js

am trying to integrate https://react-table.js.org/#/story/readme in vue.js app using https://github.com/akxcv/vuera. My main.js: import Vue from 'vue' import { VuePlugin } from 'vuera' import App from './App' import router from…
toinbis
  • 747
  • 7
  • 23
8
votes
1 answer

How do I style react-table filter input field?

I'm using react-table and have a filter method for each column which works. However, I cannot seem to figure out how I actually style the filter input field - it's white now and blends in with the background. Here's a codepen where the "Last Name"…
cbll
  • 6,499
  • 26
  • 74
  • 117
7
votes
1 answer

React-Table keep state of selected rows

Am trying to keep the state of selected checkboxes for a react-table v7. I have a checkbox that can select multiple rows at once and works great, the issue is the table can't maintain that state once a dialog opens up for batch actions. The…
Obare13
  • 155
  • 3
  • 8
7
votes
9 answers

Make only one row selectable at a time in React Table 7.1.0

I am trying to implement react table with just one row selectable at at time. I have gone through a lot of examples for multiple rows selection in a react table but in my case, the user can select only one row when the user clicks on the radio…
Riten
  • 2,879
  • 3
  • 24
  • 28
7
votes
1 answer

Using an API to create data in a React-Table

I'm super new to React.js in general and want to use this api here: https://covidtracking.com/api/v1/states/current.json to create a table with up-to-date COVID-19 data from American states. Problem is, when I render the app, I can't seem to upload…
Vishnu Vennelakanti
  • 91
  • 1
  • 1
  • 6
1 2 3
…
92 93