Making Header Row Sticky in Next.js with TanStack Table

[adilvalizada]

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.

[powerdong]

I also have the same confusion. I expect the header of the table to be based on the viewport ceiling. Do you have any plan?

[powerdong]

@adilvalizada