From 49ce466d07bb3b5bdedd5070786ac4bb1da04cc3 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 23 Apr 2022 12:37:29 -0700 Subject: [PATCH] feat(data-table): set `table-layout: fixed` if using custom widths --- COMPONENT_INDEX.md | 19 ++++++++++--------- docs/src/COMPONENT_API.json | 18 ++++++++++++++---- docs/src/pages/components/DataTable.svx | 2 ++ src/DataTable/DataTable.svelte | 9 +++++++-- src/DataTable/Table.svelte | 8 ++++++++ types/DataTable/DataTable.svelte.d.ts | 4 ++-- types/DataTable/Table.svelte.d.ts | 6 ++++++ 7 files changed, 49 insertions(+), 17 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e88010f4..76b7783e 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -927,8 +927,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; - minWidth?: string; width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -937,8 +937,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; - minWidth?: string; width?: string; + minWidth?: string; } export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; @@ -3752,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 01ff059c..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; minWidth?: string; width?: string; }", + "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; minWidth?: string; width?: string; }" + "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; minWidth?: string; width?: string; }", + "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; minWidth?: string; width?: string; }" + "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 d457ebb8..f3a933e4 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -332,6 +332,8 @@ title="Load balancers" description="Your organization's active load balancers." 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 diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index ced2ac5c..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; minWidth?: string; width?: string; }} DataTableEmptyHeader - * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; minWidth?: string; width?: string; }} 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 @@ -241,6 +241,10 @@ $: 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 = [ @@ -274,6 +278,7 @@ stickyHeader="{stickyHeader}" sortable="{sortable}" useStaticWidth="{useStaticWidth}" + tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}" > diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte index 058855db..f1d5c81e 100644 --- a/src/DataTable/Table.svelte +++ b/src/DataTable/Table.svelte @@ -16,6 +16,12 @@ /** Set to `true` to enable a sticky header */ export let stickyHeader = false; + + /** + * Set the style attribute on the `table` element + * @type {string} + */ + export let tableStyle = undefined; {#if stickyHeader} @@ -30,6 +36,7 @@ class:bx--data-table--zebra="{zebra}" class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--sticky-header="{stickyHeader}" + style="{tableStyle}" > @@ -46,6 +53,7 @@ class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--sticky-header="{stickyHeader}" {...$$restProps} + style="{tableStyle}" > diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts index d92eff5d..2697a314 100644 --- a/types/DataTable/DataTable.svelte.d.ts +++ b/types/DataTable/DataTable.svelte.d.ts @@ -11,8 +11,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; - minWidth?: string; width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -21,8 +21,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; - minWidth?: string; 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<