fix #144 Data table with fixed height, but flexible (auto) column width

Author: vegegoku

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/ColumnConfig.java

@@ -1107,7 +1107,9 @@ private ColumnHeader createColumnElement(TableConfig<T> tableConfig) {
 
     applyScreenMedia(this.headElement.element());
 
-    if (tableConfig.isFixed() || isFixed()) {
+    if (tableConfig.getTableMode() == TableMode.FIXED_HEIGHT
+        || tableConfig.getTableMode() == TableMode.AUTO
+        || isFixed()) {
       fixElementWidth(this, this.headElement.element());
     }
 

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/DataTable.java

@@ -232,19 +232,23 @@ private DataTable<T> init() {
       this.dataStore.load();
     }
 
-    if (tableConfig.isFixed()) {
-      tableElement.setMaxHeight(tableConfig.getFixedBodyHeight());
+    if (tableConfig.getTableMode() == TableMode.AUTO
+        || tableConfig.getTableMode() == TableMode.FIXED_HEIGHT) {
+      if (nonNull(tableConfig.getFixedBodyHeight())
+          && !tableConfig.getFixedBodyHeight().isEmpty()) {
+        this.setCssProperty("--dui-datatable-fixed-body-height", tableConfig.getFixedBodyHeight());
+      }
     }
 
-    if (tableConfig.isFixed()) {
+    if (tableConfig.getTableMode() == TableMode.FIXED_HEIGHT) {
       dui_datatable_width_full.remove(this);
       this.addCss(dui_datatable_fixed);
       ColumnUtils.fixElementWidth(this, tableElement.element());
-    }
-
-    if (tableConfig.isFixed()) {
+    } else if (tableConfig.getTableMode() == TableMode.AUTO) {
+      this.addCss(dui_datatable_auto);
       ColumnUtils.fixElementWidth(this, tableElement.element());
     }
+
     return this;
   }
 

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/DataTableStyles.java

@@ -35,6 +35,7 @@ public interface DataTableStyles {
   CssClass dui_datatable_width_full = () -> "dui-datatable-width-full";
 
   CssClass dui_datatable_fixed = () -> "dui-datatable-fixed";
+  CssClass dui_datatable_auto = () -> "dui-datatable-auto";
 
   CssClass dui_datatable_row = () -> "dui-datatable-row";
 

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableConfig.java

@@ -58,9 +58,9 @@ public class TableConfig<T>
   private List<ColumnConfig<T>> columns = new LinkedList<>();
   private List<DataTablePlugin<T>> plugins = new ArrayList<>();
   private DataTable<T> dataTable;
-  private boolean fixed = false;
+  private TableMode tableMode = TableMode.DEFAULT;
   private String fixedDefaultColumnWidth = "100px";
-  private String fixedBodyHeight = "400px";
+  private String fixedBodyHeight = "";
   private boolean lazyLoad = true;
   private boolean multiSelect = true;
   private boolean stickyHeader = false;
@@ -275,22 +275,50 @@ public interface UtilityColumnHandler<T> {
    * Checks if the DataTable is in a fixed layout mode.
    *
    * @return {@code true} if the table layout is fixed, {@code false} otherwise.
+   * @deprecated use {@link #getTableMode()} instead
    */
+  @Deprecated
   public boolean isFixed() {
-    return fixed;
+    return TableMode.FIXED_HEIGHT.equals(tableMode);
   }
 
   /**
    * Sets the DataTable layout mode as fixed or fluid.
    *
    * @param fixed {@code true} to set the table layout as fixed, {@code false} for fluid.
    * @return The current instance of {@link TableConfig} for chaining.
+   * @deprecated use {@link #setTableMode(TableMode)} instead
    */
+  @Deprecated
   public TableConfig<T> setFixed(boolean fixed) {
-    this.fixed = fixed;
+    this.tableMode = TableMode.FIXED_HEIGHT;
     return this;
   }
 
+  /**
+   * Sets the table mode for the table configuration.
+   *
+   * @param tableMode the mode to set for the table, defining its operational behavior or format
+   * @return the updated TableConfig instance with the newly set table mode
+   */
+  public TableConfig<T> setTableMode(TableMode tableMode) {
+    if (nonNull(tableMode)) {
+      this.tableMode = tableMode;
+    } else {
+      this.tableMode = TableMode.DEFAULT;
+    }
+    return this;
+  }
+
+  /**
+   * Retrieves the current mode of the table.
+   *
+   * @return the current TableMode instance representing the table's mode.
+   */
+  public TableMode getTableMode() {
+    return tableMode;
+  }
+
   /**
    * Checks if the DataTable is in lazy load mode.
    *

domino-ui/src/main/java/org/dominokit/domino/ui/datatable/TableMode.java

@@ -0,0 +1,36 @@
+/*
+ * Copyright © 2019 Dominokit
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.dominokit.domino.ui.datatable;
+
+/**
+ * Represents different display modes for an HTML table layout.
+ *
+ * <p>This enum provides three configurations for rendering table structures. Each mode offers a
+ * distinct combination of layout settings, column behavior, and table header interactions. These
+ * modes determine how the table is displayed and how it adjusts to content and container size.
+ */
+public enum TableMode {
+
+  /**
+   * Default HTML table layout: columns are sized by content and available table width, height grows
+   * with content, column widths are not fixed, and headers are not sticky.
+   */
+  DEFAULT,
+  /** Block table display, with fixed table body height and fixed columns width. */
+  FIXED_HEIGHT,
+  /** Fixed table layout with fixed and auto columns widths,sticky headers. */
+  AUTO;
+}

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-datatable.css

@@ -16,6 +16,19 @@
     display: block;
     overflow-x: auto;
     max-width: 100%;
+    max-height: var(--dui-datatable-fixed-body-height, 400px);
+}
+
+.dui-datatable-responsive.dui-datatable-auto {
+    max-height: var(--dui-datatable-fixed-body-height, 400px);
+    overflow-y: auto;
+}
+
+.dui-datatable-responsive.dui-datatable-auto .dui-datatable {
+    display: table;
+    table-layout: fixed;
+    max-width: 100%;
+    width: 100%;
 }
 
 .dui-datatable-thead {
@@ -36,6 +49,7 @@
     border-top: 1px solid var(--dui-accent-l-4);
 }
 
+.dui-datatable-auto .dui-datatable-thead,
 .dui-datatable-fixed .dui-datatable-thead {
     position: sticky;
     top: 0;