fix(data-table): do not overwrite row.cells property (#1336)

* refactor(data-table): remove unneeded third argument from resolvePath call * fix(data-table): do not overwrite `cells` property (#667) * perf(data-table): early return if path in object when resolving path
carbon-design-system · Jun 5, 2022 · d2cdb8e · brunnerh · Jun 5, 2022 · brunnerh
1 parent 260bf4e
commit d2cdb8e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
@@ -146,11 +146,13 @@
  .map(({ key }, i) => ({ key, id: key }))
  .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
  );
- const resolvePath = (object, path) =>
- path
+ const resolvePath = (object, path) => {
+ if (path in object) return object[path];
+ return path
  .split(/[\.\[\]\'\"]/)
  .filter((p) => p)
  .reduce((o, p) => (o && typeof o === "object" ? o[p] : o), object);
+ };
 
  setContext("DataTable", {
  sortHeader,
@@ -195,14 +197,18 @@
  $: if (radio || batchSelection) selectable = true;
  $: tableSortable.set(sortable);
  $: headerKeys = headers.map(({ key }) => key);
- $: $tableRows = rows.map((row) => ({
- ...row,
- cells: headerKeys.map((key, index) => ({
- key,
- value: resolvePath(row, key),
- display: headers[index].display,
- })),
- }));
+ $: tableCellsByRowId = rows.reduce(
+ (rows, row) => ({
+ ...rows,
+ [row.id]: headerKeys.map((key, index) => ({
+ key,
+ value: resolvePath(row, key),
+ display: headers[index].display,
+ })),
+ }),
+ {}
+ );
+ $: $tableRows = rows;
  $: sortedRows = [...$tableRows];
  $: ascending = $sortHeader.sortDirection === "ascending";
  $: sortKey = $sortHeader.key;
@@ -213,11 +219,11 @@
  } else {
  sortedRows = [...$tableRows].sort((a, b) => {
  const itemA = ascending
- ? resolvePath(a, sortKey, "")
- : resolvePath(b, sortKey, "");
+ ? resolvePath(a, sortKey)
+ : resolvePath(b, sortKey);
  const itemB = ascending
- ? resolvePath(b, sortKey, "")
- : resolvePath(a, sortKey, "");
+ ? resolvePath(b, sortKey)
+ : resolvePath(a, sortKey);
 
  if ($sortHeader.sort) return $sortHeader.sort(itemA, itemB);
 
@@ -464,7 +470,7 @@
  {/if}
  </td>
  {/if}
- {#each row.cells as cell, j (cell.key)}
+ {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
  {#if headers[j].empty}
  <td class:bx--table-column-menu="{headers[j].columnMenu}">
  <slot

diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
@@ -50,7 +50,7 @@
  if (shouldFilterRows === true) {
  rows = rows.filter((row) => {
  return Object.entries(row)
- .filter(([key]) => !["cells", "id"].includes(key))
+ .filter(([key]) => key !== "id")
  .some(([key, _value]) => {
  if (typeof _value === "string" || typeof _value === "number") {
  return (_value + "")