Antd Table: Fixed and Sticky Header

Context

A static header is a common requirement when you are using a table with tens if not hundreds of records.

It helps users not to lose context on what they are looking at when they are scrolling through the records.

There are two ways of implementing a Static Header. Fixed and Sticky.

1. Antd Table: Fixed Header

In this UI header remains fixed and only the body of the table is scrollable. Anything below the table that is related to the table ( maybe custom pagination / Total Number of Rows ) is not included in the scroll.

Ant Design Table: Fixed Header [Scroll Table Body]

This is pretty straightforward to implement (as provided in the Antd Docs)

Pass the prop scroll to the Table component with y as a value that best suits your screen.

Note: y is to enable vertical scroll, similarly x is to enable horizontal scroll.

<Table
   columns={columns}
   dataSource={data}
   scroll={{ y: `calc(100vh - 250px)` }}
/>

2. Antd Table: Sticky Header

In this UI header remains fixed and everything below the table header is scrollable.

Ant Design Table: Sticky Header [Scroll Everything below the table header]

To achieve this you need to wrap Table and table-related entities inside a div ( or similar ).

1. Set a height to the div that enables a scroll and make sure that there is no second scroll elsewhere for better UX.
2. Pass the prop sticky as true. [ Antd internally adds an extra wrapper around your header with class names ant-table-header ant-table-sticky-holder which has styles ( position: sticky, top:0px ) that make the Header fixed but relative to its parent so that the table body does not collapse wwith the header. {Related Read }

ant design header wrapper with styles to make header fixed and positioned relative to parent div.

<div
  style={{
    height: "calc(100vh - 150px)",
    overflow: "auto"
  }}
>
  <Table
    columns={columns}
    dataSource={data}
    sticky={true}
  />
  <h2>Custom Pagination / UI related to Table</h2>
</div>

Key Notes

1. Observe the height in both the snippets being calc(100vh — some px). This is to ensure to not have a second scroll ( mainly the big scroll that you currently see on the right ) on different screens. If you consider px/ rem/ vh for the height you might observe a second scroll on different screens.
2. Use auto for overflow, we tend to use scroll by instinct. If overflow is set to scroll you will see an empty scrollbar container without any scrollbar if the content is not scrollable (if there is not much of content to scroll). In the case of auto, you won’t see an empty scrollbar container.

Conclusion

The complete code is available here https://codesandbox.io/s/ant-design-static-or-sticky-header-n1tgnz?file=/main.tsx

I hope this helped developers who want to implement a fixed or sticky header in the Ant Design Table Component.

Thanks for reading! Drop a clap if you found it helpful. 👏

Cheers! Anjan Talatam