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

* 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

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; 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 });

src/DataTable/Table.svelte

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