Questions tagged [react-data-table-component]
126 questions
1
vote
1 answer
How to Display data of single json file in mulitple tables through repeating a single react component
I am a beginner in ReactJS.
What I want is, I have a Component Datatable.js and I want to create three tables in that component by configuring data of a single JSON File and there should be only one component for three tables but the condition is…

Rahul Upadhyay
- 13
- 2
1
vote
1 answer
How to give different background colors dynamically to columns of a react-data-table
I want to give different background colors dynamically to rows of the react-data table,but can't find How to do that,
I want this type of design,
My table component is,
import {
Flex,
useColorModeValue,
Button,
ButtonGroup,
Input,
…

demi
- 37
- 3
1
vote
0 answers
react-data-table-component - Columns which are sorted don't remain those rows if expanded with expandableRows
I'm having an issue in react-data-table-component where, after clicking on the column header to sort the rows, it fails to remain the same item getting clicked after sorting. See below. Once clicked, the row item immediately changes to another…

rom
- 666
- 2
- 9
- 31
1
vote
1 answer
react-data-table-component - Checkboxes won't stay checked
I am having a problem in react-data-table-component where the checkboxes in my datatable don't remain "checked".
I do see there is indication the check occurred but not seeing it remaining checked:
It's weird, right? Why is that happening?
Here's…

rom
- 666
- 2
- 9
- 31
1
vote
1 answer
React-Data-Table-component-Extenstion Library Print Export issue
There is a problem in this library where if i used columns like this , the print and export button won't work and i get this error :
Uncaught Error: selector must be a . delimted string eg (my.property)
const columns = [
{
name: "No.",
…

Razor Jhon
- 115
- 1
- 12
1
vote
1 answer
Objects are not valid as a React child error in React Datatable
OK, so Im getting this error when trying to return some data from my web api. Ive tried all as suggested on other similar posts but cant get this working. Any help appreciated.
Objects are not valid as a React child. If you meant to render a…

kd12345
- 689
- 10
- 29
1
vote
1 answer
my sorting is not working in react-data-table-component
when i click on rank, location or deaths on top it used to sort the list before but now it doesn't work. The data you see is not all of the data i have used there is a few more that would just make the question long so i only added first few. Any…

isabella-re
- 65
- 7
1
vote
1 answer
react-data-table-component How To Style Checkbox? Large Checkboxes To Small
I'm using react-data-table-component in my project to create a datatable.
However, the checkboxes are appearing too large.
After checking the docs, I found this page - Overidding Styling Using css-in-js with customStyles, and this example:
// …

rom
- 666
- 2
- 9
- 31
1
vote
0 answers
Column selector with special name in react-data-table-component
I am using a react-data-table-component plugin to make the table. I am trying to create the data table for the following data,
[
{
"1.1 - 2.1 cm": 348.75,
"2.1 - 3.1 cm": 285.75,
"3.1 - 4.1 cm": 145.5,
"> 4.1 cm":…

Tek Kshetri
- 2,129
- 1
- 17
- 41
1
vote
2 answers
React Data Table Component - getting Warning: Each child in a list should have a unique "key" prop
I'm using React Data Table Component, and applied filter exactly same as here:
() => {
const [filterText, setFilterText] = React.useState('');
const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false);
const…

Juhyun Park
- 141
- 1
- 12
1
vote
2 answers
How to show tooltip in react data table component
I'm display a data table using react data table component , I wanted to show tooltip or title, when mouse over doing on a name in headers.
https://www.npmjs.com/package/react-data-table-component

sokida
- 433
- 1
- 8
- 21
1
vote
1 answer
Row grouping is possible in React-Data-Table-Component?
Hi everyone, I need to group the data by name. It's possible to group rows in the react-data-table component.
Like This:

Micro Kumar
- 167
- 1
- 12
1
vote
2 answers
How to set paginationRowsPerPageOptions['ALL','50',''100'] in React-data-table
Hi Everyone,
I am using the React-Data-Table component for displaying the data. My react data table is working fine. But, I need to set the pagination option [All, 50,100,150]. In the React-data-table component provides the…

Micro Kumar
- 167
- 1
- 12
1
vote
0 answers
React-Data-table-component two selectors under one column
This is the first time using Datatable in ReactJS and in my API I have columns with sub-rows, which I do not know how to do it. And there are no examples available. If anyone can help me out with some advice, I will really appreciate it.…

Maria
- 11
- 3
1
vote
1 answer
How to update react datatable ( react-data-table-component library) based on button click
I am using react-data-table-component library to get data from API and show it in a datatable. I have a custom Date filter option where I can update the data array for datatable. I need to refresh the datatable part alone upon updating the data.
…

Dinak lal V
- 71
- 1
- 9