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

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

35
docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import { DataTable } from "carbon-components-svelte";
let expandedRowIds = [];
let selectedRowIds = [];
$: {
console.log("expandedRowIds", expandedRowIds);
console.log("selectedRowIds", selectedRowIds);
}
</script>
<DataTable
batchExpansion
batchSelection
bind:expandedRowIds
bind:selectedRowIds
headers="{[
{ key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'rule', value: 'Rule' },
]}"
rows="{Array.from({ length: 6 }).map((_, i) => ({
id: i,
name: 'Load Balancer ' + (i + 1),
protocol: 'HTTP',
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation',
}))}"
>
<svelte:fragment slot="expanded-row" let:row>
<pre> {JSON.stringify(row, null, 2)}</pre>
</svelte:fragment>
</DataTable>