mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): set table-layout: fixed if using custom widths

Browse source
This commit is contained in:
Eric Liu 2022-04-23 12:37:29 -07:00
commit 49ce466d07
7 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

19
COMPONENT_INDEX.md
View file

@ -927,8 +927,8 @@ export interface DataTableEmptyHeader {
display?: (item: Value) => DataTableValue; display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
minWidth?: string;
width?: string; width?: string;
minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader {
@ -937,8 +937,8 @@ export interface DataTableNonEmptyHeader {
display?: (item: Value) => DataTableValue; display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
minWidth?: string;
width?: string; width?: string;
minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
@ -3752,13 +3752,14 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | | :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ---------------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table | | size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles | | zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width | | useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant | | sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header | | stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| tableStyle | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
### Slots ### Slots

18
docs/src/COMPONENT_API.json
View file

@ -2495,14 +2495,14 @@
"ts": "type DataTableValue = any" "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", "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", "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", "type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -10863,6 +10863,16 @@
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],

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

@ -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. 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.
<FileSource src="/framed/DataTable/DataTableHeaderWidth" /> <FileSource src="/framed/DataTable/DataTableHeaderWidth" />
### Sticky header ### Sticky header

9
src/DataTable/DataTable.svelte
View file

@ -2,8 +2,8 @@
/** /**
* @typedef {string} DataTableKey * @typedef {string} DataTableKey
* @typedef {any} DataTableValue * @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; 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; minWidth?: string; width?: string; }} DataTableNonEmptyHeader * @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 {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId * @typedef {any} DataTableRowId
@ -241,6 +241,10 @@
$: displayedRows = getDisplayedRows($tableRows, page, pageSize); $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize); $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
$: hasCustomHeaderWidth = headers.some(
(header) => header.width || header.minWidth
);
/** @type {(header: DataTableHeader) => undefined | string} */ /** @type {(header: DataTableHeader) => undefined | string} */
const formatHeaderWidth = (header) => { const formatHeaderWidth = (header) => {
const styles = [ const styles = [
@ -274,6 +278,7 @@
stickyHeader="{stickyHeader}" stickyHeader="{stickyHeader}"
sortable="{sortable}" sortable="{sortable}"
useStaticWidth="{useStaticWidth}" useStaticWidth="{useStaticWidth}"
tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
> >
<TableHead> <TableHead>
<TableRow> <TableRow>

8
src/DataTable/Table.svelte
View file

@ -16,6 +16,12 @@
/** Set to `true` to enable a sticky header */ /** Set to `true` to enable a sticky header */
export let stickyHeader = false; export let stickyHeader = false;
/**
* Set the style attribute on the `table` element
* @type {string}
*/
export let tableStyle = undefined;
</script> </script>
{#if stickyHeader} {#if stickyHeader}
@ -30,6 +36,7 @@
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}"
style="{tableStyle}"
> >
<slot /> <slot />
</table> </table>
@ -46,6 +53,7 @@
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}"
{...$$restProps} {...$$restProps}
style="{tableStyle}"
> >
<slot /> <slot />
</table> </table>

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

@ -11,8 +11,8 @@ export interface DataTableEmptyHeader {
display?: (item: Value) => DataTableValue; display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
minWidth?: string;
width?: string; width?: string;
minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader {
@ -21,8 +21,8 @@ export interface DataTableNonEmptyHeader {
display?: (item: Value) => DataTableValue; display?: (item: Value) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean; columnMenu?: boolean;
minWidth?: string;
width?: string; width?: string;
minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;

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

@ -32,6 +32,12 @@ export interface TableProps
* @default false * @default false
*/ */
stickyHeader?: boolean; stickyHeader?: boolean;
/**
* Set the style attribute on the `table` element
* @default undefined
*/
tableStyle?: string;
} }
export default class Table extends SvelteComponentTyped< export default class Table extends SvelteComponentTyped<