diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f179c375..76b7783e 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -927,6 +927,8 @@ export interface DataTableEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
+ width?: string;
+ minWidth?: string;
}
export interface DataTableNonEmptyHeader {
@@ -935,6 +937,8 @@ export interface DataTableNonEmptyHeader {
display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
+ width?: string;
+ minWidth?: string;
}
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
@@ -3748,13 +3752,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
-| size | let
| No | "compact" | "short" | "medium" | "tall"
| undefined
| Set the size of the table |
-| zebra | let
| No | boolean
| false
| Set to `true` to use zebra styles |
-| useStaticWidth | let
| No | boolean
| false
| Set to `true` to use static width |
-| sortable | let
| No | boolean
| false
| Set to `true` for the sortable variant |
-| stickyHeader | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ---------------------------------------------- |
+| size | let
| No | "compact" | "short" | "medium" | "tall"
| undefined
| Set the size of the table |
+| zebra | let
| No | boolean
| false
| Set to `true` to use zebra styles |
+| useStaticWidth | let
| No | boolean
| false
| Set to `true` to use static width |
+| sortable | let
| No | boolean
| false
| Set to `true` for the sortable variant |
+| stickyHeader | let
| No | boolean
| false
| Set to `true` to enable a sticky header |
+| tableStyle | 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 3884fb56..dceeac19 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2495,14 +2495,14 @@
"ts": "type DataTableValue = any"
},
{
- "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
+ "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableEmptyHeader",
- "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
+ "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
},
{
- "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
+ "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableNonEmptyHeader",
- "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
+ "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }"
},
{
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@@ -10863,6 +10863,16 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "tableStyle",
+ "kind": "let",
+ "description": "Set the style attribute on the `table` element",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 2789d711..f3a933e4 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -328,6 +328,14 @@ title="Load balancers" description="Your organization's active load balancers."
]}"
/>
+### Custom column widths
+
+Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
+
+A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
+
+
+
### Sticky header
Set `stickyHeader` to `true` for the header to be fixed in place.
diff --git a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
new file mode 100644
index 00000000..cf2faaf4
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
@@ -0,0 +1,19 @@
+
+
+
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 5de05bf8..0574f747 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -2,8 +2,8 @@
/**
* @typedef {string} DataTableKey
* @typedef {any} DataTableValue
- * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader
- * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader
+ * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
+ * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId
@@ -240,6 +240,20 @@
: rows;
$: displayedRows = getDisplayedRows($tableRows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
+
+ $: hasCustomHeaderWidth = headers.some(
+ (header) => header.width || header.minWidth
+ );
+
+ /** @type {(header: DataTableHeader) => undefined | string} */
+ const formatHeaderWidth = (header) => {
+ const styles = [
+ header.width && `width: ${header.width}`,
+ header.minWidth && `min-width: ${header.minWidth}`,
+ ].filter(Boolean);
+ if (styles.length === 0) return undefined;
+ return styles.join(";");
+ };
@@ -264,6 +278,7 @@
stickyHeader="{stickyHeader}"
sortable="{sortable}"
useStaticWidth="{useStaticWidth}"
+ tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
>
@@ -322,6 +337,7 @@
{:else}