DataTable: Inject "row" variable as 2nd argument in "display" functio…

…n for cell items
carbon-design-system · Sep 30, 2023 · 2966387 · 2966387
1 parent aae2dd4
commit 2966387
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 27 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -927,7 +927,7 @@ export type DataTableValue = any;
 export interface DataTableEmptyHeader {
   key: DataTableKey;
   empty: boolean;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row?: DataTableRow) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
   width?: string;
@@ -937,7 +937,7 @@ export interface DataTableEmptyHeader {
 export interface DataTableNonEmptyHeader {
   key: DataTableKey;
   value: DataTableValue;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row?: DataTableRow) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
   width?: string;
@@ -956,7 +956,7 @@ export type DataTableRowId = any;
 export interface DataTableCell {
   key: DataTableKey;
   value: DataTableValue;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row: DataTableRow) => DataTableValue;
 }
 ```
 
@@ -989,14 +989,14 @@ export interface DataTableCell {
 
 ### Slots
 
-| Slot name    | Default | Props                                                                                          | Fallback                                                            |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
-| --           | Yes     | --                                                                                             | --                                                                  |
-| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
-| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                             | <code>{header.value}</code>                                         |
-| description  | No      | --                                                                                             | <code>{description}</code>                                          |
-| expanded-row | No      | <code>{ row: DataTableRow; } </code>                                                           | --                                                                  |
-| title        | No      | --                                                                                             | <code>{title}</code>                                                |
+| Slot name    | Default | Props                                                                                          | Fallback                                                                 |
+| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| --           | Yes     | --                                                                                             | --                                                                       |
+| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
+| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>                                             | <code>{header.value}</code>                                              |
+| description  | No      | --                                                                                             | <code>{description}</code>                                               |
+| expanded-row | No      | <code>{ row: DataTableRow; } </code>                                                           | --                                                                       |
+| title        | No      | --                                                                                             | <code>{title}</code>                                                     |
 
 ### Events
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -2610,7 +2610,7 @@
         {
           "name": "cell",
           "default": false,
-          "fallback": "{cell.display ? cell.display(cell.value) : cell.value}",
+          "fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
           "slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
         },
         {
@@ -2697,14 +2697,14 @@
           "ts": "type DataTableValue = any"
         },
         {
-          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
           "name": "DataTableEmptyHeader",
-          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
           "name": "DataTableNonEmptyHeader",
-          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
         },
         {
           "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@@ -2722,9 +2722,9 @@
           "ts": "type DataTableRowId = any"
         },
         {
-          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }",
+          "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
           "name": "DataTableCell",
-          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }"
+          "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "div" }

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
@@ -2,12 +2,12 @@
   /**
    * @typedef {string} DataTableKey
    * @typedef {any} DataTableValue
-   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
+   * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row?: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
    * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {any} DataTableRowId
-   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
+   * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }} DataTableCell
    * @slot {{ row: DataTableRow; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
    * @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
@@ -200,7 +200,7 @@
     rows[row.id] = headerKeys.map((key, index) => ({
       key,
       value: resolvePath(row, key),
-      display: headers[index].display,
+      display: row.display ? row.display : headers[index].display,
     }));
     return rows;
   }, {});
@@ -480,7 +480,7 @@
                   rowIndex="{i}"
                   cellIndex="{j}"
                 >
-                  {cell.display ? cell.display(cell.value) : cell.value}
+                  {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </td>
             {:else}
@@ -497,7 +497,7 @@
                   rowIndex="{i}"
                   cellIndex="{j}"
                 >
-                  {cell.display ? cell.display(cell.value) : cell.value}
+                  {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </TableCell>
             {/if}

diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
@@ -8,7 +8,7 @@ export type DataTableValue = any;
 export interface DataTableEmptyHeader {
   key: DataTableKey;
   empty: boolean;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row?: DataTableRow) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
   width?: string;
@@ -18,7 +18,7 @@ export interface DataTableEmptyHeader {
 export interface DataTableNonEmptyHeader {
   key: DataTableKey;
   value: DataTableValue;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row?: DataTableRow) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
   columnMenu?: boolean;
   width?: string;
@@ -37,7 +37,7 @@ export type DataTableRowId = any;
 export interface DataTableCell {
   key: DataTableKey;
   value: DataTableValue;
-  display?: (item: Value) => DataTableValue;
+  display?: (item: Value, row: DataTableRow) => DataTableValue;
 }
 
 type RestProps = SvelteHTMLElements["div"];