How to change CSS of columns - ReactTable
From what I understand, you want to add some border when you hover over a column header. If my understanding is correct, you can use
:hoverpseudo selector over the header class
.hdrCls:hover { border: 2px solid rgba(0,0,0,0.6) !important;}Update :
You can manipulate state in onResizedChange handler exposed by react-table
onResizedChange={(newResized, event) => { let resizedCol = newResized.slice(-1)[0].id; if(this.state.activeCol !== resizedCol) { this.setState({ activeCol: resizedCol, resizing: true }) }}}Also, make sure you have to make the resizing state to false on mouseup event. For that I have come up with the below solution.
componentDidUpdate(props, state) { if (this.state.resizing && !state.resizing) { document.addEventListener('mouseup', this.onMouseUp); } else if (!this.state.resizing && state.resizing) { document.removeEventListener('mouseup', this.onMouseUp); }}onMouseUp = (evt) => { this.setState({ activeCol: '', resizing: false }); evt.stopPropagation(); evt.preventDefault();} For reference:
const ReactTable = window.ReactTable.defaultclass App extends React.Component { constructor(props) { super(props) this.state = { activeCol: '', resizing: false } } componentDidUpdate(props, state) { if (this.state.resizing && !state.resizing) { document.addEventListener('mouseup', this.onMouseUp); } else if (!this.state.resizing && state.resizing) { document.removeEventListener('mouseup', this.onMouseUp); } } onMouseUp = (evt) => { this.setState({ activeCol: '', resizing: false }); evt.stopPropagation(); evt.preventDefault(); } render() { const data = [{ name:"Mark", age:24 }, { name:"Derek", age:26 }] const columns = [{ Header: 'Name', accessor: 'name', // String-based value accessors!, headerClassName: 'hdrCls', className: (this.state.activeCol === 'name') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls' }, { Header: 'Age', accessor: 'age', headerClassName: 'hdrCls', className: (this.state.activeCol === 'age') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls' }]; return <ReactTable data = { data } columns = { columns } showPagination= {false} onResizedChange={(newResized, event) => { let resizedCol = newResized.slice(-1)[0].id; if(this.state.activeCol !== resizedCol) { this.setState({ activeCol: resizedCol, resizing: true }) } }} /> }}ReactDOM.render( < App / > , document.getElementById("app")).hdrCls:hover { border: 2px solid rgba(0,0,0,0.6) !important;}.borderCellCls { border-right: 2px solid rgba(0,0,0,0.6) !important; border-left: 2px solid rgba(0,0,0,0.6) !important;}.defaultCellCls {}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link><div id="app"></div>You can play around with CSS. Hope this is what you want and hope this helps.
Update:
I think you have to play with CSS to achieve what you desire.
.borderCellCls { border-right: 2px solid rgba(0,0,0,0.6) !important; border-left: 2px solid rgba(0,0,0,0.6) !important;}
If you are here to find out how to set className to a column cell (with the react-table), here is the solution:
1)
<tr {...row.getRowProps()} > {row.cells.map((cell) => ( <td {...cell.getCellProps([ { className: cell.column.className, // pay attention to this style: cell.column.style, // set here your other custom props }, ])} > {cell.render('Cell')} </td> ))} </tr>2)
const columns = React.useMemo(() => [ { Header: 'Date', accessor: 'date', minWidth: 70, className: 'text-dark fw-bolder fs-6 min-w-70px', // pass className props here headerClassName: 'text-muted', // or another props like this one }] <Table columns={columns} ... />And finally, those props will be passed to your cells
For TypeScript support follow the instructions in DefinitelyTyped, ie. create the file /src/types/react-table-config.d.ts with the content from the instructions, then add the following to it to support custom properties on your column (add more properties in the last line as required):
// Added to support classes to template from: // https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table export interface ColumnInstance< D extends Record<string, unknown> = Record<string, unknown> > extends Omit<ColumnInterface<D>, 'id'>, ColumnInterfaceBasedOnValue<D>, UseTableColumnProps<D>, Record<headerClassName | className, string> {}