Skip to content

Commit 9456eaa

Browse files
PierstovalPierstoval
authored
feat(data-table): pass row to display function (#1810)
1 parent 24e2a88 commit 9456eaa

File tree

4 files changed

+26
-26
lines changed

4 files changed

+26
-26
lines changed

‎COMPONENT_INDEX.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -927,7 +927,7 @@ export type DataTableValue = any;
927927
export interface DataTableEmptyHeader {
928928
key: DataTableKey;
929929
empty: boolean;
930-
display?: (item: Value) => DataTableValue;
930+
display?: (item: Value, row: DataTableRow) => DataTableValue;
931931
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
932932
columnMenu?: boolean;
933933
width?: string;
@@ -937,7 +937,7 @@ export interface DataTableEmptyHeader {
937937
export interface DataTableNonEmptyHeader {
938938
key: DataTableKey;
939939
value: DataTableValue;
940-
display?: (item: Value) => DataTableValue;
940+
display?: (item: Value, row: DataTableRow) => DataTableValue;
941941
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
942942
columnMenu?: boolean;
943943
width?: string;
@@ -956,7 +956,7 @@ export type DataTableRowId = any;
956956
export interface DataTableCell {
957957
key: DataTableKey;
958958
value: DataTableValue;
959-
display?: (item: Value) => DataTableValue;
959+
display?: (item: Value, row: DataTableRow) => DataTableValue;
960960
}
961961
```
962962

@@ -989,14 +989,14 @@ export interface DataTableCell {
989989

990990
### Slots
991991

992-
| Slot name | Default | Props | Fallback |
993-
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
994-
| -- | Yes | -- | -- |
995-
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
996-
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
997-
| description | No | -- | <code>{description}</code> |
998-
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
999-
| title | No | -- | <code>{title}</code> |
992+
| Slot name | Default | Props | Fallback |
993+
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
994+
| -- | Yes | -- | -- |
995+
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
996+
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
997+
| description | No | -- | <code>{description}</code> |
998+
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
999+
| title | No | -- | <code>{title}</code> |
10001000

10011001
### Events
10021002

‎docs/src/COMPONENT_API.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -2610,7 +2610,7 @@
26102610
{
26112611
"name": "cell",
26122612
"default": false,
2613-
"fallback": "{cell.display ? cell.display(cell.value) : cell.value}",
2613+
"fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
26142614
"slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
26152615
},
26162616
{
@@ -2697,14 +2697,14 @@
26972697
"ts": "type DataTableValue = any"
26982698
},
26992699
{
2700-
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
2700+
"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; }",
27012701
"name": "DataTableEmptyHeader",
2702-
"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; }"
2702+
"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; }"
27032703
},
27042704
{
2705-
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
2705+
"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; }",
27062706
"name": "DataTableNonEmptyHeader",
2707-
"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; }"
2707+
"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; }"
27082708
},
27092709
{
27102710
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@@ -2722,9 +2722,9 @@
27222722
"ts": "type DataTableRowId = any"
27232723
},
27242724
{
2725-
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }",
2725+
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
27262726
"name": "DataTableCell",
2727-
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }"
2727+
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
27282728
}
27292729
],
27302730
"rest_props": { "type": "Element", "name": "div" }

‎src/DataTable/DataTable.svelte

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
/**
33
* @typedef {string} DataTableKey
44
* @typedef {any} DataTableValue
5-
* @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
6-
* @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
5+
* @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
6+
* @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
77
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
88
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
99
* @typedef {any} DataTableRowId
10-
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
10+
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }} DataTableCell
1111
* @slot {{ row: DataTableRow; }} expanded-row
1212
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header
1313
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
@@ -480,7 +480,7 @@
480480
rowIndex="{i}"
481481
cellIndex="{j}"
482482
>
483-
{cell.display ? cell.display(cell.value) : cell.value}
483+
{cell.display ? cell.display(cell.value, row) : cell.value}
484484
</slot>
485485
</td>
486486
{:else}
@@ -497,7 +497,7 @@
497497
rowIndex="{i}"
498498
cellIndex="{j}"
499499
>
500-
{cell.display ? cell.display(cell.value) : cell.value}
500+
{cell.display ? cell.display(cell.value, row) : cell.value}
501501
</slot>
502502
</TableCell>
503503
{/if}

‎types/DataTable/DataTable.svelte.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export type DataTableValue = any;
88
export interface DataTableEmptyHeader {
99
key: DataTableKey;
1010
empty: boolean;
11-
display?: (item: Value) => DataTableValue;
11+
display?: (item: Value, row: DataTableRow) => DataTableValue;
1212
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
1313
columnMenu?: boolean;
1414
width?: string;
@@ -18,7 +18,7 @@ export interface DataTableEmptyHeader {
1818
export interface DataTableNonEmptyHeader {
1919
key: DataTableKey;
2020
value: DataTableValue;
21-
display?: (item: Value) => DataTableValue;
21+
display?: (item: Value, row: DataTableRow) => DataTableValue;
2222
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
2323
columnMenu?: boolean;
2424
width?: string;
@@ -37,7 +37,7 @@ export type DataTableRowId = any;
3737
export interface DataTableCell {
3838
key: DataTableKey;
3939
value: DataTableValue;
40-
display?: (item: Value) => DataTableValue;
40+
display?: (item: Value, row: DataTableRow) => DataTableValue;
4141
}
4242

4343
type RestProps = SvelteHTMLElements["div"];

0 commit comments

Comments
 (0)