mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(data-table): allow custom inputName for radio/checkbox (#2087)
Closes #2085
This commit is contained in:
Eric Liu
GitHub
parent
b4ae19e8e7
commit
7481b9a995
6 changed files with 85 additions and 30 deletions
|
|
@ -971,30 +971,31 @@ export interface DataTableCell<Row = DataTableRow> {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
|
||||
| selectable | No | <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 | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||
| expandable | No | <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` |
|
||||
| sortDirection | No | <code>let</code> | Yes | <code>"none" | "ascending" | "descending"</code> | <code>"none"</code> | Specify the sort direction |
|
||||
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
|
||||
| rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
||||
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
|
||||
| selectable | No | <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 | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||
| expandable | No | <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` |
|
||||
| sortDirection | No | <code>let</code> | Yes | <code>"none" | "ascending" | "descending"</code> | <code>"none"</code> | Specify the sort direction |
|
||||
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
|
||||
| rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||
| inputName | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify a name attribute for the input elements<br />in a selectable data table (radio or checkbox).<br />When the table is inside a form, this name will<br />be included in the form data on submit. |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
||||
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue