React Table CSS Unit
Make the
column.width
of React Table v7 support various css units, such as '200px', '200%', '200vh', etc.
npm i react-table-css-unit
Tips: It will cause plugins and features
that depend on the value caculation of column.wide
invalid, such as useResizeColumns
, etc.
Documentation
Simple example
const columns = Header: 'Name' accessor: 'name' width: '100px' Header: 'Age' accessor: 'age' width: '80%'
Full example
const Styles = styleddiv` padding: 1rem; .table { border: 1px solid #ddd; .theader, .tbody { width: fit-content; } .th, .td { padding: 5px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff; overflow: hidden; } }` { const data = const columns = const getTableProps getTableBodyProps headerGroups rows prepareRow = return <div ... className="table"> <div className="theader"> headerGroups </div> <div ... className="tbody"> rows </div> </div> } ReactDom
Contribute
git clone https://github.com/jsonz1993/react-table-css-unit.git
npm install
npm run demo
- Go to http://localhost:9999