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

feat(data-table): support radio, selectable variants with batch actions

Browse source
This commit is contained in:
Eric Liu 2020-10-24 13:37:00 -07:00
commit f43b132088
15 changed files with 662 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
---
components: ["DataTable", "Toolbar", "ToolbarSearch"]
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarSearch, Button, Link } from "carbon-components-svelte";
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
@ -247,8 +247,10 @@ The slot name for the table header cells is `"cell-header"`.
]}"
>
<Toolbar>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
@ -307,8 +309,10 @@ The slot name for the table header cells is `"cell-header"`.
]}"
>
<Toolbar size="sm">
<ToolbarSearch />
<Button size="small">Create</Button>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
@ -587,6 +591,23 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Selectable
<FileSource src="/framed/DataTable/SelectableDataTable" />
### Initial selected rows
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
### Selectable with batch actions
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
### Selectable (radio)
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
### Expandable
<DataTable expandable

29
docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte Normal file
View file

@ -0,0 +1,29 @@
<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 = [rows[0].id, rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable
batchSelection
bind:selectedRowIds
headers="{headers}"
rows="{rows}"
/>

42
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
import {
DataTable,
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarBatchActions,
Button,
} from "carbon-components-svelte";
import Save16 from "carbon-icons-svelte/lib/Save16";
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 = [rows[0].id, rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar>
<ToolbarBatchActions>
<Button icon="{Save16}">Save</Button>
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
</ToolbarContent>
</Toolbar>
</DataTable>

24
docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte Normal file
View file

@ -0,0 +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 = [rows[1].id];
$: console.log("selectedRowIds", selectedRowIds);
</script>
<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />

24
docs/src/pages/framed/DataTable/SelectableDataTable.svelte Normal file
View file

@ -0,0 +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}" />