feat(data-table): add nonExpandableRowIds prop (#862)

* feat(data-table): add nonExpandableRowIds prop #861

* test(data-table): validate nonExpandableRowIds prop

* docs(data-table): add Non-expandable rows example

docs/src/COMPONENT_API.json

@@ -2287,6 +2287,17 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "nonExpandableRowIds",
+          "kind": "let",
+          "description": "Specify the ids for rows that should not be expandable",
+          "type": "DataTableRowId[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "radio",
           "kind": "let",

docs/src/pages/components/DataTable.svx

@@ -1025,6 +1025,12 @@ In the following example, each row in the sortable data table has an overflow me
   </div>
 </DataTable>
 
+### Non-expandable rows
+
+Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable.
+
+<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
+
 ### Expandable (compact size)
 
 <DataTable size="compact" expandable

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

@@ -0,0 +1,68 @@
+<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
+  expandable
+  nonExpandableRowIds="{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}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>