Column in DataTable from array

[Tihomir971]

I have this data:
m_productprice: Array(2)
0: {m_pricelist_version_id: 5, pricestd: 381.98}
1: {m_pricelist_version_id: 13, pricestd: 550.99}

How can i show in one column pricestd where m_pricelist_version = 5 and in another column where m_pricelist_version_id = 13

[metonym]

There are two approaches: to show pricestd in separate columns by m_pricelist_version_id, either reshape the rows before passing them to the DataTable or use a display function that looks up the value in the array.

1. Reshape rows before passing to DataTable

<script>
  const PRICELIST_IDS = [5, 13];

  const headers = [
    { key: 'name', value: 'Product' },
    ...PRICELIST_IDS.map((id) => ({
      key: `pricestd_${id}`,
      value: `Price (v${id})`,
    })),
  ];

  $: rows = rawData.map((row) => ({
    ...row,
    ...Object.fromEntries(
      PRICELIST_IDS.map((id) => [
        `pricestd_${id}`,
        row.m_productprice?.find((p) => p.m_pricelist_version_id === id)?.pricestd,
      ])
    ),
  }));
</script>

<DataTable {headers} {rows} />

2. Use display to read from the array

Use a unique key per column (e.g. price_5) and a display function that ignores the value and reads from row.m_productprice:

<script>
  const headers = [
    { key: 'name', value: 'Product' },
    {
      key: 'price_5',
      value: 'Price (v5)',
      display: (_, row) =>
        row.m_productprice?.find((p) => p.m_pricelist_version_id === 5)?.pricestd ?? '',
    },
    {
      key: 'price_13',
      value: 'Price (v13)',
      display: (_, row) =>
        row.m_productprice?.find((p) => p.m_pricelist_version_id === 13)?.pricestd ?? '',
    },
  ];
</script>

<DataTable {headers} {rows} />

Prefer reshaping the data (option 1) for simpler logic and sorting.

3. Dynamic columns from the data

<script>
  const allPricelistIds = [5, 13]; // or derive from data

  const headers = [
    { key: 'name', value: 'Product' },
    ...allPricelistIds.map((id) => ({
      key: `price_${id}`,
      value: `Price v${id}`,
      display: (_, row) =>
        row.m_productprice?.find((p) => p.m_pricelist_version_id === id)?.pricestd ?? '—',
    })),
  ];
</script>

<DataTable {headers} {rows} />