fix(data-table): fix JSDoc type for expandableRowIds

COMPONENT_INDEX.md

@@ -981,7 +981,7 @@ import { DataTable } from "carbon-components-svelte";
 ### Props
 
 | Prop name      | Type                                                | Default value | Description                                                                                          |
-| :----------- | :-------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------- |
+| :------------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- |
 | headers        | <code>{key: string; value: string;}[]</code>        | --            | Specify the data table headers.                                                                      |
 | rows           | <code>Object[]</code>                               | --            | Specify the rows the data table should render. keys defined in `headers` are used for the row ids.   |
 | size           | <code>"compact" &#124; "short" &#124; "tall"</code> | --            | Set the size of the data table.                                                                      |
@@ -989,11 +989,14 @@ import { DataTable } from "carbon-components-svelte";
 | description    | <code>string</code>                                 | `""`          | Specify the description of the data table.                                                           |
 | zebra          | <code>boolean</code>                                | `false`       | Set to `true` to use zebra styles.                                                                   |
 | sortable       | <code>boolean</code>                                | `false`       | Set to `true` for the sortable variant.                                                              |
+| expandable     | <code>boolean</code>                                | `false`       | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
+| batchExpansion | <code>boolean</code>                                | `false`       | Set to `true` to enable batch expansion.                                                             |
+| expandedRowIds | <code>string[]</code>                               | --            | Specify the row ids to be expanded.                                                                  |
 | stickyHeader   | <code>boolean</code>                                | `false`       | Set to `true` to enable a sticky header.                                                             |
 
 ### Slots
 
-- `<slot>...</slot>`
+- `<slot name="expanded-row">...</slot>`
 
 ### Forwarded events
 
@@ -1001,9 +1004,11 @@ No forwarded events.
 
 ### Dispatched events
 
+- `on:click:header--expand`
 - `on:click`
 - `on:click:header`
 - `on:click:row`
+- `on:click:row--expand`
 - `on:click:cell`
 
 ---

docs/src/components/ComponentApi.svelte

@@ -55,7 +55,8 @@
 
 <h3 id="props">Props</h3>
 
-<div class="overflow">
+{#if component.props.length > 0}
+  <div class="overflow">
     <StructuredList
       style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
     >
@@ -106,7 +107,9 @@
                 </div>
               {/each}
             </StructuredListCell>
-          <StructuredListCell><code>{prop[1].value}</code></StructuredListCell>
+            <StructuredListCell>
+              <code>{prop[1].value}</code>
+            </StructuredListCell>
             <StructuredListCell>
               {#each prop[1].description.split('\n') as line}
                 <div class="description">{line}.</div>
@@ -116,7 +119,8 @@
         {/each}
       </StructuredListBody>
     </StructuredList>
-</div>
+  </div>
+{:else}No props.{/if}
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">

docs/src/layouts/Recipe.svelte

@@ -13,7 +13,6 @@
   import { theme } from "../store";
 
   export let component = $page.title;
-  export let source = "";
 
   metatags.title = $page.title;
 

src/DataTable/DataTable.svelte

@@ -57,7 +57,7 @@
 
   /**
    * Specify the row ids to be expanded
-   * @type {boolean} [expandedRowIds=[]]
+   * @type {string[]} [expandedRowIds=[]]
    */
   export let expandedRowIds = [];
 

types/index.d.ts

@@ -822,6 +822,24 @@ export class DataTable extends CarbonSvelteComponent {
      */
     sortable?: boolean;
 
+    /**
+     * Set to `true` for the expandable variant
+     * Automatically set to `true` if `batchExpansion` is `true`
+     * @default false
+     */
+    expandable?: boolean;
+
+    /**
+     * Set to `true` to enable batch expansion
+     * @default false
+     */
+    batchExpansion?: boolean;
+
+    /**
+     * Specify the row ids to be expanded
+     */
+    expandedRowIds?: string[];
+
     /**
      * Set to `true` to enable a sticky header
      * @default false
@@ -829,7 +847,7 @@ export class DataTable extends CarbonSvelteComponent {
     stickyHeader?: boolean;
   };
 
-  $$slot_def: { default: { props: any } };
+  $$slot_def: { "expanded-row": { row: any } };
 }
 
 export class DataTableSkeleton extends CarbonSvelteComponent {