mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23: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;
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 | <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 |
| 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 |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| 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 |
| 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 |
| 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 |
| tableStyle | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the style attribute on the `table` element |
### Slots

18
docs/src/COMPONENT_API.json
View file

@ -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": [],

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.
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" />
### Sticky header

9
src/DataTable/DataTable.svelte
View file

@ -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'}"
>
<TableHead>
<TableRow>

8
src/DataTable/Table.svelte
View file

@ -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;
</script>
{#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}"
>
<slot />
</table>
@ -46,6 +53,7 @@
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps}
style="{tableStyle}"
>
<slot />
</table>

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

@ -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;

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

@ -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<