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

Custom styling of Filters in react-table

I've built a table with react-table and want to use the react-select component as as filtering component. All is up and running except that the dropdown from the react-select component gets hidden by the table. I've been working quite a long time on…
Simon Johansson
  • 836
  • 6
  • 18
4
votes
1 answer

React table not displaying data

so im using react-table library to display a tree grid table with mocked data but it isn't appearing like it should and it shows that there's one item on the table. import React, { Component } from 'react'; import ReactTable from…
Tomas Duarte
  • 127
  • 2
  • 14
4
votes
1 answer

Mobx not updating when state changes

I am using react-table with mbox and have run into a issue where my state is not updating. I have a table like this
chobo2
  • 83,322
  • 195
  • 530
  • 832
4
votes
2 answers

React Table default pagination page

I'm new to react-table. Is it possible to set default page in the pagination mode. Is there a certain prop to handle this? F.ex. after my component mounts I'd like to have my table opened on 5th page. Thank you!
Murakami
  • 3,474
  • 7
  • 35
  • 89
4
votes
3 answers

React-table switch sorting icon

Here is a link for the icon that I'm referring to. Black line at the top of the table header. Hello I embedded a link into the question but I am trying to figure out how to switch the color of the sorting icon for React-table's library. I tried…
Jeffrey Yourman
  • 91
  • 3
  • 11
4
votes
0 answers

Uncaught SyntaxError: Unexpected identifier in Chrome when Referencing react-table

I'm new to react. Having a very weird issue referencing react-table in Chrome. As soon as I add import statement to my page: import ReactTable from 'react-table'; and then perform any action on ANY part of the page or re-render, I get a weird syntax…
lentyai
  • 534
  • 1
  • 9
  • 22
4
votes
0 answers

Is it possible to implement Excel-like sorting widget in react-table component?

I'm using react-table component for displaying and filtering of my dataset. My filters look like the following: As you can see from the image above each column can provide component for filtering (either input and select). Now, I need to implement…
Erik
  • 14,060
  • 49
  • 132
  • 218
4
votes
1 answer

Is there an API for localization in react-table?

I have a reactjs app and I'm using react-table in it. The text of the table buttons ("Next", "Page x of y", etc) is in English and I did not see any option to localize it. Is there an API for this? Or should I hook the elements and implement it…
Liron Naim
  • 41
  • 5
4
votes
1 answer

cannot override react-table styles?

From the docs of react-table it is stated that: We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super…
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
4
votes
2 answers

React-table events

I'm currently using React-Table and it's working great. I want to have a dynamic pageSize according to the data filtered in the table.
Yan
  • 353
  • 1
  • 4
  • 13
3
votes
1 answer

How to do exact match in React-Table when using global filter with "search string "?

How to override the global filter matching function in react-table by tanstack? I should like to add support for exact matching using ". For example when searching for "male" that should not include rows contain "female" rows(Similar to how it…
starking
  • 153
  • 10
3
votes
1 answer

Custom sorting TanStack Table V8

How can I sort a column if there is two values in the cells? columnHelper.accessor('violations', { id: 'violations', header: () =>

Violations

, cell: (info) => (

{info.getValue().count}

…
jakiehan
  • 45
  • 1
  • 6
3
votes
2 answers

FlexRender Functional Component Tanstack React Table v8

I am rebuilding a react-table to v8 where one cell is a functional component, which shows the status, based on the Id value. My Status component is defined like this: function Status({ id }) { const [status, setStatus] = useState("pending"); …
Telito
  • 90
  • 1
  • 10
3
votes
0 answers

Passing a variable to a child component from parent definition

I'm attempting to create a reusable data-table component in react, that mimics the Angular Material UI table definition. I'm coming from an Angular background and have been learning react for a few months struggling parts of it. In React I'm making…
Krystian
  • 71
  • 14
3
votes
1 answer

TanStack table | How can I use redux action in onPaginationChange instead of setPaginationState in the example

Using this example https://tanstack.com/table/v8/docs/examples/react/pagination-controlled How can I use https://tanstack.com/table/v8/docs/api/features/pagination#onpaginationchange if I need to dispatch my redux action instead of useState -…
Kostya GL
  • 62
  • 6
1 2 3
…
92 93