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

feat(data-table): pass rows through DataTable context

Browse source
This commit is contained in:
Eric Liu 2022-03-17 19:49:54 -07:00
commit a419307c91
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/DataTable/DataTable.svelte
View file

@ -140,6 +140,7 @@
sortDirection: "none", sortDirection: "none",
}); });
const headerItems = writable([]); const headerItems = writable([]);
const tableRows = writable(rows);
const thKeys = derived(headerItems, () => const thKeys = derived(headerItems, () =>
headers headers
.map(({ key }, i) => ({ key, id: key })) .map(({ key }, i) => ({ key, id: key }))
@ -155,6 +156,7 @@
sortHeader, sortHeader,
tableSortable, tableSortable,
batchSelectedIds, batchSelectedIds,
tableRows,
resetSelectedRowIds: () => { resetSelectedRowIds: () => {
selectAll = false; selectAll = false;
selectedRowIds = []; selectedRowIds = [];
@ -173,7 +175,7 @@
let refSelectAll = null; let refSelectAll = null;
$: batchSelectedIds.set(selectedRowIds); $: batchSelectedIds.set(selectedRowIds);
$: rowIds = rows.map((row) => row.id); $: rowIds = $tableRows.map((row) => row.id);
$: expandableRowIds = rowIds.filter( $: expandableRowIds = rowIds.filter(
(id) => !nonExpandableRowIds.includes(id) (id) => !nonExpandableRowIds.includes(id)
); );
@ -193,23 +195,25 @@
$: if (radio || batchSelection) selectable = true; $: if (radio || batchSelection) selectable = true;
$: tableSortable.set(sortable); $: tableSortable.set(sortable);
$: headerKeys = headers.map(({ key }) => key); $: headerKeys = headers.map(({ key }) => key);
$: rows = rows.map((row) => ({ $: tableRows.set(
rows.map((row) => ({
...row, ...row,
cells: headerKeys.map((key, index) => ({ cells: headerKeys.map((key, index) => ({
key, key,
value: resolvePath(row, key), value: resolvePath(row, key),
display: headers[index].display, display: headers[index].display,
})), })),
})); }))
$: sortedRows = rows; );
$: sortedRows = [...$tableRows];
$: ascending = $sortHeader.sortDirection === "ascending"; $: ascending = $sortHeader.sortDirection === "ascending";
$: sortKey = $sortHeader.key; $: sortKey = $sortHeader.key;
$: sorting = sortable && sortKey != null; $: sorting = sortable && sortKey != null;
$: if (sorting) { $: if (sorting) {
if ($sortHeader.sortDirection === "none") { if ($sortHeader.sortDirection === "none") {
sortedRows = rows; sortedRows = $tableRows;
} else { } else {
sortedRows = [...rows].sort((a, b) => { sortedRows = [...$tableRows].sort((a, b) => {
const itemA = ascending const itemA = ascending
? resolvePath(a, sortKey, "") ? resolvePath(a, sortKey, "")
: resolvePath(b, sortKey, ""); : resolvePath(b, sortKey, "");
@ -236,7 +240,7 @@
page && pageSize page && pageSize
? rows.slice((page - 1) * pageSize, page * pageSize) ? rows.slice((page - 1) * pageSize, page * pageSize)
: rows; : rows;
$: displayedRows = getDisplayedRows(rows, page, pageSize); $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize); $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
</script> </script>