diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 75a34e13..1a3a1648 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1000,30 +1000,30 @@ export interface DataTableCell {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| selectedRowIds | No | let
| Yes | ReadonlyArray
| []
| Specify the row ids to be selected |
-| selectable | No | let
| Yes | boolean
| false
| Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` |
-| expandedRowIds | No | let
| Yes | ReadonlyArray
| []
| Specify the row ids to be expanded |
-| expandable | No | let
| Yes | boolean
| false
| Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` |
-| sortDirection | No | let
| Yes | "none" | "ascending" | "descending"
| "none"
| Specify the sort direction |
-| sortKey | No | let
| Yes | DataTableKey
| null
| Specify the header key to sort by |
-| headers | No | let
| No | ReadonlyArray
| []
| Specify the data table headers |
-| rows | No | let
| No | ReadonlyArray
| []
| Specify the rows the data table should render
keys defined in `headers` are used for the row ids |
-| size | No | let
| No | "compact" | "short" | "medium" | "tall"
| undefined
| Set the size of the data table |
-| title | No | let
| No | string
| ""
| Specify the title of the data table |
-| description | No | let
| No | string
| ""
| Specify the description of the data table |
-| zebra | No | let
| No | boolean
| false
| Set to `true` to use zebra styles |
-| sortable | No | let
| No | boolean
| false
| Set to `true` for the sortable variant |
-| batchExpansion | No | let
| No | boolean
| false
| Set to `true` to enable batch expansion |
-| nonExpandableRowIds | No | let
| No | ReadonlyArray
| []
| Specify the ids for rows that should not be expandable |
-| radio | No | let
| No | boolean
| false
| Set to `true` for the radio selection variant |
-| batchSelection | No | let
| No | boolean
| false
| Set to `true` to enable batch selection |
-| nonSelectableRowIds | No | let
| No | ReadonlyArray
| []
| Specify the ids of rows that should not be selectable |
-| stickyHeader | No | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
-| useStaticWidth | No | let
| No | boolean
| false
| Set to `true` to use static width |
-| pageSize | No | let
| No | number
| 0
| Specify the number of items to display in a page |
-| page | No | let
| No | number
| 0
| Set to `number` to set current page |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| selectedRowIds | No | let
| Yes | ReadonlyArray
| []
| Specify the row ids to be selected |
+| selectable | No | let
| Yes | boolean
| false
| Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` |
+| expandedRowIds | No | let
| Yes | ReadonlyArray
| []
| Specify the row ids to be expanded |
+| expandable | No | let
| Yes | boolean
| false
| Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` |
+| sortDirection | No | let
| Yes | "none" | "ascending" | "descending"
| "none"
| Specify the sort direction |
+| sortKey | No | let
| Yes | DataTableKey
| null
| Specify the header key to sort by |
+| headers | No | let
| No | ReadonlyArray
| []
| Specify the data table headers |
+| rows | No | let
| No | ReadonlyArray
| []
| Specify the rows the data table should render
keys defined in `headers` are used for the row ids |
+| size | No | let
| No | "xs" | "sm" | "md" | "lg" | "xl"
| "lg"
| Set the size of the data table |
+| title | No | let
| No | string
| ""
| Specify the title of the data table |
+| description | No | let
| No | string
| ""
| Specify the description of the data table |
+| zebra | No | let
| No | boolean
| false
| Set to `true` to use zebra styles |
+| sortable | No | let
| No | boolean
| false
| Set to `true` for the sortable variant |
+| batchExpansion | No | let
| No | boolean
| false
| Set to `true` to enable batch expansion |
+| nonExpandableRowIds | No | let
| No | ReadonlyArray
| []
| Specify the ids for rows that should not be expandable |
+| radio | No | let
| No | boolean
| false
| Set to `true` for the radio selection variant |
+| batchSelection | No | let
| No | boolean
| false
| Set to `true` to enable batch selection |
+| nonSelectableRowIds | No | let
| No | ReadonlyArray
| []
| Specify the ids of rows that should not be selectable |
+| stickyHeader | No | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
+| useStaticWidth | No | let
| No | boolean
| false
| Set to `true` to use static width |
+| pageSize | No | let
| No | number
| 0
| Specify the number of items to display in a page |
+| page | No | let
| No | number
| 0
| 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 | let
| No | number
| 5
| Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array |
-| rows | No | let
| No | number
| 5
| Specify the number of rows |
-| size | No | let
| No | "compact" | "short" | "tall"
| undefined
| Set the size of the data table |
-| zebra | No | let
| No | boolean
| false
| Set to `true` to apply zebra styles to the datatable rows |
-| showHeader | No | let
| No | boolean
| true
| Set to `false` to hide the header |
-| headers | No | let
| No | ReadonlyArray>
| []
| Set the column headers
Supersedes `columns` if value is a non-empty array |
-| showToolbar | No | let
| No | boolean
| true
| Set to `false` to hide the toolbar |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
+| columns | No | let
| No | number
| 5
| Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array |
+| rows | No | let
| No | number
| 5
| Specify the number of rows |
+| size | No | let
| No | "xs" | "sm" | "md" | "lg" | "xl"
| "lg"
| Set the size of the data table |
+| zebra | No | let
| No | boolean
| false
| Set to `true` to apply zebra styles to the datatable rows |
+| showHeader | No | let
| No | boolean
| true
| Set to `false` to hide the header |
+| headers | No | let
| No | ReadonlyArray>
| []
| Set the column headers
Supersedes `columns` if value is a non-empty array |
+| showToolbar | No | let
| No | boolean
| true
| 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 | let
| No | "compact" | "short" | "medium" | "tall"
| undefined
| Set the size of the table |
-| zebra | No | let
| No | boolean
| false
| Set to `true` to use zebra styles |
-| useStaticWidth | No | let
| No | boolean
| false
| Set to `true` to use static width |
-| sortable | No | let
| No | boolean
| false
| Set to `true` for the sortable variant |
-| stickyHeader | No | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
-| tableStyle | No | let
| No | string
| undefined
| Set the style attribute on the `table` element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
+| size | No | let
| No | "xs" | "sm" | "md" | "lg" | "xl"
| "lg"
| Set the size of the table |
+| zebra | No | let
| No | boolean
| false
| Set to `true` to use zebra styles |
+| useStaticWidth | No | let
| No | boolean
| false
| Set to `true` to use static width |
+| sortable | No | let
| No | boolean
| false
| Set to `true` for the sortable variant |
+| stickyHeader | No | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
+| tableStyle | No | let
| No | string
| undefined
| Set the style attribute on the `table` element |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 00e3ef22..1f52202d 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2451,7 +2451,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
- "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
+ "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+ "value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -2844,7 +2845,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
- "type": "\"compact\" | \"short\" | \"tall\"",
+ "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+ "value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -12069,7 +12071,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the table",
- "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
+ "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+ "value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 29ef9c68..043ad4e9 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
## With toolbar (small size)
-
-## Tall rows
+## Extra large rows
-
+
+## Large rows (default)
+
+
-## Short rows
+## Small rows
-
-## Compact rows
+## Extra small rows
-
-## Expandable (compact size)
+## Expandable (extra small size)
-
-## Expandable (short size)
+## Expandable (small size)
-
-## Expandable (tall size)
+## Expandable (extra tall size)
-
-## Skeleton (tall size)
+## Skeleton (extra large size)
-
+
-## Skeleton (short size)
+## Skeleton (large size)
-
+
-## Skeleton (compact size)
+## Skeleton (medium size)
-
+
+
+## Skeleton (small size)
+
+
+
+## Skeleton (extra small size)
+
+
diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
index dffa197f..d20ecc30 100644
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -9,7 +9,7 @@
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
- { key: "overflow", empty: true },
+ { key: "overflow", empty: true, columnMenu: true },
];
const rows = [
@@ -25,7 +25,7 @@
{#if cell.key === "overflow"}
-
+
{/if}
{#if selectable && !batchSelection}
- |
+ |
{/if}
{#if batchSelection && !radio}
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index 9d759518..5930a945 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -12,9 +12,9 @@
/**
* 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 */
export let zebra = false;
@@ -68,9 +68,11 @@
/**
* 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 */
export let zebra = false;
@@ -28,14 +28,16 @@
@@ -44,14 +46,16 @@
{:else}
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
index 99b1f2cf..c630a424 100644
--- a/src/DataTable/Toolbar.svelte
+++ b/src/DataTable/Toolbar.svelte
@@ -25,8 +25,7 @@
bind:this="{ref}"
aria-label="data table toolbar"
class:bx--table-toolbar="{true}"
- class:bx--table-toolbar--small="{size === 'sm'}"
- class:bx--table-toolbar--normal="{size === 'default'}"
+ class:bx--table-toolbar--sm="{size === 'sm'}"
style:z-index="{1}"
{...$$restProps}
>
diff --git a/src/DataTable/ToolbarMenu.svelte b/src/DataTable/ToolbarMenu.svelte
index a769498c..1e198287 100644
--- a/src/DataTable/ToolbarMenu.svelte
+++ b/src/DataTable/ToolbarMenu.svelte
@@ -17,7 +17,7 @@
bind:menuRef
icon="{Settings}"
{...$$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
>
diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
index 94a88969..bc3dcac6 100644
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -99,6 +99,7 @@
disabled="{disabled}"
{...$$restProps}
searchClass="{classes} {$$restProps.class}"
+ size="lg"
bind:ref
bind:value
on:clear
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 45f6a07c..6799fb64 100644
--- a/tests/DataTable.test.svelte
+++ b/tests/DataTable.test.svelte
@@ -137,7 +137,7 @@
-
+
-
+
-
+
+
+
@@ -279,8 +281,10 @@
-
+
-
+
-
+
+
+
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index e0dcf172..1e6a67a3 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -58,9 +58,9 @@ export interface DataTableProps extends RestProps {
/**
* 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
diff --git a/types/DataTable/DataTableSkeleton.svelte.d.ts b/types/DataTable/DataTableSkeleton.svelte.d.ts
index 4d7d507b..b77061b3 100644
--- a/types/DataTable/DataTableSkeleton.svelte.d.ts
+++ b/types/DataTable/DataTableSkeleton.svelte.d.ts
@@ -21,9 +21,9 @@ export interface DataTableSkeletonProps extends DataTableHeader, RestProps {
/**
* 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
diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts
index 7312318f..e355ba4e 100644
--- a/types/DataTable/Table.svelte.d.ts
+++ b/types/DataTable/Table.svelte.d.ts
@@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["section"];
export interface TableProps extends RestProps {
/**
* 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
|