Questions tagged [react-data-table-component]
126 questions
2
votes
2 answers
Can't remove white header in react-data-table-component
I am trying to remove the white background in the header of a react-data-table-component.
I'm also fine with removing the header in its total, but also can't figure out how.
Below my code of the table component
Jdg
- 23
- 1
- 3
2
votes
1 answer
When creating a menu in a column of mui-datatable in react, it only returns the data of the last element of the list
Using the mui-datatable library in react, create a custom column using customBodyRender to add a menu and when you click on one of the options, it will perform an action.
The problem is that when you click on the action, the data that enters the…
Javier Barrios
- 21
- 2
2
votes
1 answer
Is it Possible to prevent Materialize CSS for Single Component in ReactJS?
I am trying to use external package react-data-table-component for my tables. I want to use it's default styling and not of materialize-css styling. Both of the styles are merged together and cause disturbance. Is there any way to use only one…
shuja ali
- 56
- 7
2
votes
1 answer
Input fields of react-data-table losing focus after typing
I use react-data-table-component. I have a dynamic list with inputs as seen on the picture.
Every time I try to write text in a field it loses focus so I cannot write. I tried a lot including placing autofocus, adding keys to divs and fields. The…
Caner
- 1,448
- 23
- 38
2
votes
1 answer
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
i was trying the basic example of react-tables, and i got this error
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your…
Nikita
- 23
- 4
2
votes
1 answer
Redux state change does not rerenders datatable
**Here is the cart imports and state
const Cart = ({ cart, setActiveTab, removeFromCart, updateQuantity }) => {
const [selectedRows , setSelectedRows] = useState([]);
const [toggleCleared, setToggleCleared] = useState(false);
const [products,…
Sami ullah
- 21
- 2
1
vote
1 answer
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 find specific data within the table. How to…
Les Jetskii
- 35
- 4
1
vote
0 answers
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 show me an error
error
below is the sample code the i copied in the documentation
import DataTable from…
RJM
- 11
- 2
1
vote
0 answers
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 SampleDataTable = () => {
const data = [
{ id: 1, name: "John Doe",…
Nghĩa Phạm
- 45
- 7
1
vote
2 answers
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 display it in a table. Standard stuff, works fine.
I had a search component as described…
LNI
- 2,935
- 2
- 21
- 25
1
vote
0 answers
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 data. First it is showing 1-10 of 26, then I click…
Twisam Stark
- 67
- 5
1
vote
0 answers
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 .rdt_TableCol.fixed-left {
position: sticky;
…
Yuki Onna
- 11
- 3
1
vote
0 answers
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({
pathname: '/current-trip-detail',
query: { tripId: row.tripId,…
Rahul M.V
- 13
- 2
1
vote
0 answers
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 on the column header but the default sorting…
Nena
- 376
- 1
- 6
- 15
1
vote
1 answer
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 "onChangeRowsPerPage" event triggers first before "onChangePage" event and reset…
senerdude
- 98
- 1
- 7