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
66 lines
1.3 KiB
Svelte
66 lines
1.3 KiB
Svelte
<script>
|
|
import { DataTable } from "carbon-components-svelte";
|
|
|
|
const 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",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<DataTable
|
|
batchExpansion
|
|
nonExpandableRowIds="{rows
|
|
.filter((row) => row.port < 3000)
|
|
.map((row) => row.id)}"
|
|
headers="{[
|
|
{ key: 'name', value: 'Name' },
|
|
{ key: 'protocol', value: 'Protocol' },
|
|
{ key: 'port', value: 'Port' },
|
|
{ key: 'rule', value: 'Rule' },
|
|
]}"
|
|
rows="{rows}"
|
|
>
|
|
<svelte:fragment slot="expanded-row" let:row>
|
|
<pre>{JSON.stringify(row, null, 2)}</pre>
|
|
</svelte:fragment>
|
|
</DataTable>
|