mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
feat! DataTable v11 styles
This commit is contained in:
Nicolas Peugnet
parent
b6df277647
commit
e02eb80e53
13 changed files with 171 additions and 97 deletions
|
|
@ -1000,30 +1000,30 @@ export interface DataTableCell {
|
|||
|
||||
### 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</code> | <code>null</code> | Specify the header key to sort by |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
|
||||
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></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</code> | <code>null</code> | Specify the header key to sort by |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
|
||||
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></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>"xs" | "sm" | "md" | "lg" | "xl"</code> | <code>"lg"</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 |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1055,15 +1055,15 @@ export interface DataTableCell {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
|
||||
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
|
||||
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
|
||||
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<string | Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
|
||||
| showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
|
||||
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
|
||||
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "md" | "lg" | "xl"</code> | <code>"lg"</code> | Set the size of the data table |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
|
||||
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<string | Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
|
||||
| showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3892,14 +3892,14 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the table |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| tableStyle | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
|
||||
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "md" | "lg" | "xl"</code> | <code>"lg"</code> | Set the size of the table |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| tableStyle | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue