mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): pass row to display function (#1810)

Browse source
This commit is contained in:
Alex Rock 2023-10-01 19:19:13 +02:00 • committed by GitHub
commit 9456eaab3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

10
COMPONENT_INDEX.md
View file

@ -927,7 +927,7 @@ export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader {
key: DataTableKey; key: DataTableKey;
empty: boolean; empty: boolean;
display?: (item: Value) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -937,7 +937,7 @@ export interface DataTableEmptyHeader {
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
@ -956,7 +956,7 @@ export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell {
key: DataTableKey; key: DataTableKey;
value: DataTableValue; value: DataTableValue;
display?: (item: Value) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
} }
``` ```
@ -990,9 +990,9 @@ export interface DataTableCell {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ | | :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> | | 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> | | cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> | | description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- | | expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |

14
docs/src/COMPONENT_API.json
View file

@ -2610,7 +2610,7 @@
{ {
"name": "cell", "name": "cell",
"default": false, "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; }" "slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
}, },
{ {
@ -2697,14 +2697,14 @@
"ts": "type DataTableValue = any" "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", "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", "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", "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -2722,9 +2722,9 @@
"ts": "type DataTableRowId = any" "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", "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" } "rest_props": { "type": "Element", "name": "div" }

10
src/DataTable/DataTable.svelte
View file

@ -2,12 +2,12 @@
/** /**
* @typedef {string} DataTableKey * @typedef {string} DataTableKey
* @typedef {any} DataTableValue * @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; 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) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader * @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 {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId * @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 {{ row: DataTableRow; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell * @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
@ -480,7 +480,7 @@
rowIndex="{i}" rowIndex="{i}"
cellIndex="{j}" cellIndex="{j}"
> >
{cell.display ? cell.display(cell.value) : cell.value} {cell.display ? cell.display(cell.value, row) : cell.value}
</slot> </slot>
</td> </td>
{:else} {:else}
@ -497,7 +497,7 @@
rowIndex="{i}" rowIndex="{i}"
cellIndex="{j}" cellIndex="{j}"
> >
{cell.display ? cell.display(cell.value) : cell.value} {cell.display ? cell.display(cell.value, row) : cell.value}
</slot> </slot>
</TableCell> </TableCell>
{/if} {/if}

6
types/DataTable/DataTable.svelte.d.ts vendored
View file

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