Menu
I have a problem to get pretty basic functionality, ie. I'd like to set horizontal scroll on React table when the page is less wider then the table size. There is nothing unusual in my code but I'll leave it here anyway:
<ReactTable
data={bookingPerson}
columns={columns}
className="-striped -highlight"
defaultPageSize={7}
loading={loading}
/>
343
Just simply add style with a height of 400px, that will force it to be scroll able.
import React, { useMemo } from "react"; import useData from "../../hooks/useData"; import Table from "./Table"; const TableSection = React. memo(({ query }) => { const { data, runtime, error } = useData(query); const column = data. length > 0 && Object. keys(data[0]).
you can use maxBodyHeight property, which will create vertical scrollbar if data exceeding the given height. Save this answer.
Frozen Rows and Columns (React) You can freeze rows and columns by setting the grid's frozenRows and frozenColumns properties. Frozen cells do not scroll but are selectable and editable like regular cells.
Just simply add style with a height of 400px, that will force it to be scroll able.
<ReactTable
data={bookingPerson}
columns={columns}
className="-striped -highlight"
defaultPageSize={7}
loading={loading}
style={{
height: "400px"
}}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
