From 95a1dfa1af187355daf9cf7bb3512b6bdf9282c2 Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 12 Mar 2022 19:36:02 -0800 Subject: [PATCH] feat(data-table): support non-selectable rows (#1166) Closes #1148 --- COMPONENT_INDEX.md | 1 + docs/src/COMPONENT_API.json | 11 +++ docs/src/pages/components/DataTable.svx | 6 ++ .../DataTableNonSelectableRows.svelte | 62 ++++++++++++++++ src/DataTable/DataTable.svelte | 71 +++++++++++-------- types/DataTable/DataTable.svelte.d.ts | 6 ++ 6 files changed, 129 insertions(+), 28 deletions(-) create mode 100644 docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte 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