mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
feat(data-table): add nonExpandableRowIds prop #861
This commit is contained in:
Eric Liu
parent
f64b021a94
commit
cab576c335
4 changed files with 64 additions and 38 deletions
|
|
@ -976,24 +976,25 @@ export interface DataTableCell {
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||||
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
|
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
|
||||||
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
||||||
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
|
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||||
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
||||||
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||||
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
|
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
|
||||||
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | -- | Set the size of the data table |
|
| size | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | -- | Set the size of the data table |
|
||||||
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||||
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||||
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||||
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||||
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||||
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
| nonExpandableRowIds | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||||
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||||
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||||
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||||
|
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2287,6 +2287,17 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": true
|
"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",
|
"name": "radio",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
|
|
|
||||||
|
|
@ -70,6 +70,12 @@
|
||||||
*/
|
*/
|
||||||
export let expandedRowIds = [];
|
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 */
|
/** Set to `true` for the radio selection variant */
|
||||||
export let radio = false;
|
export let radio = false;
|
||||||
|
|
||||||
|
|
@ -343,27 +349,29 @@
|
||||||
? 'collapsed'
|
? 'collapsed'
|
||||||
: undefined}"
|
: undefined}"
|
||||||
>
|
>
|
||||||
<button
|
{#if !nonExpandableRowIds.includes(row.id)}
|
||||||
type="button"
|
<button
|
||||||
class:bx--table-expand__button="{true}"
|
type="button"
|
||||||
aria-label="{expandedRows[row.id]
|
class:bx--table-expand__button="{true}"
|
||||||
? 'Collapse current row'
|
aria-label="{expandedRows[row.id]
|
||||||
: 'Expand current row'}"
|
? 'Collapse current row'
|
||||||
on:click="{() => {
|
: 'Expand current row'}"
|
||||||
const rowExpanded = !!expandedRows[row.id];
|
on:click="{() => {
|
||||||
|
const rowExpanded = !!expandedRows[row.id];
|
||||||
|
|
||||||
expandedRowIds = rowExpanded
|
expandedRowIds = rowExpanded
|
||||||
? expandedRowIds.filter((id) => id !== row.id)
|
? expandedRowIds.filter((id) => id !== row.id)
|
||||||
: [...expandedRowIds, row.id];
|
: [...expandedRowIds, row.id];
|
||||||
|
|
||||||
dispatch('click:row--expand', {
|
dispatch('click:row--expand', {
|
||||||
row,
|
row,
|
||||||
expanded: !rowExpanded,
|
expanded: !rowExpanded,
|
||||||
});
|
});
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
<ChevronRight16 class="bx--table-expand__svg" />
|
<ChevronRight16 class="bx--table-expand__svg" />
|
||||||
</button>
|
</button>
|
||||||
|
{/if}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
{/if}
|
{/if}
|
||||||
{#if selectable}
|
{#if selectable}
|
||||||
|
|
@ -418,7 +426,7 @@
|
||||||
{/each}
|
{/each}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
|
|
||||||
{#if expandable && expandedRows[row.id]}
|
{#if expandable && expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
|
||||||
<tr
|
<tr
|
||||||
data-child-row
|
data-child-row
|
||||||
class:bx--expandable-row="{true}"
|
class:bx--expandable-row="{true}"
|
||||||
|
|
|
||||||
6
types/DataTable/DataTable.svelte.d.ts
vendored
6
types/DataTable/DataTable.svelte.d.ts
vendored
|
|
@ -99,6 +99,12 @@ export interface DataTableProps
|
||||||
*/
|
*/
|
||||||
expandedRowIds?: DataTableRowId[];
|
expandedRowIds?: DataTableRowId[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify the ids for rows that should not be expandable
|
||||||
|
* @default []
|
||||||
|
*/
|
||||||
|
nonExpandableRowIds?: DataTableRowId[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set to `true` for the radio selection variant
|
* Set to `true` for the radio selection variant
|
||||||
* @default false
|
* @default false
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue