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:
Khiman Louer 2021-04-24 18:20:06 +02:00 committed by GitHub
commit 2676d8d045
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 3 deletions

View file

@ -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);