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

feat: add display and sort methods in header object

Browse source
This commit is contained in:
albert 2020-10-21 23:39:25 +02:00
commit 2ad9072abd
1 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/DataTable/DataTable.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the data table headers
* @type {{key: string; value: string;}[]} [headers=[]]
* @type {{key: string; value: string; display?: (item) => string; sort?: (a, b) => number}[]} [headers=[]]
*/
export let headers = [];
@ -85,7 +85,12 @@
};
const dispatch = createEventDispatcher();
const tableSortable = writable(sortable);
const sortHeader = writable({ id: null, key: null, sortDirection: "none" });
const sortHeader = writable({
id: null,
key: null,
sort: undefined,
sortDirection: "none",
});
const headerItems = writable([]);
const thKeys = derived(headerItems, () =>
headers
@ -123,18 +128,22 @@
if ($sortHeader.sortDirection === "none") {
sortedRows = rows;
} else {
sortedRows = [...rows].sort((a, b) => {
const itemA = ascending ? a[sortKey] : b[sortKey];
const itemB = ascending ? b[sortKey] : a[sortKey];
sortedRows = [...rows].sort(
$sortHeader.sort
? $sortHeader.sort
: (a, b) => {
const itemA = ascending ? a[sortKey] : b[sortKey];
const itemB = ascending ? b[sortKey] : a[sortKey];
if (typeof itemA === "number" && typeof itemB === "number") {
return itemA - itemB;
}
if (typeof itemA === "number" && typeof itemB === "number") {
return itemA - itemB;
}
return itemA
.toString()
.localeCompare(itemB.toString(), "en", { numeric: true });
});
return itemA
.toString()
.localeCompare(itemB.toString(), "en", { numeric: true });
}
);
}
}
</script>
@ -181,6 +190,7 @@
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
}}"
@ -231,7 +241,9 @@
dispatch('click:cell', cell);
}}"
>
<slot name="cell" row="{row}" cell="{cell}">{cell.value}</slot>
<slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value}
</slot>
</TableCell>
{/each}
</TableRow>