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

feat(data-table): support empty table body columns

Browse source
This commit is contained in:
Eric Liu 2020-10-26 11:55:58 -07:00
commit 3c02829e73
7 changed files with 299 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/DataTable/DataTable.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the data table headers
* @type {{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]} [headers=[]]
* @type {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]} [headers=[]]
*/
export let headers = [];
@ -247,23 +247,27 @@
</th>
{/if}
{#each headers as header, i (header.key)}
<TableHeader
on:click="{() => {
dispatch('click', { header });
let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
dispatch('click:header', { header, sortDirection });
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
}}"
>
<slot name="cell-header" header="{header}">{header.value}</slot>
</TableHeader>
{#if header.empty}
<th scope="col"></th>
{:else}
<TableHeader
on:click="{() => {
dispatch('click', { header });
let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
dispatch('click:header', { header, sortDirection });
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
}}"
>
<slot name="cell-header" header="{header}">{header.value}</slot>
</TableHeader>
{/if}
{/each}
</TableRow>
</TableHead>
@ -337,16 +341,24 @@
</td>
{/if}
{#each row.cells as cell, j (cell.key)}
<TableCell
on:click="{() => {
dispatch('click', { row, cell });
dispatch('click:cell', cell);
}}"
>
<slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value}
</slot>
</TableCell>
{#if headers[j].empty}
<td class:bx--table-column-menu="{headers[j].columnMenu}">
<slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value}
</slot>
</td>
{:else}
<TableCell
on:click="{() => {
dispatch('click', { row, cell });
dispatch('click:cell', cell);
}}"
>
<slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value}
</slot>
</TableCell>
{/if}
{/each}
</TableRow>