Primereact datatable stick headers

[Amit-ga]

Hello, I am trying to get the headers of my table to be sticky. I do not want to set ScrollHeight. How can I achieve this behavior? couldnt find anything when I searched. this is my table code:

<div className="card">
								<DataTable
									className="p-datatable sm:w-full md:w-3/4 lg:w-1/2 xl:w-1/3"
									size="small"
									tableStyle={{ fontSize: tableTextSize }}
									header={header} 
									value={data}
									rowClassName={(rowData) => tableColors(rowData, selectedRows)}
									rows={300}
									paginator
									paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageInput CurrentPageReport RowsPerPageDropdown'
									rowsPerPageOptions={[10, 25, 50, 100, 200, 300, 400, 500,1000]} 
									scrollable
									emptyMessage="No data found."
									currentPageReportTemplate='Showing {first} to {last} of {totalRecords}'
									showGridlines
									resizableColumns
									columnResizeMode="fit"
									reorderableColumns
									sortField="Time"
									sortOrder="-1"
									removableSort
									compareSelectionBy="equals"
									metaKeySelection={false}
									filters={filters}
									filterDisplay="menu"
									loading={loading}
									globalFilterFields={['Name', 'Age', 'Address', 'Phone']}
									ref={dt}
									selectionMode="multiple"
									selection={selectedRows}
									onSelectionChange={onSelectionChange}
									exportFilename={'export_' + getCurrentDateTimeString()}	   
								>

Thank you.

[melloware]

here you go: https://codesandbox.io/p/sandbox/flamboyant-dawn-nvd7oc?file=%2Fsrc%2Fdemo%2FDataTableDemo.js