Width Issue

[Audhut]

I have an issue with the width of the datable. The action row is usualy hidden and the horizontal scroll is also not avialble.

when i load the grid by pressing F5 all works fine

when i navigate to the page through links. NOTE there are no horizontal scroll and the action column is hidden/missing

const settings = {
    sortable: true,
    pagination: true,
    rowPerPage: 20,
    noRows: "No data found",
    columnFilter: true,
};

let data= [];

onMount(async () => {
    data= await  dataService.getAll();
    
});

<Datatable {settings} data={data}>

id
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Actions


{#each $rows as row}

{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}

<button
on:click={() => {
handleClick(row?.id);
}}
class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100"
>View Details


{/each}

<style> th:first-child { width: 56px; } td { text-align: center; padding: 4px 8px; white-space: nowrap; } </style>