mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +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/framed/DataTable/SelectableDataTable.svelte
View file

@ -1,24 +1,24 @@
<script>
import { DataTable } from "carbon-components-svelte";
const headers = [
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
];
const rows = [
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
];
let selectedRowIds = [];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
<DataTable
selectable
bind:selectedRowIds
headers="{[
{ key: 'name', value: 'Name' },
{ 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',
}))}"
/>