mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
52eff3c5a8* 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
63 lines
1.2 KiB
Svelte
63 lines
1.2 KiB
Svelte
<script>
|
|
import { DataTable } from "carbon-components-svelte";
|
|
</script>
|
|
|
|
<DataTable
|
|
zebra
|
|
expandable
|
|
nonExpandableRowIds="{['a', 'd']}"
|
|
headers="{[
|
|
{ key: 'name', value: 'Name' },
|
|
{ key: 'protocol', value: 'Protocol' },
|
|
{ key: 'port', value: 'Port' },
|
|
{ key: 'rule', value: 'Rule' },
|
|
]}"
|
|
rows="{[
|
|
{
|
|
id: 'a',
|
|
name: 'Load Balancer 3',
|
|
protocol: 'HTTP',
|
|
port: 3000,
|
|
rule: 'Round robin',
|
|
},
|
|
{
|
|
id: 'b',
|
|
name: 'Load Balancer 1',
|
|
protocol: 'HTTP',
|
|
port: 443,
|
|
rule: 'Round robin',
|
|
},
|
|
{
|
|
id: 'c',
|
|
name: 'Load Balancer 2',
|
|
protocol: 'HTTP',
|
|
port: 80,
|
|
rule: 'DNS delegation',
|
|
},
|
|
{
|
|
id: 'd',
|
|
name: 'Load Balancer 6',
|
|
protocol: 'HTTP',
|
|
port: 3000,
|
|
rule: 'Round robin',
|
|
},
|
|
{
|
|
id: 'e',
|
|
name: 'Load Balancer 4',
|
|
protocol: 'HTTP',
|
|
port: 443,
|
|
rule: 'Round robin',
|
|
},
|
|
{
|
|
id: 'f',
|
|
name: 'Load Balancer 5',
|
|
protocol: 'HTTP',
|
|
port: 80,
|
|
rule: 'DNS delegation',
|
|
},
|
|
]}"
|
|
>
|
|
<svelte:fragment slot="expanded-row" let:row>
|
|
<pre>{JSON.stringify(row, null, 2)}</pre>
|
|
</svelte:fragment>
|
|
</DataTable>
|