mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Add support for nested object fields in DataTable (#602)
* feature: Add support for nested object fields in Data Table feature: Add support for nested object fields in Data Table * fix can't open dropdown with keyboard (#610) * fix(Dropdown): update selectedId when selectedIndex changes. (#611) * chore(deps-dev): patch carbon-components@10.32.1 (#613) * v0.32.2 * feature: Add support for nested object fields in Data Table feature: Add support for nested object fields in Data Table * chore: Added example for nested object values into the documentation Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com> Co-authored-by: David Espinosa <david.emanuel.espinosa@gmail.com> Co-authored-by: Eric Liu <ericyl.us@gmail.com>
This commit is contained in:
parent
9e0893051d
commit
2676d8d045
2 changed files with 94 additions and 3 deletions
|
@ -124,6 +124,14 @@
|
|||
.map(({ key }, i) => ({ key, id: $headerItems[i] }))
|
||||
.reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
|
||||
);
|
||||
const resolvePath = (object, path, defaultValue) =>
|
||||
path
|
||||
.split(/[\.\[\]\'\"]/)
|
||||
.filter((p) => p)
|
||||
.reduce(
|
||||
(o, p) => (o && typeof o === "object" && o[p] ? o[p] : defaultValue),
|
||||
object
|
||||
);
|
||||
|
||||
setContext("DataTable", {
|
||||
sortHeader,
|
||||
|
@ -159,7 +167,7 @@
|
|||
$: headerKeys = headers.map(({ key }) => key);
|
||||
$: rows = rows.map((row) => ({
|
||||
...row,
|
||||
cells: headerKeys.map((key) => ({ key, value: row[key] })),
|
||||
cells: headerKeys.map((key) => ({ key, value: resolvePath(row, key, "") })),
|
||||
}));
|
||||
$: sortedRows = rows;
|
||||
$: ascending = $sortHeader.sortDirection === "ascending";
|
||||
|
@ -170,8 +178,12 @@
|
|||
sortedRows = rows;
|
||||
} else {
|
||||
sortedRows = [...rows].sort((a, b) => {
|
||||
const itemA = ascending ? a[sortKey] : b[sortKey];
|
||||
const itemB = ascending ? b[sortKey] : a[sortKey];
|
||||
const itemA = ascending
|
||||
? resolvePath(a, sortKey, "")
|
||||
: resolvePath(b, sortKey, "");
|
||||
const itemB = ascending
|
||||
? resolvePath(b, sortKey, "")
|
||||
: resolvePath(a, sortKey, "");
|
||||
|
||||
if ($sortHeader.sort) return $sortHeader.sort(itemA, itemB);
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue