diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index ce232db9..0c33d289 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; @@ -171,6 +177,9 @@ $: expandableRowIds = rows .map((row) => row.id) .filter((id) => !nonExpandableRowIds.includes(id)); + $: selectableRowIds = rows + .map((row) => row.id) + .filter((id) => !nonSelectableRowIds.includes(id)); $: indeterminate = selectedRowIds.length > 0 && selectedRowIds.length < rows.length; $: if (batchExpansion) { @@ -293,7 +302,7 @@ } if (e.target.checked) { - selectedRowIds = rows.map((row) => row.id); + selectedRowIds = selectableRowIds; } else { selectedRowIds = []; } @@ -405,28 +414,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}