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} @@ -46,6 +53,7 @@ class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--sticky-header="{stickyHeader}" {...$$restProps} + style="{tableStyle}" > diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte index 4f6832f4..301efcf3 100644 --- a/tests/DataTable.test.svelte +++ b/tests/DataTable.test.svelte @@ -15,7 +15,7 @@ const headers: DataTableHeader[] = [ { key: "name", value: "Name" }, - { key: "protocol", value: "Protocol" }, + { key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" }, { key: "port", value: "Port" }, { key: "rule", value: "Rule", sort: false }, ]; diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts index c56c8a21..2697a314 100644 --- a/types/DataTable/DataTable.svelte.d.ts +++ b/types/DataTable/DataTable.svelte.d.ts @@ -11,6 +11,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 { @@ -19,6 +21,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; diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts index 7a896276..a8a7943c 100644 --- a/types/DataTable/Table.svelte.d.ts +++ b/types/DataTable/Table.svelte.d.ts @@ -32,6 +32,12 @@ export interface TableProps * @default false */ stickyHeader?: boolean; + + /** + * Set the style attribute on the `table` element + * @default undefined + */ + tableStyle?: string; } export default class Table extends SvelteComponentTyped<