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): allow header column width, minWidth values

Browse source
This commit is contained in:
Eric Liu 2022-04-23 12:00:34 -07:00
commit 29936d65d3
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
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; 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 {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId
@ -240,6 +240,16 @@
: rows;
$: displayedRows = getDisplayedRows($tableRows, page, pageSize);
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
/** @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}>
@ -322,6 +332,7 @@
{:else}
<TableHeader
id="{header.key}"
style="{formatHeaderWidth(header)}"
disableSorting="{header.sort === false}"
on:click="{() => {
dispatch('click', { header });