From 29936d65d383710104fb88f0ef75576570abb1c2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 23 Apr 2022 12:00:34 -0700
Subject: [PATCH] feat(data-table): allow header column width, minWidth values

---
 src/DataTable/DataTable.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 5de05bf8..ced2ac5c 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; }} 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 });