feat(data-table): support non-selectable rows (#1166)

Closes #1148

docs/src/COMPONENT_API.json

@@ -2367,6 +2367,17 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "nonSelectableRowIds",
+          "kind": "let",
+          "description": "Specify the ids of rows that should not be selectable",
+          "type": "DataTableRowId[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "stickyHeader",
           "kind": "let",

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