How to place Ant Design Table in parent container bounds under React?

Question

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} />

Renewal

is this works for you? <div style={{ height: "100vh", overflowX: "scroll" }}><Table columns={columns} dataSource={data} /></div> – Gillett

Answer 1

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:

Example:

scroll={{ y: 'calc(100vh - 4em)' }}

Related Github discussion (require tranlation)

Burmeister

After almost a year? I don't even remember answering :) – Burmeister

guys, 100vh is too much in case you have headers and pagination I ended up with 80vh-160px – Asiatic

Answer 2

In React i caculate the height of ant table body then use that as scroll value

const [scrollHeight, setscrollHeight] = useState<number>();
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
    if (divRef.current) {
      setscrollHeight(divRef.current.clientHeight - tableHeaderHeight - tableFooterHeight);
    }
  }, []);

Replace tableHeaderHeight and tableFooterHeight with your value then the Table like this

<Table
            dataSource={data}
            columns={columns}
            pagination={{
              position: ["bottomCenter"],
              defaultCurrent: 1,
              defaultPageSize: 50,
            }}
            scroll={{ y: scrollHeight }}
          />

Arkose

Answer 3

Instead of setting scroll={{ y: '100%' }}, set a number. Because scroll y only takes a number where scroll x takes a number or boolean.

Delila

That's not true. Docs state: "Set vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and 'max-content'" – Burmeister

@vsync, CodingisLife's statement is NOT not true. He did not say scroll x ONLY takes a number or boolean but that it does take a number or a boolean. He just didn't included that in addition to these two types it will also accept a percent value and the string 'max-content'. His main point however is that y only takes a number – Halve