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

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte

@@ -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>