mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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

37
COMPONENT_INDEX.md
View file

@ -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" &#124; "short" &#124; "medium" &#124; "tall"</code> | -- | Set the size of the data table | | size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "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

11
docs/src/COMPONENT_API.json
View file

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

6
docs/src/pages/components/DataTable.svx
View file

@ -1025,6 +1025,12 @@ In the following example, each row in the sortable data table has an overflow me
</div> </div>
</DataTable> </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) ### Expandable (compact size)
<DataTable size="compact" expandable <DataTable size="compact" expandable

68
docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte Normal file
View file

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

48
src/DataTable/DataTable.svelte
View file

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

7
tests/DataTable.test.svelte
View file

@ -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> <div slot="expanded-row" let:row>
<pre> <pre>
{JSON.stringify(row, null, 2)} {JSON.stringify(row, null, 2)}

6
types/DataTable/DataTable.svelte.d.ts vendored
View file

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