[RFC PATCH yew-widget-toolkit] widget: data table: implement auto column sizing based on sample records

[RFC PATCH yew-widget-toolkit] widget: data table: implement auto column sizing based on sample records

[Dominik Csapak]

When a column size is not explicitly given (like "100px" or "15em"), the
default size is implicitly determined by the header text. In cases where
the content should always be shown (like in an action column) and
depends on the theme/density (for padding/width/etc.) this lead to an
bad tradeoff:

Either a fixed size is used and it's sometimes too wide or too narrow,
or some css expression is used that dynamically determines the size.

Both are not ideal, so introduce 'sample records' that the data table
can use to (invisibly) render a set of dummy rows which can dynamically
determine the correct size.

This can be used for e.g. setting an example that should always fit, or
having a fixed set of ActionIcons, etc.

When multiple records are given, the largest one wins.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
IMHO there is no better solution when having buffered tables and having
the headers + body split like we have.

The overhead should be small enough, e.g. a single invisible row
shouldn't hurt (even though it might look weird in the markup)

 src/widget/data_table/data_table.rs    | 90 ++++++++++++++++++++++++--
 src/widget/data_table/header_widget.rs | 45 +++++++++++++
 2 files changed, 131 insertions(+), 4 deletions(-)

diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index f00d9ab..338115f 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -22,9 +22,10 @@ use crate::state::{DataStore, Selection, SelectionObserver};
 use crate::widget::{Column, Container, get_unique_element_id};
 
 use super::{
-    CellConfiguration, DataTableColumn, DataTableHeader, DataTableKeyboardEvent,
-    DataTableMouseEvent, DataTableRow, DataTableRowRenderCallback, HeaderWidget, IndexedHeader,
-    IntoOptionalDataTableRowRenderCallback, create_indexed_header_list,
+    CellConfiguration, DataTableCellRenderArgs, DataTableColumn, DataTableHeader,
+    DataTableKeyboardEvent, DataTableMouseEvent, DataTableRow, DataTableRowRenderCallback,
+    HeaderWidget, IndexedHeader, IntoOptionalDataTableRowRenderCallback,
+    create_indexed_header_list,
 };
 
 pub enum HeaderMsg<T: 'static> {
@@ -173,6 +174,15 @@ pub struct DataTable<S: DataStore> {
     #[prop_or(22)]
     pub min_row_height: usize,
 
+    /// Sample records used for sizing the columns.
+    ///
+    /// Default column widths are computed from the header, because the table rows are rendered
+    /// separately (and only partially with virtual scrolling). These records are rendered
+    /// invisibly inside the header, using the column render functions, so content based widths
+    /// like "auto" or "max-content" account for them. For flex widths, they act as minimum width.
+    #[prop_or_default]
+    pub col_sizing_records: Vec<S::Record>,
+
     /// Selection object.
     #[prop_or_default]
     pub selection: Option<Selection>,
@@ -352,6 +362,17 @@ impl<S: DataStore> DataTable<S> {
         self.min_row_height = min_row_height;
     }
 
+    /// Builder style method to set the sample records used for sizing the columns.
+    pub fn col_sizing_records(mut self, records: impl IntoIterator<Item = S::Record>) -> Self {
+        self.set_col_sizing_records(records);
+        self
+    }
+
+    /// Method to set the sample records used for sizing the columns.
+    pub fn set_col_sizing_records(&mut self, records: impl IntoIterator<Item = S::Record>) {
+        self.col_sizing_records = records.into_iter().collect();
+    }
+
     /// Builder style method to set the autoselect flag.
     pub fn autoselect(mut self, autoselect: impl IntoPropValue<bool>) -> Self {
         self.set_autoselect(autoselect);
@@ -1049,6 +1070,66 @@ impl<S: DataStore> PwtDataTable<S> {
         };
     }
 
+    // Render the cells of the sizing records with the column renderers, wrapped like table cells,
+    // so that they get the same font and padding when the header measures them. The cells of
+    // one column are stacked, so the widest one determines the column width.
+    fn render_column_sizers(&self, props: &DataTable<S>) -> Vec<Option<Html>> {
+        if props.col_sizing_records.is_empty() {
+            return Vec::new();
+        }
+
+        let records: Vec<(Key, &S::Record)> = props
+            .col_sizing_records
+            .iter()
+            .map(|record| (props.store.extract_key(record), record))
+            .collect();
+
+        let mut column_index = 0;
+        self.columns
+            .iter()
+            .enumerate()
+            .map(|(column_num, column)| {
+                if let Some(true) = self.column_hidden.get(column_num) {
+                    return None;
+                }
+
+                let mut sizer = Container::new().class("pwt-datatable-content");
+                for (row_index, (record_key, record)) in records.iter().enumerate() {
+                    let mut args = DataTableCellRenderArgs {
+                        selection: props.selection.clone(),
+                        record: *record,
+                        record_key,
+                        row_index,
+                        column_index,
+                        selected: false,
+                        config: (*self.cell_config).clone(),
+                        is_expanded: false,
+                        is_leaf: true,
+                        level: 0,
+                    };
+
+                    let cell = column.apply_render(&mut args);
+
+                    sizer.add_child(
+                        Container::new()
+                            .class(args.config.class)
+                            .styles(args.config.style)
+                            .style("white-space", "nowrap")
+                            // cell widths get reduced by the border width, see
+                            // render_empty_row_with_sizes
+                            .style(
+                                "border-inline-end",
+                                props.bordered.then_some("1px solid transparent"),
+                            )
+                            .with_child(html! {<div role="none">{cell}</div>}),
+                    );
+                }
+                column_index += 1;
+                Some(sizer.into())
+            })
+            .collect()
+    }
+
     fn init_headers(&mut self, props: &DataTable<S>) {
         let headers = create_indexed_header_list(&props.headers);
 
@@ -1764,7 +1845,8 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
                             .focusable(props.header_focusable && props.show_header)
                             .selection_status(self.selection_status)
                             .header_class(header_class)
-                            .reserve_scroll_space(self.scrollbar_size.unwrap_or_default()),
+                            .reserve_scroll_space(self.scrollbar_size.unwrap_or_default())
+                            .column_sizers(self.render_column_sizers(props)),
                     )
                     .into_html_with_ref(self.header_scroll_ref.clone()),
             )
diff --git a/src/widget/data_table/header_widget.rs b/src/widget/data_table/header_widget.rs
index 64faf33..dfe2f76 100644
--- a/src/widget/data_table/header_widget.rs
+++ b/src/widget/data_table/header_widget.rs
@@ -43,6 +43,11 @@ pub struct HeaderWidget<T: 'static> {
     pub focusable: bool,
 
     reserve_scroll_space: f64,
+
+    /// Invisible content per column (indexed like the column list), used to size the column
+    /// tracks.
+    #[prop_or_default]
+    pub column_sizers: Vec<Option<Html>>,
 }
 
 impl<T: 'static> HeaderWidget<T> {
@@ -95,6 +100,17 @@ impl<T: 'static> HeaderWidget<T> {
     pub fn set_reserve_scroll_space(&mut self, reserve_scroll_space: f64) {
         self.reserve_scroll_space = reserve_scroll_space;
     }
+
+    /// Builder style method to set the column sizers.
+    pub fn column_sizers(mut self, column_sizers: Vec<Option<Html>>) -> Self {
+        self.set_column_sizers(column_sizers);
+        self
+    }
+
+    /// Method to set the column sizers.
+    pub fn set_column_sizers(&mut self, column_sizers: Vec<Option<Html>>) {
+        self.column_sizers = column_sizers;
+    }
 }
 
 pub enum Msg {
@@ -626,6 +642,35 @@ impl<T: 'static> Component for PwtHeaderWidget<T> {
             &mut header_row,
         );
 
+        // Put the sizers into their column tracks, so that content based track sizes account for
+        // them. They have no height and are invisible, so they do not change the header layout.
+        // Header cells end at row line 10, so use the row after that to avoid interfering with
+        // the auto placed group headers.
+        let mut grid_column = 0;
+        for col_idx in 0..self.state.columns().len() {
+            if self.state.get_column_hidden(col_idx) {
+                continue;
+            }
+            grid_column += 1;
+            if let Some(Some(sizer)) = props.column_sizers.get(col_idx) {
+                header_row.push(
+                    Container::new()
+                        .key(Key::from(format!("sizer-{col_idx}")))
+                        .attribute("role", "none")
+                        .attribute("aria-hidden", "true")
+                        .attribute(
+                            "style",
+                            format!(
+                                "grid-row: 10;grid-column-start: {grid_column};\
+                                height: 0;overflow: clip;visibility: hidden;"
+                            ),
+                        )
+                        .with_child(sizer.clone())
+                        .into(),
+                );
+            }
+        }
+
         let column_count = self.state.visible_column_count();
 
         // add some space at the end to make room for the tables vertical scrollbar
-- 
2.47.3

superseded: [RFC PATCH yew-widget-toolkit] widget: data table: implement auto column sizing based on sample records

[Dominik Csapak]

superseded by v2:
https://lore.proxmox.com/yew-devel/20261006112846.2312264-1-d.csapak@proxmox.com/T/#u