Menu
I develop a SPA application and I wish place table in parent element bounds but I can't set explicit height. I can set scroll.y of table body but then result total height is large by header height. I can't get header height to calculate total needed height. How I may place table into parent bounds?
<div style={{ width: '100vw', height: '100vh'}}>
<Table scroll={{ y: '100%' }} style={{ width: '100%', height: '100%' }} pagination={false} columns={columns} dataSource={data} />
203
import React from "react"; import { data } from "./Data"; import { Table } from "antd"; const App = () => { const [Data, setData] = useState(data); return ( <> <div className="app"> <div className="table"> <Table dataSource={Data} columns={columns} pagination={false} /> </div> </div> </> ); };
Simply define a new sorting routine in utils/sorter. js , add it to the Sorter “enum,” and use it in your sorter prop for any column that needs it. You can check out the CodeSandbox for this tutorial to play around with the result.
Click the "Open in Editor" icon in the first example to open an editor with source code to use out-of-the-box. Now you can import the Alert component into the codesandbox: - import { DatePicker, message } from 'antd'; + import { DatePicker, message, Alert } from 'antd';
Seems like it's more of a CSS issue within Ant then a bug. it's a browser limitation.
Try working with vh units mixed with calc:
scroll={{ y: 'calc(100vh - 4em)' }}
Related Github discussion (require tranlation)
118
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
