From 07852fcc8abe2b07e016f431245c932dd97df168 Mon Sep 17 00:00:00 2001 From: Alex Rock Ancelet Date: Wed, 27 Sep 2023 16:17:01 +0200 Subject: [PATCH] DataTable: Inject "row" variable as 2nd argument in "display" function for cell items --- COMPONENT_INDEX.md | 22 +++++++++++----------- docs/src/COMPONENT_API.json | 14 +++++++------- src/DataTable/DataTable.svelte | 10 +++++----- types/DataTable/DataTable.svelte.d.ts | 6 +++--- 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f00828c06e..6ac0eb7587 100644 --- 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 | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value) : cell.value} | -| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | -| description | No | -- | {description} | -| expanded-row | No | { row: DataTableRow; } | -- | -| title | No | -- | {title} | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value, row) : cell.value} | +| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | +| description | No | -- | {description} | +| expanded-row | No | { row: DataTableRow; } | -- | +| title | No | -- | {title} | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2ee1d7e52b..908caa53bd 100644 --- 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 index e59b3f00ef..f68f979fd4 100644 --- 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 @@ -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} {: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} {/if} diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts index 2eac75635f..e0dcf1721b 100644 --- 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"];