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.