react-table

react-table custom cell component that references several row properties

瘦欲@ 提交于 2019-12-03 13:01:14
I need to implement table sorting by column so am rewriting my react table component using react-table's ReactTable component. One of table cells will contain a link and needs to access more one row property. So far, the link column code looks like: { Header: "Name", accessor: "name", Cell: cellInfo => ( <Link className="scenarioDetailLink" to={cellInfo.row.linkDestination} id={cellInfo.row.linkName}>{cellInfo.row.name}</Link> ) }, It results in elements like this: The generated anchor element is missing id and href properties. What am I doing wrong. It turned out I needed to use cellInfo

Export to CSV button in react table

杀马特。学长 韩版系。学妹 提交于 2019-11-30 16:31:49
问题 Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table). I need to add a custom button for exporting the table data to an excel sheet in the csv or xls format? 回答1: Take a look at this npm library - https://www.npmjs.com/package/react-csv For example - import {CSVLink, CSVDownload} from 'react-csv'; const csvData =[ ['firstname', 'lastname', 'email'] , ['John', 'Doe' , 'john.doe@xyz.com'] , ['Jane', 'Doe' ,

Select row on click react-table

可紊 提交于 2019-11-30 11:17:04
问题 I am trying to find the best table to use with my react apps, and for now, the react-table offers everything I need (pagination, server-side control, filtering, sorting, footer row). This being said, I can't seem to be able to select a row. There are no examples that show this. Some things, that I have tried include trying to set a className on click of the row. But I can't seem to find the calling element in e nor t . Also, I don't like this approach, because it is not how a react app should

Select row on click react-table

大兔子大兔子 提交于 2019-11-28 20:05:47
I am trying to find the best table to use with my react apps, and for now, the react-table offers everything I need (pagination, server-side control, filtering, sorting, footer row). This being said, I can't seem to be able to select a row. There are no examples that show this. Some things, that I have tried include trying to set a className on click of the row. But I can't seem to find the calling element in e nor t . Also, I don't like this approach, because it is not how a react app should do things. <ReactTable ... getTrProps={(state, rowInfo, column, instance) => { return { onClick: (e, t

How to show and hide some columns on React Table?

亡梦爱人 提交于 2019-11-27 07:51:27
问题 I have created a React Table. I want to hide or show some columns in my table by user action. By default all columns should be visible but we will have some check boxes to hide or show some columns. Image of my table Suppose I want to show 4 of the 8 columns. Please suggest me an easy technique to achieve this. My Column Header Array is const columns = [ { Header: 'Column 1', columns: [ { Header: 'S Column 1', accessor: 'firstName' } ] }, { Header: 'Column 2', columns: [ { Header: 'S Column 2