mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23: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
|
||||
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class:bx--table-expand__button="{true}"
|
||||
aria-label="{expandedRows[row.id]
|
||||
? 'Collapse current row'
|
||||
: 'Expand current row'}"
|
||||
on:click="{() => {
|
||||
const rowExpanded = !!expandedRows[row.id];
|
||||
{#if !nonExpandableRowIds.includes(row.id)}
|
||||
<button
|
||||
type="button"
|
||||
class:bx--table-expand__button="{true}"
|
||||
aria-label="{expandedRows[row.id]
|
||||
? 'Collapse current row'
|
||||
: 'Expand current row'}"
|
||||
on:click="{() => {
|
||||
const rowExpanded = !!expandedRows[row.id];
|
||||
|
||||
expandedRowIds = rowExpanded
|
||||
? expandedRowIds.filter((id) => id !== row.id)
|
||||
: [...expandedRowIds, row.id];
|
||||
expandedRowIds = rowExpanded
|
||||
? expandedRowIds.filter((id) => id !== row.id)
|
||||
: [...expandedRowIds, row.id];
|
||||
|
||||
dispatch('click:row--expand', {
|
||||
row,
|
||||
expanded: !rowExpanded,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16 class="bx--table-expand__svg" />
|
||||
</button>
|
||||
dispatch('click:row--expand', {
|
||||
row,
|
||||
expanded: !rowExpanded,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<ChevronRight16 class="bx--table-expand__svg" />
|
||||
</button>
|
||||
{/if}
|
||||
</TableCell>
|
||||
{/if}
|
||||
{#if selectable}
|
||||
|
|
@ -418,7 +426,7 @@
|
|||
{/each}
|
||||
</TableRow>
|
||||
|
||||
{#if expandable && expandedRows[row.id]}
|
||||
{#if expandable && expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
|
||||
<tr
|
||||
data-child-row
|
||||
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[];
|
||||
|
||||
/**
|
||||
* Specify the ids for rows that should not be expandable
|
||||
* @default []
|
||||
*/
|
||||
nonExpandableRowIds?: DataTableRowId[];
|
||||
|
||||
/**
|
||||
* Set to `true` for the radio selection variant
|
||||
* @default false
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue