In react-table v7 you need to use a layout hook (useBlockLayout, useAbsoluteLayout or useFlexLayout) so the specified width is applied. Important: all those hooks set a default column width to 150px. You can see an example in Full Width Resizable Table. In react-table v8 you can use the attributes size, minSize and maxSize on the … Read more
June 2022 update (still accurate at end of 2023): React 18 has removed this warning message, and the workarounds to get rid of it may no longer be necessary. Part of the reason they removed it is that it has always been a bit misleading. It says you have a memory leak, but often times … Read more
In column there is a property show. show: true, // can be used to hide a column. Make it false to hide the particular column. Keep user’s check-box values in the state. https://react-table.js.org/#/story/readme Note: The column property showis deprecated. Use initialstate.hiddenColumns instead. Check: https://github.com/tannerlinsley/react-table/issues/1804
The other answer given was for react-table that didn’t use react hooks (< v7). In order to sort a column (or columns) when the table is built, you just have to set the sortBy array on the initialState in the useTable hook. const { getTableProps, getTableBodyProps, … } = useTable( { columns, …., initialState: { … Read more
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’ , ‘jane.doe@xyz.com’] ]; <CSVLink data={csvData} >Download me</CSVLink> // or <CSVDownload data={csvData} target=”_blank” />
I found the solution after a few tries, I hope this can help you. Add the following to your <ReactTable> component: getTrProps={(state, rowInfo) => { if (rowInfo && rowInfo.row) { return { onClick: (e) => { this.setState({ selected: rowInfo.index }) }, style: { background: rowInfo.index === this.state.selected ? ‘#00afec’ : ‘white’, color: rowInfo.index === this.state.selected … Read more