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

feat(toolbar-search): support auto-filterable rows (#1179)

Browse source 
Closes #591
This commit is contained in:
metonym 2022-03-19 12:01:03 -07:00 • committed by GitHub
commit 2df7b92269
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 218 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/DataTable/DataTable.svelte
View file

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