From 47c79b16c72be9f907534ddc3a25bab19665e677 Mon Sep 17 00:00:00 2001
From: rafadess <42934425+rafadess@users.noreply.github.com>
Date: Fri, 30 Apr 2021 20:18:47 -0300
Subject: [PATCH] Adding display attr to DataTableCell (#615)

---
 src/DataTable/DataTable.svelte | 16 ++++++++--------
 types/DataTable/DataTable.d.ts |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 06ced220..a85aa924 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -7,7 +7,7 @@
    * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {string} DataTableRowId
-   * @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
    * @slot {{ row: DataTableRow; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
    * @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
@@ -167,7 +167,11 @@
   $: headerKeys = headers.map(({ key }) => key);
   $: rows = rows.map((row) => ({
     ...row,
-    cells: headerKeys.map((key) => ({ key, value: resolvePath(row, key, "") })),
+    cells: headerKeys.map((key, index) => ({
+      key,
+      value: resolvePath(row, key, ""),
+      display: headers[index].display,
+    })),
   }));
   $: sortedRows = rows;
   $: ascending = $sortHeader.sortDirection === "ascending";
@@ -377,9 +381,7 @@
             {#if headers[j].empty}
               <td class:bx--table-column-menu="{headers[j].columnMenu}">
                 <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display
-                    ? headers[j].display(cell.value)
-                    : cell.value}
+                  {cell.display ? cell.display(cell.value) : cell.value}
                 </slot>
               </td>
             {:else}
@@ -390,9 +392,7 @@
                 }}"
               >
                 <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display
-                    ? headers[j].display(cell.value)
-                    : cell.value}
+                  {cell.display ? cell.display(cell.value) : cell.value}
                 </slot>
               </TableCell>
             {/if}
diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts
index 66812d6a..ab82b5ed 100644
--- a/types/DataTable/DataTable.d.ts
+++ b/types/DataTable/DataTable.d.ts
@@ -33,6 +33,7 @@ export type DataTableRowId = string;
 export interface DataTableCell {
   key: DataTableKey;
   value: DataTableValue;
+  display?: (item: Value) => DataTableValue;
 }
 
 export interface DataTableProps