I'm using TanStack Table in my Next.js project. I want to make the Header Row sticky in the table created with this library.
I tried the pinned row feature in the TanStack Table documentation, but it didn't work for me. I applied the 'position: sticky' property to the table header, but it also didn't work. The reason behind this issue is that I have applied the 'overflow' property to the parent element of the table. If I remove the 'overflow' property, the table will overflow from the edges of the page, which is not desirable. Below is a sample code snippet.
return (
<div ref={ref} className="overflow-x-auto overflow-y-hidden">
<table id={styles.customTable} className="table-head-container">
<thead className={`${styles.tableHead}`}>{renderTableHeader()}</thead>
<tbody>{renderTableBody(tableRows)}</tbody>
</table>
</div>
);
I would appreciate any help or alternative solutions anyone might have.