fix(data-table): handle dynamic headers gracefully (#2195)

Fixes #2193
This commit is contained in:
Eric Liu 2025-09-05 09:01:36 -07:00 committed by GitHub
commit 6d0d3b108b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 94 additions and 7 deletions

View file

@ -263,12 +263,13 @@
expanded = expandedRowIds.length === expandableRowIds.length;
}
$: if (radio || batchSelection) selectable = true;
$: headerKeys = headers.map(({ key }) => key);
$: tableCellsByRowId = rows.reduce((rows, row) => {
rows[row.id] = headerKeys.map((key, index) => ({
key,
value: resolvePath(row, key),
display: headers[index].display,
rows[row.id] = headers.map((header, index) => ({
key: header.key || `key-${index}`,
value: header.key ? resolvePath(row, header.key) : undefined,
display: header.display,
empty: header.empty,
columnMenu: header.columnMenu,
}));
return rows;
}, {});
@ -557,8 +558,8 @@
</td>
{/if}
{#each tableCellsByRowId[row.id] as cell, j (cell.key)}
{#if headers[j].empty}
<td class:bx--table-column-menu={headers[j].columnMenu}>
{#if cell.empty}
<td class:bx--table-column-menu={cell.columnMenu}>
<slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
{cell.display ? cell.display(cell.value, row) : cell.value}
</slot>