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

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