Stack Overflow
Stack Overflow

Questions tagged [react-data-table-component]

126 questions
9
votes
2 answers

Set Per Page in React Data Table with Custom Pagination Component

I need to set the Per page value in my react data table, by default the data table manage this value automatically, but I'm using React Paginate as a custom pagination component, and it only manages the pages. How can I change this value without…
Kathar6
  • 93
  • 1
  • 1
  • 5
5
votes
0 answers

Column filter in data table

Hope you are all doing good. I am trying to use react-data-table-component from jbetancur (https://github.com/jbetancur/react-data-table-component#readme) and i would like to implement the following: Currently i have this: And i want to get…
Marco Silva
  • 81
  • 1
  • 6
4
votes
2 answers

React Data Table Expandable Rows : how to pass additional Props

Reading the Docs for React Data Table, there seems to be a way to pass additional Props to an expandableRowsComponent. This is copy-pasted from the docs: expandableComponentProps expandableComponentProps allows you to pass additional props to your…
NicoWheat
  • 2,157
  • 2
  • 26
  • 34
4
votes
1 answer

React data-table-component: onClick on button doesn't work on inner icon

I'm using the react-data-table-component. I have these columns: const columns = [ { name: 'ID', selector: 'id', sortable: true, }, { name: 'Place', selector:…
sineverba
  • 5,059
  • 7
  • 39
  • 84
4
votes
1 answer

How to implement multi-column sorting with react-data-table-component

I am using a react component called react-data-table-component: https://github.com/jbetancur/react-data-table-component. The component is quite nice and feature rich and I am enjoying it so far. However, the client has requested a new feature…
JSnyder
  • 81
  • 1
  • 5
4
votes
1 answer

React data table component, passing info for clicked row into modal

I'm making an offline PWA with ReactJS and I've started using the react-data-table-component, which has been great so far. I've set the table to have an onRowClicked function that is called anytime a row is clicked, and so far, I only have that…
Geoff_S
  • 4,917
  • 7
  • 43
  • 133
3
votes
0 answers

Append tailwind classes on React Data Table's column headers

I am planning to integrate my Tailwind CSS styles to a jbetancur React Data Table (see https://github.com/jbetancur/react-data-table-component) as a custom style. I would like to put the TW classes inside the customStyles attribute of the Datatable…
Nicole
  • 109
  • 1
  • 9
3
votes
1 answer

How to change main title css property while using react-data-table-component

I am making the table using a react-data-table-component. The data is coming through props. but the CSS property of the title is not changing. I think it is incorrect. title: { style: { fontColor: 'red', …
Sim
  • 65
  • 1
  • 7
3
votes
2 answers

react-data-table-component with nested tables

I am using react-data-table-component in a node/react page. I have 2 data sets, List and ListNested. list is a collections of document data (xlsm to be specific) that has the most recent version of the document on each row. listNested is a similar…
cHam
  • 2,624
  • 7
  • 26
  • 28
2
votes
1 answer

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 saying there is a problem with some of the props im…
Nosarumen Imuentinyan
  • 21
  • 2
2
votes
1 answer

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 data is overridden after data is filtered. Not…
Purvesh Thakkar
  • 21
  • 2
2
votes
1 answer

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 side of the row, in react-data-table-component. As…
Madhavi N
  • 21
  • 2
2
votes
1 answer

react-data-table-component add on hover title in headers name

I need to add more information in react data table component name. i use this component : https://www.npmjs.com/package/react-data-table-component How can i do that . I try it this code but it doesn't work : { name: () => return ( …
sokida
  • 433
  • 1
  • 8
  • 21
2
votes
3 answers

Data export using react-data-table-component export csv

I am new to React. I am trying to export JSON data that is displayed using the 'react-data-table-component' to a CSV file. I have followed the example from this link by copying the exact code snippet provided. Below is my code snippet and the…
clinewton
  • 43
  • 1
  • 6
2
votes
0 answers

How to add Top and Bottom Horizontal Scrollbar in "react-data-table-component"

I have been searching for a couple of days now for a good solution to this problem I have designed and structured columns in react-data-table-component package and I want to add Scrollbar on top. By default the package supports horizontal scroll bar…
Gulzar Soft
  • 21
  • 3
1
2 3
…
8 9