DataTable header Display vs svelte:fragment

[Tihomir971]

Is it posible to combine header Display and fragment on same datatable?
For example I want to use Intl.NumberFormat (with display) on some rows but also to hide Null values (with svelte:fragment).

I managed to use both but not together.

[theetrain]

Hello, can you please provide details such as a code snippet or screenshot of what you want to modify?

[metonym]

Use the cell slot for every cell and handle both nulls and display inside it. The slot receives cell (with cell.display and cell.value). Check for null first, then call cell.display when it exists.

1. Use display on headers for formatting

const headers = [
  { key: 'name', value: 'Name' },
  { key: 'amount', value: 'Amount', display: (v) => new Intl.NumberFormat().format(v ?? 0) },
];

2. Use the cell slot to hide nulls and apply display

<DataTable {headers} {rows}>
  <svelte:fragment slot="cell" let:cell let:row>
    {#if cell.value == null}
      —
    {:else}
      {cell.display ? cell.display(cell.value, row) : cell.value}
    {/if}
  </svelte:fragment>
</DataTable>

Result: nulls show as —, non-null values use Intl.NumberFormat where display is defined, and plain cell.value elsewhere.

3. Different behavior per column

<svelte:fragment slot="cell" let:cell let:row>
  {#if cell.value == null}
    —
  {:else if cell.key === 'amount'}
    {cell.display ? cell.display(cell.value, row) : cell.value}
  {:else}
    {cell.value}
  {/if}
</svelte:fragment>