mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): pass row index, cell index to "cell" slot (#1086)

Browse source
This commit is contained in:
metonym 2022-02-11 07:13:55 -08:00 • committed by GitHub
commit 3b70a35df6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

16
COMPONENT_INDEX.md
View file

@ -1005,14 +1005,14 @@ export interface DataTableCell {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ | | :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; } </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) : 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> | -- |
| title | No | -- | <code>{title}</code> | | title | No | -- | <code>{title}</code> |
### Events ### Events

2
docs/src/COMPONENT_API.json
View file

@ -2429,7 +2429,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) : cell.value}",
"slot_props": "{ row: DataTableRow; cell: DataTableCell; }" "slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }"
}, },
{ {
"name": "cell-header", "name": "cell-header",

18
src/DataTable/DataTable.svelte
View file

@ -10,7 +10,7 @@
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => 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; }} cell * @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click * @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @event {{ expanded: boolean; }} click:header--expand * @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header * @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
@ -432,7 +432,13 @@
{#each row.cells as cell, j (cell.key)} {#each row.cells as cell, j (cell.key)}
{#if headers[j].empty} {#if headers[j].empty}
<td class:bx--table-column-menu="{headers[j].columnMenu}"> <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} {cell.display ? cell.display(cell.value) : cell.value}
</slot> </slot>
</td> </td>
@ -443,7 +449,13 @@
dispatch('click:cell', cell); 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} {cell.display ? cell.display(cell.value) : cell.value}
</slot> </slot>
</TableCell> </TableCell>

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

@ -180,7 +180,12 @@ export default class DataTable extends SvelteComponentTyped<
}, },
{ {
default: {}; default: {};
cell: { row: DataTableRow; cell: DataTableCell }; cell: {
row: DataTableRow;
cell: DataTableCell;
rowIndex: number;
cellIndex: number;
};
["cell-header"]: { header: DataTableNonEmptyHeader }; ["cell-header"]: { header: DataTableNonEmptyHeader };
description: {}; description: {};
["expanded-row"]: { row: DataTableRow }; ["expanded-row"]: { row: DataTableRow };