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

feat(data-table): support medium size

Browse source
This commit is contained in:
Eric Y Liu 2021-06-24 13:52:04 -07:00
commit d9c3adc334
7 changed files with 88 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

50
COMPONENT_INDEX.md
View file

@ -930,23 +930,23 @@ 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" &#124; "short" &#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 |
| 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 |
| 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" &#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 |
| 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 |
### Slots
@ -3687,14 +3687,14 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | -- | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
### Slots

4
docs/src/COMPONENT_API.json
View file

@ -1931,7 +1931,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -9392,7 +9392,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false

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

@ -438,6 +438,61 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Medium rows
<DataTable size="medium"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
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"
},
]}"
/>
### Short rows
<DataTable size="short"

2
src/DataTable/DataTable.svelte
View file

@ -37,7 +37,7 @@
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"}
* @type {"compact" | "short" | "medium" | "tall"}
*/
export let size = undefined;

4
src/DataTable/Table.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the table
* @type {"compact" | "short" | "tall"}
* @type {"compact" | "short" | "medium" | "tall"}
*/
export let size = undefined;
@ -28,6 +28,7 @@
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
@ -43,6 +44,7 @@
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"

2
types/DataTable/DataTable.d.ts vendored
View file

@ -54,7 +54,7 @@ export interface DataTableProps
/**
* Set the size of the data table
*/
size?: "compact" | "short" | "tall";
size?: "compact" | "short" | "medium" | "tall";
/**
* Specify the title of the data table

2
types/DataTable/Table.d.ts vendored
View file

@ -6,7 +6,7 @@ export interface TableProps
/**
* Set the size of the table
*/
size?: "compact" | "short" | "tall";
size?: "compact" | "short" | "medium" | "tall";
/**
* Set to `true` to use zebra styles