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/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index c823dae6..60baa463 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -1025,6 +1025,12 @@ In the following example, each row in the sortable data table has an overflow me +### Non-expandable rows + +Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable. + + + ### Expandable (compact size) + 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", + }, + ]; + + + +
+
+      {JSON.stringify(row, null, 2)}
+    
+
+
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)} - +
       {JSON.stringify(row, null, 2)}
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 8e4b57ca..1229e3ae 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -99,6 +99,12 @@ export interface DataTableProps
    */
   expandedRowIds?: DataTableRowId[];
 
+  /**
+   * Specify the ids for rows that should not be expandable
+   * @default []
+   */
+  nonExpandableRowIds?: DataTableRowId[];
+
   /**
    * Set to `true` for the radio selection variant
    * @default false