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

feat(data-table): support programmatic sorting

Browse source
This commit is contained in:
Eric Liu 2022-06-05 13:13:12 -07:00
commit c31e0d9051
1 changed files with 21 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/DataTable/DataTable.svelte
View file

@ -53,6 +53,18 @@
/** Set to `true` for the sortable variant */
export let sortable = false;
/**
* Specify the header key to sort by
* @type {DataTableKey}
*/
export let sortKey = null;
/**
* Specify the sort direction
* @type {"none" | "ascending" | "descending"}
*/
export let sortDirection = "none";
/**
* Set to `true` for the expandable variant
* Automatically set to `true` if `batchExpansion` is `true`
@ -133,12 +145,6 @@
const dispatch = createEventDispatcher();
const batchSelectedIds = writable(false);
const tableSortable = writable(sortable);
const sortHeader = writable({
id: null,
key: null,
sort: undefined,
sortDirection: "none",
});
const headerItems = writable([]);
const tableRows = writable(rows);
const thKeys = derived(headerItems, () =>
@ -209,11 +215,11 @@
);
$: $tableRows = rows;
$: sortedRows = [...$tableRows];
$: ascending = $sortHeader.sortDirection === "ascending";
$: sortKey = $sortHeader.key;
$: ascending = sortDirection === "ascending";
$: sorting = sortable && sortKey != null;
$: sortingHeader = headers.find((header) => header.key === sortKey);
$: if (sorting) {
if ($sortHeader.sortDirection === "none") {
if (sortDirection === "none") {
sortedRows = $tableRows;
} else {
sortedRows = [...$tableRows].sort((a, b) => {
@ -224,7 +230,7 @@
? resolvePath(b, sortKey)
: resolvePath(a, sortKey);
if ($sortHeader.sort) return $sortHeader.sort(itemA, itemB);
if (sortingHeader?.sort) return sortingHeader.sort(itemA, itemB);
if (typeof itemA === "number" && typeof itemB === "number")
return itemA - itemB;
@ -344,26 +350,18 @@
id="{header.key}"
style="{formatHeaderWidth(header)}"
sortable="{sortable && header.sort !== false}"
sortDirection="{$sortHeader.sortDirection}"
active="{$sortHeader.id === header.key}"
sortDirection="{sortDirection}"
active="{sortKey !== null && sortKey === header.key}"
on:click="{() => {
dispatch('click', { header });
if (header.sort === false) {
dispatch('click:header', { header });
} else {
let active = header.key === $sortHeader.key;
let currentSortDirection = active
? $sortHeader.sortDirection
: 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
sortDirection = sortDirectionMap[sortDirection];
sortKey =
sortDirection === 'none' ? null : $thKeys[header.key];
dispatch('click:header', { header, sortDirection });
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
}
}}"
>