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

feat(data-table): allow custom column widths (#1265)

Browse source 
* feat(data-table): allow header column `width`, `minWidth` values

* Run "yarn build:docs"

* test(data-table): assert width, minWidth properties

* docs(data-table): add "Custom column widths" example
This commit is contained in:
metonym 2022-05-14 09:24:24 -07:00 • committed by GitHub
commit c6f210899b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 90 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

20
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; }} 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(";");
};
</script>
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
@ -264,6 +278,7 @@
stickyHeader="{stickyHeader}"
sortable="{sortable}"
useStaticWidth="{useStaticWidth}"
tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
>
<TableHead>
<TableRow>
@ -322,6 +337,7 @@
{:else}
<TableHeader
id="{header.key}"
style="{formatHeaderWidth(header)}"
disableSorting="{header.sort === false}"
on:click="{() => {
dispatch('click', { header });