From cab576c3351533dd8cb25c4f4ebde77c68dcddb6 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 18 Oct 2021 20:41:56 -0700 Subject: [PATCH] feat(data-table): add nonExpandableRowIds prop #861 --- COMPONENT_INDEX.md | 37 +++++++++++---------- docs/src/COMPONENT_API.json | 11 ++++++ src/DataTable/DataTable.svelte | 48 ++++++++++++++++----------- types/DataTable/DataTable.svelte.d.ts | 6 ++++ 4 files changed, 64 insertions(+), 38 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 8970cded..c1b69258 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -976,24 +976,25 @@ export interface DataTableCell { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | -| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | -| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | -| size | let | No | "compact" | "short" | "medium" | "tall" | -- | Set the size of the data table | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | -| 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 | -| 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 | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | +| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | +| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | +| size | let | No | "compact" | "short" | "medium" | "tall" | -- | Set the size of the data table | +| title | let | No | string | "" | Specify the title of the data table | +| description | let | No | string | "" | Specify the description of the data table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | +| 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 | +| 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 | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 8310cb6b..790f58a2 100644 --- a/docs/src/COMPONENT_API.json +++ b/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", diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 3c3bf4ec..7b932b67 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -70,6 +70,12 @@ */ export let expandedRowIds = []; + /** + * Specify the ids for rows that should not be expandable + * @type {DataTableRowId[]} + */ + export let nonExpandableRowIds = []; + /** Set to `true` for the radio selection variant */ export let radio = false; @@ -343,27 +349,29 @@ ? 'collapsed' : undefined}" > - + dispatch('click:row--expand', { + row, + expanded: !rowExpanded, + }); + }}" + > + + + {/if} {/if} {#if selectable} @@ -418,7 +426,7 @@ {/each} - {#if expandable && expandedRows[row.id]} + {#if expandable && expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}