9

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Pavel Aristarkhov
  • 158
  • 1
  • 1
  • 7

3 Answers3

12

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)

vsync
  • 118,978
  • 58
  • 307
  • 400
0

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

CodingisLife
  • 109
  • 6
  • That's not true. [Docs](https://ant.design/components/table/#scroll) 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'"* – vsync Oct 16 '19 at 16:00
  • @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 – Thomas Kagan Mar 17 '20 at 15:33
0

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 }}
          />
Hoonigan029
  • 1