mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Adding display attr to DataTableCell

Browse source
This commit is contained in:
Rafael Dessotti 2021-04-21 18:44:21 -03:00
commit 0c2162ecc4
2 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/DataTable/DataTable.svelte
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
@ -159,7 +159,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: row[key] })), cells: headerKeys.map((key, index) => ({
key,
value: row[key],
display: headers[index].display,
})),
})); }));
$: sortedRows = rows; $: sortedRows = rows;
$: ascending = $sortHeader.sortDirection === "ascending"; $: ascending = $sortHeader.sortDirection === "ascending";
@ -365,9 +369,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}
@ -378,9 +380,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}

1
types/DataTable/DataTable.d.ts vendored
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