114 questions
0
votes
0
answers
47
views
In react-data-table-component package When i use paginationServerOptions then 'Select All' option is not visible
<DataTable
// ... previous props
keyField={'string_id'}
paginationServer
paginationServerOptions={{
persistSelectedOnSort: false,
persistSelectedOnPageChange: true,
}}
/>
when I use above code ...
0
votes
1
answer
63
views
React warning: A component is changing an uncontrolled input to be controlled in `react-data-table-component-with-filter`
Problem description
I’m using the react-data-table-component-with-filter library to implement a table with column filters. However, when I type in the filter input of any column typing an existing ...
- 11
0
votes
0
answers
244
views
React DataTable Component - Reset sort on third click in the column heading
I use the react-data-table-component to display all my data. The built-in sort is great but when I accidentally click on it, I would find myself refreshing the page just to reset the sorting.
I scour ...
1
vote
1
answer
317
views
How to set PageIndex in 'react-data-table-component'?
I have stored currentPageIndex of 'react-data-table-component' using onChangePage={handlePageChange} and store the pageIndex in context.
I want to retain the page index in my table when i come back to ...
2
votes
1
answer
1k
views
"TypeError: t is not a function" while working with updating the `react-data-table-component` package
While I was updating my react-data-table-component package, I faced some console errors saying 'TypeError: t is not a function'. There doesn't seem any help available in the package docs or the ...
0
votes
1
answer
481
views
How to implement paging with API in reactjs with datatable
Fist we have load react datatable with empty data after that will call api you get data based on filter and need to display all data so if change page size to all with empty data then it will give ...
- 1
0
votes
1
answer
273
views
Show Error "Pt.slice is not a function" in react data table component in datatable with API
I am creating a React demo and showing an error in react-data-table-component in datatable. please review the below code and share your comments.
Show Error "Pt.slice is not a function" in ...
0
votes
1
answer
207
views
How to type a sortFunction with the correct definitions for react-data-table-component?
I want to type this custom method for sorting in react-data-table-component custom component, I'm not sure what should be done in the selector:
const customSort = (rows: IAlergia[], selector: any //...
- 693
0
votes
0
answers
1k
views
react-data-table-component - customize select all checkbox only
I'm looking at customizing the header 'select all' checkbox in react-data-table-component.
<DataTable />
I'm using React 16.14 and using Class components.
Goal:
Adding a dropdown when the select ...
- 13
0
votes
0
answers
172
views
React-data-table-component + dropdown cut when open
I am trying to add react-select dropdown with React-data-table-component. But it is cutting the attached screen short.
Do you have any suggestions for this?
Kamal
- 2,924
2
votes
1
answer
2k
views
How can I add a search filter for my DataTable in reactjs?
I'm looking to enhance my DataTable in React by incorporating a search filter. I want users to be able to search for specific entries within the table. The goal is to allow users to easily search and ...
- 45
3
votes
3
answers
5k
views
react-data-table-components error warning: react does not recognize the `sortActive`
I am using react-data-table-components and just following the instruction given by the documentation, but it's showing me an error (some of it is in text below):
Error
Below is the sample code I ...
- 31
3
votes
4
answers
7k
views
styled component error "it looks like an unknown prop "responsive" is sent through to the DOM, which will likely trigger a React console error."
I am using react data table component which requires me to install styled component.
The moment i render the DataTable after passing the columns and data prop, I get various errors on my console ...
2
votes
1
answer
2k
views
selectableRowSelected and onSelectedRowsChange are conflict in react-data-table-component
I'm using 'react-data-table-components' and having simple code like that:
import React, { useState } from "react";
import DataTable from "react-data-table-component";
const ...
- 362
0
votes
2
answers
1k
views
Reactjs datatable component footer sum of column
Reactjs datatable component footer sum of column
This my code and i want to add footer in datatable in which i have to show all columns sum.
i have used react-data-table-component package for this ...
0
votes
1
answer
148
views
How to remove the ";" separation in the csv File exported through React-Data-Table-Extension Component?
I'm using React Data Table and React Data Table Extension Components to display my data. The problem being faced is that the csv file exported through React-Data-Table-Extension Component is hardcoded ...
- 59
0
votes
2
answers
5k
views
How to display data using React DataTable only when button clicked?
I've written a ReactJS app, where I have list of data (JSON data) showed in table view. I've used "react-data-table-component" for that. It works fine, right now whenever the app launches it ...
- 1,878
0
votes
0
answers
558
views
How can I prevent the initial "No records to display" message from appearing before the data is loaded into the react-data-table-component?
Below I am calling API and getting data from these ,but the issue is I open or reload the page 1st no records to display shows then the data loads why?for time taking to get data from api i am showing ...
2
votes
2
answers
1k
views
Filtering data for first time not working with react-query
I have a basic ReactJS component that uses react-query ("@tanstack/react-query": "^4.24.6") and "react-data-table-component": "^7.5.3". The data gets loaded, I ...
- 3,211
0
votes
1
answer
117
views
How to get the filtered data in bootstrap datatable while using React.js by entering in search box?
I am using bootstrap datatable in my React application
function MyApp(){
const tableRef = useRef(null);
const [tableSave, setTableSave] = useState(null)
const [dataFromAPI, setDataFromAPI] = useState(...
- 427
1
vote
0
answers
917
views
Pagination text incorrect in react-data-table-component
I have a react parent component which is rendering a Table component which is react-data-table-component. The data is being fetched corrctly but there is pagination footer text problem. There are 26 ...
- 77
1
vote
0
answers
471
views
react-data-table-component v-^7.5.2 how to first columns fixed col
I try this add style but it's not working add component fixedColumn similar but not working
.rdt_TableHead .rdt_TableCol.fixed-left {
position: sticky;
left: 0;
z-index: 1;
}
.rdt_TableBody ....
- 11
0
votes
1
answer
582
views
Assigning background color to row available in data using react-data-table-component
I have DataTable of react-data-table-component data coming from backend have a color property for each row. I have to use that color. I tried with conditionalStyles and custom styles but didn't ...
- 670
0
votes
2
answers
5k
views
React-Data-Table-Component Hide Show Column Base On Conditions
I was writing a reactjs code and I use react-data-table-component, my table showed perfectly but i wanted to hide/show a column base on condition if true or false but I do not know where to write my ...
- 57
0
votes
1
answer
2k
views
Add icon to react-data-table-component column on condition
I'm trying to add a warning icon next to the data within a react-data-table-component field. There would be other another value driving this function that is not the selector listed in the field.
The ...
- 3
0
votes
1
answer
583
views
How to override the font text color in the filter part of react-data-table-component-extensions?
need some help on this sir,
I'm using react-data-table-component and react-data-table-component-extensions.
also, I imported the index.css for the component-extension
import DataTable from "react-...
0
votes
1
answer
1k
views
Select row in react-data-table-component how to deactivate multiple select
I'm using react data table component i wanna use a radio button to select a row , i using checkbox how can i deactivate multiple select
<Table
data={data}
...
- 531
1
vote
1
answer
372
views
How to write test cases for functions passed as props to "react-data-table-component"?
import React from "react";
import DataTable from 'react-data-table-component'
export const Component = () =>{
const openDetailPopup = (row: Trip) => {
router.push({
...
- 13
0
votes
2
answers
1k
views
react-data-table-component : Pagination : Error: Hydration failed because the initial UI does not match what was rendered on the server
I wanted to create datatables with react-data-table-component, but the pagination keep generating the error:
Error: Hydration failed because the initial UI does not match what was rendered on the ...
- 797
2
votes
0
answers
498
views
React DataTable Component - Default Sort Not Working
I use the react-data-table-component (along with the react-data-table-component-extensions library) for displaying various tables. I have a datatable where the sorting of any column works when I click ...
- 396
0
votes
1
answer
829
views
How to color cell with condition for bootstrap DataTable?
I am trying to create simple app to show data stored in Mongodb. I could get all the data and make it shown in the app. I want to set color in each cell of table when they meet certain condition. For ...
3
votes
1
answer
6k
views
react-data-table-component onChangePage method triggers after onSelectedRowsChange method
I'm trying to keep track of selected items by page.
When I click next page I'm updating the "currentPage" state with "onChangePage" event of data table.
Because "...
- 118
1
vote
1
answer
140
views
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 ...
1
vote
1
answer
525
views
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,
...
- 37
0
votes
1
answer
3k
views
React DataTable insert action link
Good afternoon!
I have react-data-table-component
I'm trying to create a column that will have action buttons (delete/edit...)
To do this, in clickHandler I need to pass parameters from data, for ...
- 111
1
vote
0
answers
1k
views
React Data Table Pagination showing but not working
I'm using the pagination from react-data-table-component.
But it's unclickable although it's showing. Does anyone know how to fix it?
return (
<div>
<DataTable
title="...
- 49
0
votes
1
answer
4k
views
NextJS React-Data-Table-Component Styling
Task:
I would like to show a really big DataTable in UI which is horizontally and vertically is scrollable
Issue:
Cannot set scrolling on X axis
UI cuts/hides down the first half of the table if ...
- 181
0
votes
1
answer
2k
views
react-data-table-component ouput data in ExpandComponent
Hello good people on the Internet. I am using react-data-table-component library and I want to output something when a row is expanded, when the first row is expanded it should should show this is row ...
- 832
1
vote
0
answers
1k
views
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, ...
- 692
1
vote
1
answer
2k
views
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 ...
- 692
0
votes
1
answer
1k
views
Removing filter options from React Data Grid
How can I remove filter options from React Data Grids filters? For example when I do FilterEditior: SelectFilter it shows "Contains", "Does not contain", "Equal" etc but ...
- 3
2
votes
1
answer
153
views
React data overridden in Data Table after filtering data
React Data overridden in Data table after filtering data
Tech stack used: React typescript and GraphQL (apollo client).
We have used react-data-table-component, mui/material. In this both modules ...
1
vote
2
answers
2k
views
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....
- 145
1
vote
1
answer
622
views
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 ...
- 803
0
votes
1
answer
337
views
Request to api works fine in component but not when using provider with react
When making a request to my API from a component and using react-data-table-component everything works perfectly but if I try to make the request from my Product Provider the pagination is incorrect ...
- 977
0
votes
1
answer
3k
views
react-data-table-component expandableRows pass for each parent row a different expandableRowsComponent
I have created a Table using react-data-table-component and now I would like to make the table rows expandable such that when I expand a row it displays details specific to that row.
I read the react-...
- 531
3
votes
1
answer
4k
views
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 ...
- 85
1
vote
1
answer
6k
views
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-...
- 692
1
vote
0
answers
998
views
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 ...
- 2,407
2
votes
1
answer
896
views
How to move expandableRows icon to the right side of the data grid, in react-data-table-component
As of now the prop expandableRows puts the icon in the left side, however I need to see the icon in right most of the table. Is there any way to do this?
How to move expandableRows icon to the right ...
- 21