mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): add nonSelectableRowIds prop

Browse source 
Closes #1148
This commit is contained in:
Eric Liu 2022-03-12 19:04:31 -08:00
commit 5c48fe76d1
1 changed files with 34 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/DataTable/DataTable.svelte
View file

@ -94,6 +94,12 @@
*/ */
export let selectedRowIds = []; 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 */ /** Set to `true` to enable a sticky header */
export let stickyHeader = false; export let stickyHeader = false;
@ -171,6 +177,9 @@
$: expandableRowIds = rows $: expandableRowIds = rows
.map((row) => row.id) .map((row) => row.id)
.filter((id) => !nonExpandableRowIds.includes(id)); .filter((id) => !nonExpandableRowIds.includes(id));
$: selectableRowIds = rows
.map((row) => row.id)
.filter((id) => !nonSelectableRowIds.includes(id));
$: indeterminate = $: indeterminate =
selectedRowIds.length > 0 && selectedRowIds.length < rows.length; selectedRowIds.length > 0 && selectedRowIds.length < rows.length;
$: if (batchExpansion) { $: if (batchExpansion) {
@ -293,7 +302,7 @@
} }
if (e.target.checked) { if (e.target.checked) {
selectedRowIds = rows.map((row) => row.id); selectedRowIds = selectableRowIds;
} else { } else {
selectedRowIds = []; selectedRowIds = [];
} }
@ -405,28 +414,30 @@
class:bx--table-column-checkbox="{true}" class:bx--table-column-checkbox="{true}"
class:bx--table-column-radio="{radio}" class:bx--table-column-radio="{radio}"
> >
{#if radio} {#if !nonSelectableRowIds.includes(row.id)}
<RadioButton {#if radio}
name="select-row-{row.id}" <RadioButton
checked="{selectedRowIds.includes(row.id)}" name="select-row-{row.id}"
on:change="{() => { checked="{selectedRowIds.includes(row.id)}"
selectedRowIds = [row.id]; on:change="{() => {
}}" selectedRowIds = [row.id];
/> }}"
{:else} />
<InlineCheckbox {:else}
name="select-row-{row.id}" <InlineCheckbox
checked="{selectedRowIds.includes(row.id)}" name="select-row-{row.id}"
on:change="{() => { checked="{selectedRowIds.includes(row.id)}"
if (selectedRowIds.includes(row.id)) { on:change="{() => {
selectedRowIds = selectedRowIds.filter( if (selectedRowIds.includes(row.id)) {
(id) => id !== row.id selectedRowIds = selectedRowIds.filter(
); (id) => id !== row.id
} else { );
selectedRowIds = [...selectedRowIds, row.id]; } else {
} selectedRowIds = [...selectedRowIds, row.id];
}}" }
/> }}"
/>
{/if}
{/if} {/if}
</td> </td>
{/if} {/if}