diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 77cd8cf0..5910b3b8 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -997,6 +997,7 @@ export interface DataTableCell {
| nonExpandableRowIds | let
| No | DataTableRowId[]
| []
| Specify the ids for rows that should not be expandable |
| radio | let
| No | boolean
| false
| Set to `true` for the radio selection variant |
| batchSelection | let
| No | boolean
| false
| Set to `true` to enable batch selection |
+| nonSelectableRowIds | let
| No | DataTableRowId[]
| []
| Specify the ids of rows that should not be selectable |
| stickyHeader | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
| useStaticWidth | let
| No | boolean
| false
| Set to `true` to use static width |
| pageSize | let
| No | number
| 0
| Specify the number of items to display in a page |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d709392a..800f489e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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",
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 45fd46cd..12cd26e6 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/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
+### Non-selectable rows
+
+Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable.
+
+
+
### Expandable
+ 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",
+ },
+ ];
+
+
+
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index ce232db9..7d0ae252 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -94,6 +94,12 @@
*/
export let selectedRowIds = [];
+ /**
+ * Specify the ids of rows that should not be selectable
+ * @type {DataTableRowId[]}
+ */
+ export let nonSelectableRowIds = [];
+
/** Set to `true` to enable a sticky header */
export let stickyHeader = false;
@@ -164,15 +170,22 @@
{}
);
- $: selectAll = rows.length > 0 && selectedRowIds.length === rows.length;
let refSelectAll = null;
$: batchSelectedIds.set(selectedRowIds);
- $: expandableRowIds = rows
- .map((row) => row.id)
- .filter((id) => !nonExpandableRowIds.includes(id));
+ $: rowIds = rows.map((row) => row.id);
+ $: expandableRowIds = rowIds.filter(
+ (id) => !nonExpandableRowIds.includes(id)
+ );
+ $: selectableRowIds = rowIds.filter(
+ (id) => !nonSelectableRowIds.includes(id)
+ );
+ $: selectAll =
+ selectableRowIds.length > 0 &&
+ selectedRowIds.length === selectableRowIds.length;
$: indeterminate =
- selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
+ selectedRowIds.length > 0 &&
+ selectedRowIds.length < selectableRowIds.length;
$: if (batchExpansion) {
expandable = true;
expanded = expandedRowIds.length === expandableRowIds.length;
@@ -293,7 +306,7 @@
}
if (e.target.checked) {
- selectedRowIds = rows.map((row) => row.id);
+ selectedRowIds = selectableRowIds;
} else {
selectedRowIds = [];
}
@@ -405,28 +418,30 @@
class:bx--table-column-checkbox="{true}"
class:bx--table-column-radio="{radio}"
>
- {#if radio}
-
- {:else}
-
+ {#if !nonSelectableRowIds.includes(row.id)}
+ {#if radio}
+
+ {:else}
+
+ {/if}
{/if}
{/if}
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index e2f82176..6ba564e1 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -131,6 +131,12 @@ export interface DataTableProps
*/
selectedRowIds?: DataTableRowId[];
+ /**
+ * Specify the ids of rows that should not be selectable
+ * @default []
+ */
+ nonSelectableRowIds?: DataTableRowId[];
+
/**
* Set to `true` to enable a sticky header
* @default false