mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(data-table): fix JSDoc type for expandableRowIds
This commit is contained in:
Eric Liu
parent
0a927ae512
commit
1a809c9c3a
6 changed files with 178 additions and 2703 deletions
|
|
@ -980,20 +980,23 @@ 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" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
||||
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
||||
| 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. |
|
||||
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
|
||||
| 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" | "short" | "tall"</code> | -- | Set the size of the data table. |
|
||||
| title | <code>string</code> | `""` | Specify the title of the data table. |
|
||||
| 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`
|
||||
|
||||
---
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -55,68 +55,72 @@
|
|||
|
||||
<h3 id="props">Props</h3>
|
||||
|
||||
<div class="overflow">
|
||||
<StructuredList
|
||||
style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
|
||||
>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Prop name</StructuredListCell>
|
||||
<StructuredListCell head>Type</StructuredListCell>
|
||||
<StructuredListCell head noWrap>Default value</StructuredListCell>
|
||||
<StructuredListCell head>Description</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each component.props as prop}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>
|
||||
<InlineSnippet code="{prop[0]}" />
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].type.split(' | ') as type, i (type)}
|
||||
<div
|
||||
class="cell"
|
||||
style="z-index: {prop[1].type.split(' | ').length - i}"
|
||||
>
|
||||
{#if type.startsWith('typeof')}
|
||||
<TooltipDefinition
|
||||
direction="top"
|
||||
align="start"
|
||||
tooltipText="{`From "carbon-icons-svelte"`}"
|
||||
>
|
||||
Carbon Svelte icon
|
||||
</TooltipDefinition>
|
||||
{:else if type.startsWith('HTML')}
|
||||
<Link
|
||||
href="{mdn_api}{type}"
|
||||
target="_blank"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
{type}
|
||||
<Launch16 />
|
||||
</Link>
|
||||
{:else if type in typeMap}
|
||||
<code>{typeMap[type]}</code>
|
||||
{:else if type.startsWith('(')}
|
||||
<code>{type}</code>
|
||||
{:else}
|
||||
<InlineSnippet code="{type}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell><code>{prop[1].value}</code></StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].description.split('\n') as line}
|
||||
<div class="description">{line}.</div>
|
||||
{/each}
|
||||
</StructuredListCell>
|
||||
{#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))"
|
||||
>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Prop name</StructuredListCell>
|
||||
<StructuredListCell head>Type</StructuredListCell>
|
||||
<StructuredListCell head noWrap>Default value</StructuredListCell>
|
||||
<StructuredListCell head>Description</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
</div>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each component.props as prop}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>
|
||||
<InlineSnippet code="{prop[0]}" />
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].type.split(' | ') as type, i (type)}
|
||||
<div
|
||||
class="cell"
|
||||
style="z-index: {prop[1].type.split(' | ').length - i}"
|
||||
>
|
||||
{#if type.startsWith('typeof')}
|
||||
<TooltipDefinition
|
||||
direction="top"
|
||||
align="start"
|
||||
tooltipText="{`From "carbon-icons-svelte"`}"
|
||||
>
|
||||
Carbon Svelte icon
|
||||
</TooltipDefinition>
|
||||
{:else if type.startsWith('HTML')}
|
||||
<Link
|
||||
href="{mdn_api}{type}"
|
||||
target="_blank"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
{type}
|
||||
<Launch16 />
|
||||
</Link>
|
||||
{:else if type in typeMap}
|
||||
<code>{typeMap[type]}</code>
|
||||
{:else if type.startsWith('(')}
|
||||
<code>{type}</code>
|
||||
{:else}
|
||||
<InlineSnippet code="{type}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
<code>{prop[1].value}</code>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].description.split('\n') as line}
|
||||
<div class="description">{line}.</div>
|
||||
{/each}
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
</div>
|
||||
{:else}No props.{/if}
|
||||
<h3 id="slots">Slots</h3>
|
||||
{#if component.slots.length > 0}
|
||||
<UnorderedList class="my-layout-01-03">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
import { theme } from "../store";
|
||||
|
||||
export let component = $page.title;
|
||||
export let source = "";
|
||||
|
||||
metatags.title = $page.title;
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
/**
|
||||
* Specify the row ids to be expanded
|
||||
* @type {boolean} [expandedRowIds=[]]
|
||||
* @type {string[]} [expandedRowIds=[]]
|
||||
*/
|
||||
export let expandedRowIds = [];
|
||||
|
||||
|
|
|
|||
20
types/index.d.ts
vendored
20
types/index.d.ts
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue