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

docs(data-table): add "Expandable and selectable" example (#1277)

Browse source 
* docs(data-table): add "Expandable and selectable" example

* docs(data-table): add "Batch selection" example

* docs(data-table): rework "Batch selection with initial selected rows" example

* docs(data-table): rework selectable examples to include selectedRowIds

* docs: remove extra space from pre tags
This commit is contained in:
metonym 2022-04-30 09:58:14 -07:00 • committed by GitHub
commit 52eff3c5a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 108 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

32
docs/src/pages/components/DataTable.svx
View file

@ -1077,10 +1077,16 @@ In the following example, each row in the sortable data table has an overflow me
<FileSource src="/framed/DataTable/SelectableDataTable" />
### Initial selected rows
### Batch selection
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
### Batch selection with initial selected rows
Use the `selectedRowIds` prop to specify which rows should be selected.
<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
### Selectable with batch actions
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
@ -1150,9 +1156,7 @@ Use `nonSelectableRowIds` to specify the ids for rows that should not be selecta
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1221,9 +1225,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1282,9 +1284,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1343,9 +1343,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
@ -1404,12 +1402,14 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
]}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
<pre>{JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>
### Expandable and selectable
<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
### Skeleton
<DataTableSkeleton />