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 index, cell index to "cell" slot (#1086)
This commit is contained in:
parent
34affd851a
commit
3b70a35df6
4 changed files with 30 additions and 13 deletions
|
@ -1005,14 +1005,14 @@ export interface DataTableCell {
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ |
|
||||
| -- | Yes | -- | -- |
|
||||
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; } </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) : 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
|
||||
|
||||
|
|
|
@ -2429,7 +2429,7 @@
|
|||
"name": "cell",
|
||||
"default": false,
|
||||
"fallback": "{cell.display ? cell.display(cell.value) : cell.value}",
|
||||
"slot_props": "{ row: DataTableRow; cell: DataTableCell; }"
|
||||
"slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
|
||||
},
|
||||
{
|
||||
"name": "cell-header",
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell
|
||||
* @slot {{ row: DataTableRow; }} expanded-row
|
||||
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header
|
||||
* @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
|
||||
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
|
||||
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
|
||||
* @event {{ expanded: boolean; }} click:header--expand
|
||||
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
|
||||
|
@ -432,7 +432,13 @@
|
|||
{#each row.cells as cell, j (cell.key)}
|
||||
{#if headers[j].empty}
|
||||
<td class:bx--table-column-menu="{headers[j].columnMenu}">
|
||||
<slot name="cell" row="{row}" cell="{cell}">
|
||||
<slot
|
||||
name="cell"
|
||||
row="{row}"
|
||||
cell="{cell}"
|
||||
rowIndex="{i}"
|
||||
cellIndex="{j}"
|
||||
>
|
||||
{cell.display ? cell.display(cell.value) : cell.value}
|
||||
</slot>
|
||||
</td>
|
||||
|
@ -443,7 +449,13 @@
|
|||
dispatch('click:cell', cell);
|
||||
}}"
|
||||
>
|
||||
<slot name="cell" row="{row}" cell="{cell}">
|
||||
<slot
|
||||
name="cell"
|
||||
row="{row}"
|
||||
cell="{cell}"
|
||||
rowIndex="{i}"
|
||||
cellIndex="{j}"
|
||||
>
|
||||
{cell.display ? cell.display(cell.value) : cell.value}
|
||||
</slot>
|
||||
</TableCell>
|
||||
|
|
7
types/DataTable/DataTable.svelte.d.ts
vendored
7
types/DataTable/DataTable.svelte.d.ts
vendored
|
@ -180,7 +180,12 @@ export default class DataTable extends SvelteComponentTyped<
|
|||
},
|
||||
{
|
||||
default: {};
|
||||
cell: { row: DataTableRow; cell: DataTableCell };
|
||||
cell: {
|
||||
row: DataTableRow;
|
||||
cell: DataTableCell;
|
||||
rowIndex: number;
|
||||
cellIndex: number;
|
||||
};
|
||||
["cell-header"]: { header: DataTableNonEmptyHeader };
|
||||
description: {};
|
||||
["expanded-row"]: { row: DataTableRow };
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue