mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): add nonExpandableRowIds prop (#862)

Browse source 
* feat(data-table): add nonExpandableRowIds prop #861

* test(data-table): validate nonExpandableRowIds prop

* docs(data-table): add Non-expandable rows example
This commit is contained in:
Eric Liu 2021-10-19 07:25:22 -07:00 • committed by GitHub
commit 96d848e9ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 144 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/DataTable/DataTable.svelte
View file

@ -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}"