docs(data-table): add non-selectable rows example

docs/src/pages/components/DataTable.svx

@@ -1044,6 +1044,12 @@ In the following example, each row in the sortable data table has an overflow me
 
 <FileSource src="/framed/DataTable/RadioSelectableDataTable" />
 
+### Non-selectable rows
+
+Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable.
+
+<FileSource src="/framed/DataTable/DataTableNonSelectableRows" />
+
 ### Expandable
 
 <DataTable expandable

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

@@ -0,0 +1,62 @@
+<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
+  batchSelection
+  nonSelectableRowIds="{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}"
+/>