DataTable align column numeric

[eduardocapria]

In DataTable how to align a column to the right for numeric values ?

Thank you

[farens]

To align the cell values of a column to the right, you can use the slot "cell" like:

<svelte:fragment slot="cell" let:cell>
    {#if cell.key === 'amount'}
        <div style="text-align:right">{formatCurrency(cell.value)}</div>
    {:else}
        {cell.value}
    {/if}
</svelte:fragment>

To align the header's label i tried the same with the slot "header", but this didn't work, because the label is nested in a button element and a div. The button is a flexbox. Using some global css to push the div in the button to flex-end will work, but i didn't figure out how to do this yet, as i am still new to svelte.

Aligning the header's label on the right can be done with css like:

:global(#my-datatable th:nth-child(4) button) {
  justify-content: flex-end;
}

Set the attribute id="my-datatable" at your DataTable element too.

An alignment field on the header which does both(header label alignment and cell content alignment) would be great :)