mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(data-table): add nonExpandableRowIds prop (#862)
* 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
GitHub
parent
f64b021a94
commit
96d848e9ef
7 changed files with 144 additions and 39 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",
|
||||
|
|
|
|||
|
|
@ -1025,6 +1025,12 @@ In the following example, each row in the sortable data table has an overflow me
|
|||
</div>
|
||||
</DataTable>
|
||||
|
||||
### Non-expandable rows
|
||||
|
||||
Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable.
|
||||
|
||||
<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
|
||||
|
||||
### Expandable (compact size)
|
||||
|
||||
<DataTable size="compact" expandable
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<script>
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
|
||||
const rows = [
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<DataTable
|
||||
expandable
|
||||
nonExpandableRowIds="{rows
|
||||
.filter((row) => row.port < 3000)
|
||||
.map((row) => row.id)}"
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{rows}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</DataTable>
|
||||
|
|
@ -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}"
|
||||
|
|
|
|||
|
|
@ -222,7 +222,12 @@
|
|||
]}"
|
||||
/>
|
||||
|
||||
<DataTable expandable headers="{headers}" rows="{rows}">
|
||||
<DataTable
|
||||
expandable
|
||||
nonExpandableRowIds="{['a', 'b']}"
|
||||
headers="{headers}"
|
||||
rows="{rows}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
|
|
|
|||
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