Not able to use Fixed Header with autoLayout="True"

[Herald]

Hi there,
I am not able to use Fixed Header feature in the datatable. I want the width of the columns to be based on the content. So, I am using autoLayout="True" by which I can't use scrollable="true". Can Fixed Header be implemented without scrollable="True"?

My piece of code:
<DataTable v-bind:value="allTableData" ref="dt" v-model:selection="selectedProducts3" dataKey="id" class="p-datatable-sm"
:autoLayout="true" showGridlines stripedRows removableSort columnResizeMode="expand"
:reorderableColumns="true" :loading="loading"
responsiveLayout="scroll" scrollHeight="400px" scrollDirection="both"
:paginator="true" :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[10,20,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}">