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

Merge 2921502122 into b6df277647

Browse source
This commit is contained in:
Nicolas Peugnet 2024-08-12 15:28:55 +00:00 • committed by GitHub
commit a14bf85522
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 176 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

82
COMPONENT_INDEX.md
View file

@ -1000,30 +1000,30 @@ export interface DataTableCell {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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` | | 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 | | 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` | | 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" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction | | sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "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 | | 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 | | 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 | | 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" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
### Slots ### Slots
@ -1055,15 +1055,15 @@ export interface DataTableCell {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "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 | | 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 | | 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 &#124; Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array | | headers | No | <code>let</code> | No | <code>ReadonlyArray<string &#124; 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 | | showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
### Slots ### Slots
@ -3892,14 +3892,14 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- | | :------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table | | size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "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 | | 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 | | 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 | | 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 | | 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 | | tableStyle | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
### Slots ### Slots

9
docs/src/COMPONENT_API.json
View file

@ -2451,7 +2451,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the data table", "description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -2844,7 +2845,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the data table", "description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12069,7 +12071,8 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the table", "description": "Set the size of the table",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

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

@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
## With toolbar (small size) ## With toolbar (small size)
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers." <DataTable size="sm" title="Load balancers" description="Your organization's active load balancers."
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -570,9 +570,64 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}" ]}"
/> />
## Tall rows ## Extra large rows
<DataTable size="tall" <DataTable size="xl"
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"
},
]}"
/>
## Large rows (default)
<DataTable size="lg"
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -627,7 +682,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
## Medium rows ## Medium rows
<DataTable size="medium" <DataTable size="md"
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -680,9 +735,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}" ]}"
/> />
## Short rows ## Small rows
<DataTable size="short" <DataTable size="sm"
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -735,9 +790,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}" ]}"
/> />
## Compact rows ## Extra small rows
<DataTable size="compact" <DataTable size="xs"
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -1138,9 +1193,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
<FileSource src="/framed/DataTable/DataTableExpandableZebra" /> <FileSource src="/framed/DataTable/DataTableExpandableZebra" />
## Expandable (compact size) ## Expandable (extra small size)
<DataTable size="compact" expandable <DataTable size="xs" expandable
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -1197,9 +1252,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
</svelte:fragment> </svelte:fragment>
</DataTable> </DataTable>
## Expandable (short size) ## Expandable (small size)
<DataTable size="short" expandable <DataTable size="sm" expandable
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -1256,9 +1311,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
</svelte:fragment> </svelte:fragment>
</DataTable> </DataTable>
## Expandable (tall size) ## Expandable (extra tall size)
<DataTable size="tall" expandable <DataTable size="xl" expandable
headers="{[ headers="{[
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" }, { key: "protocol", value: "Protocol" },
@ -1406,14 +1461,22 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
<DataTableSkeleton showHeader={false} showToolbar={false} /> <DataTableSkeleton showHeader={false} showToolbar={false} />
## Skeleton (tall size) ## Skeleton (extra large size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" /> <DataTableSkeleton showHeader={false} showToolbar={false} size="xl" />
## Skeleton (short size) ## Skeleton (large size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="short" /> <DataTableSkeleton showHeader={false} showToolbar={false} size="lg" />
## Skeleton (compact size) ## Skeleton (medium size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" /> <DataTableSkeleton showHeader={false} showToolbar={false} size="md" />
## Skeleton (small size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="sm" />
## Skeleton (extra small size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="xs" />

4
docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
View file

@ -9,7 +9,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
{ key: "overflow", empty: true }, { key: "overflow", empty: true, columnMenu: true },
]; ];
const rows = [ const rows = [
@ -25,7 +25,7 @@
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable headers="{headers}" rows="{rows}">
<svelte:fragment slot="cell" let:cell> <svelte:fragment slot="cell" let:cell>
{#if cell.key === "overflow"} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu size="sm" flipped>
<OverflowMenuItem text="Restart" /> <OverflowMenuItem text="Restart" />
<OverflowMenuItem <OverflowMenuItem
href="https://cloud.ibm.com/docs/loadbalancer-service" href="https://cloud.ibm.com/docs/loadbalancer-service"

6
src/DataTable/DataTable.svelte
View file

@ -39,9 +39,9 @@
/** /**
* Set the size of the data table * Set the size of the data table
* @type {"compact" | "short" | "medium" | "tall"} * @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/ */
export let size = undefined; export let size = "lg";
/** Specify the title of the data table */ /** Specify the title of the data table */
export let title = ""; export let title = "";
@ -307,7 +307,7 @@
</th> </th>
{/if} {/if}
{#if selectable && !batchSelection} {#if selectable && !batchSelection}
<th scope="col"></th> <th scope="col" class:bx--table-column-checkbox="{true}"></th>
{/if} {/if}
{#if batchSelection && !radio} {#if batchSelection && !radio}
<th scope="col" class:bx--table-column-checkbox="{true}"> <th scope="col" class:bx--table-column-checkbox="{true}">

12
src/DataTable/DataTableSkeleton.svelte
View file

@ -12,9 +12,9 @@
/** /**
* Set the size of the data table * Set the size of the data table
* @type {"compact" | "short" | "tall"} * @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/ */
export let size = undefined; export let size = "lg";
/** Set to `true` to apply zebra styles to the datatable rows */ /** Set to `true` to apply zebra styles to the datatable rows */
export let zebra = false; export let zebra = false;
@ -68,9 +68,11 @@
<table <table
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--data-table="{true}" class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--short="{size === 'short'}" class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--tall="{size === 'tall'}" class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
on:click on:click
on:mouseover on:mouseover

24
src/DataTable/Table.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
/** /**
* Set the size of the table * Set the size of the table
* @type {"compact" | "short" | "medium" | "tall"} * @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/ */
export let size = undefined; export let size = "lg";
/** Set to `true` to use zebra styles */ /** Set to `true` to use zebra styles */
export let zebra = false; export let zebra = false;
@ -28,14 +28,16 @@
<section class:bx--data-table_inner-container="{true}" {...$$restProps}> <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
<table <table
class:bx--data-table="{true}" class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--short="{size === 'short'}" class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--tall="{size === 'tall'}" class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--md="{size === 'medium'}" class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
style="{tableStyle}" style="{tableStyle}"
> >
<slot /> <slot />
@ -44,14 +46,16 @@
{:else} {:else}
<table <table
class:bx--data-table="{true}" class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}" class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--short="{size === 'short'}" class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--tall="{size === 'tall'}" class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--md="{size === 'medium'}" class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--sort="{sortable}" class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
{...$$restProps} {...$$restProps}
style="{tableStyle}" style="{tableStyle}"
> >

3
src/DataTable/Toolbar.svelte
View file

@ -25,8 +25,7 @@
bind:this="{ref}" bind:this="{ref}"
aria-label="data table toolbar" aria-label="data table toolbar"
class:bx--table-toolbar="{true}" class:bx--table-toolbar="{true}"
class:bx--table-toolbar--small="{size === 'sm'}" class:bx--table-toolbar--sm="{size === 'sm'}"
class:bx--table-toolbar--normal="{size === 'default'}"
style:z-index="{1}" style:z-index="{1}"
{...$$restProps} {...$$restProps}
> >

2
src/DataTable/ToolbarMenu.svelte
View file

@ -17,7 +17,7 @@
bind:menuRef bind:menuRef
icon="{Settings}" icon="{Settings}"
{...$$restProps} {...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}" class="bx--toolbar-action bx--overflow-menu bx--btn bx--btn--primary {$$restProps.class}"
flipped flipped
> >
<slot /> <slot />

1
src/DataTable/ToolbarSearch.svelte
View file

@ -99,6 +99,7 @@
disabled="{disabled}" disabled="{disabled}"
{...$$restProps} {...$$restProps}
searchClass="{classes} {$$restProps.class}" searchClass="{classes} {$$restProps.class}"
size="lg"
bind:ref bind:ref
bind:value bind:value
on:clear on:clear

18
tests/DataTable.test.svelte
View file

@ -137,7 +137,7 @@
</DataTable> </DataTable>
<DataTable <DataTable
size="short" size="sm"
title="Load balancers" title="Load balancers"
description="Your organization's active load balancers." description="Your organization's active load balancers."
headers="{headers}" headers="{headers}"
@ -160,11 +160,13 @@
<DataTable zebra headers="{headers}" rows="{rows}" /> <DataTable zebra headers="{headers}" rows="{rows}" />
<DataTable size="tall" headers="{headers}" rows="{rows}" /> <DataTable size="xl" headers="{headers}" rows="{rows}" />
<DataTable size="short" headers="{headers}" rows="{rows}" /> <DataTable size="md" headers="{headers}" rows="{rows}" />
<DataTable size="compact" headers="{headers}" rows="{rows}" /> <DataTable size="sm" headers="{headers}" rows="{rows}" />
<DataTable size="xs" headers="{headers}" rows="{rows}" />
<DataTable sortable headers="{headers}" rows="{rows}" /> <DataTable sortable headers="{headers}" rows="{rows}" />
@ -279,8 +281,10 @@
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xl" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="md" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" /> <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="sm" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xs" />

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

@ -58,9 +58,9 @@ export interface DataTableProps extends RestProps {
/** /**
* Set the size of the data table * Set the size of the data table
* @default undefined * @default "lg"
*/ */
size?: "compact" | "short" | "medium" | "tall"; size?: "xs" | "sm" | "md" | "lg" | "xl";
/** /**
* Specify the title of the data table * Specify the title of the data table

4
types/DataTable/DataTableSkeleton.svelte.d.ts vendored
View file

@ -21,9 +21,9 @@ export interface DataTableSkeletonProps extends DataTableHeader, RestProps {
/** /**
* Set the size of the data table * Set the size of the data table
* @default undefined * @default "lg"
*/ */
size?: "compact" | "short" | "tall"; size?: "xs" | "sm" | "md" | "lg" | "xl";
/** /**
* Set to `true` to apply zebra styles to the datatable rows * Set to `true` to apply zebra styles to the datatable rows

4
types/DataTable/Table.svelte.d.ts vendored
View file

@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["section"];
export interface TableProps extends RestProps { export interface TableProps extends RestProps {
/** /**
* Set the size of the table * Set the size of the table
* @default undefined * @default "lg"
*/ */
size?: "compact" | "short" | "medium" | "tall"; size?: "xs" | "sm" | "md" | "lg" | "xl";
/** /**
* Set to `true` to use zebra styles * Set to `true` to use zebra styles