Adding display attr to DataTableCell (#615)

This commit is contained in:
rafadess 2021-04-30 20:18:47 -03:00 committed by GitHub
commit 47c79b16c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions

View file

@ -7,7 +7,7 @@
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {string} DataTableRowId * @typedef {string} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row * @slot {{ row: DataTableRow; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; }} cell * @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
@ -167,7 +167,11 @@
$: headerKeys = headers.map(({ key }) => key); $: headerKeys = headers.map(({ key }) => key);
$: rows = rows.map((row) => ({ $: rows = rows.map((row) => ({
...row, ...row,
cells: headerKeys.map((key) => ({ key, value: resolvePath(row, key, "") })), cells: headerKeys.map((key, index) => ({
key,
value: resolvePath(row, key, ""),
display: headers[index].display,
})),
})); }));
$: sortedRows = rows; $: sortedRows = rows;
$: ascending = $sortHeader.sortDirection === "ascending"; $: ascending = $sortHeader.sortDirection === "ascending";
@ -377,9 +381,7 @@
{#if headers[j].empty} {#if headers[j].empty}
<td class:bx--table-column-menu="{headers[j].columnMenu}"> <td class:bx--table-column-menu="{headers[j].columnMenu}">
<slot name="cell" row="{row}" cell="{cell}"> <slot name="cell" row="{row}" cell="{cell}">
{headers[j].display {cell.display ? cell.display(cell.value) : cell.value}
? headers[j].display(cell.value)
: cell.value}
</slot> </slot>
</td> </td>
{:else} {:else}
@ -390,9 +392,7 @@
}}" }}"
> >
<slot name="cell" row="{row}" cell="{cell}"> <slot name="cell" row="{row}" cell="{cell}">
{headers[j].display {cell.display ? cell.display(cell.value) : cell.value}
? headers[j].display(cell.value)
: cell.value}
</slot> </slot>
</TableCell> </TableCell>
{/if} {/if}

View file

@ -33,6 +33,7 @@ export type DataTableRowId = string;
export interface DataTableCell { export interface DataTableCell {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value) => DataTableValue;
} }
export interface DataTableProps export interface DataTableProps