Antd - Table Header Fixed on top when scrolling page

Question

How can I make the table header fixed on top on vertical scroll in antd? I have used css like position: fixed, top: 0. But these are not working in my case

<DraggableANTGrid
                    dragProps={this.dragProps}
                    isDraggable={false}
                    tableProps={{
                        rowKey: "IndianExpImpId",
                        columns: finalColumns,
                        components: { header: { cell: ResizeableColumn } },
                        dataSource: rows,
                        onChange: this.onFilterChange,
                        size: "small",
                        scroll: { x: totalWidth + 96, y: 700 },
                        expandedRowRender: this.getExpandRow,
                        pagination: false,
                        rowSelection: {
                            selectedRowKeys: importExportIds,
                            onChange: this.rowSelection,
                            fixed: finalColumns.length > 2
                        }
                    }} />

score 2 · Answer 1 · answered Jan 25 '23 at 15:18

2

try this prop, i've worked it out..!!

scroll={{x:950,y:"calc(100vh - 220px)" }}

answered Jan 25 '23 at 15:18

vamsee krishna

21
2

score 1 · Answer 2 · answered Aug 07 '20 at 07:33

For antd table props, scroll={y: ...} allows you to fix your table header. However, the scroll property is not compatible with expandedRowRender property. You'll have to choose one of them. A possible solution is to use only scroll property, remove expandedRowRender and display it's content in a Modal whenever the row is clicked.

Antd - Table Header Fixed on top when scrolling page

2 Answers2