mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(data-table): pass row to display function (#1810)
This commit is contained in:
Alex Rock
GitHub
parent
24e2a8874f
commit
9456eaab3c
4 changed files with 26 additions and 26 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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" }
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
</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}
|
||||
|
|
|
|||
6
types/DataTable/DataTable.svelte.d.ts
vendored
6
types/DataTable/DataTable.svelte.d.ts
vendored
|
|
@ -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"];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue