From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40]) by lore.proxmox.com (Postfix) with ESMTPS id BBA471FF0BC for ; Thu, 15 Oct 2026 14:40:51 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id 7289121432; Thu, 15 Oct 2026 14:40:51 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit v4 2/2] widget: data table: implement auto column sizing based on sample records Date: Thu, 15 Oct 2026 14:38:28 +0200 Message-ID: <20261015124047.3536357-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20261015124047.3536357-1-d.csapak@proxmox.com> References: <20261015124047.3536357-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.364 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: 6ONA7LF2IHVFCH5EEGUW4XCDVIG2AK75 X-Message-ID-Hash: 6ONA7LF2IHVFCH5EEGUW4XCDVIG2AK75 X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: 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 leads to a 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. Use the same logic as the table rows for rendering them. 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 for each column wins. Since too many rendered records can impact the performance, limit the considered records and assert the number in debug mode. Reuse VIRTUAL_SCROLL_TRIGGER as the limit, since that is also the cut-off for the visible rows. Signed-off-by: Dominik Csapak --- src/widget/data_table/data_table.rs | 117 +++++++++++++++++++++++-- src/widget/data_table/header_widget.rs | 46 ++++++++++ src/widget/data_table/mod.rs | 2 +- src/widget/data_table/rendered_cell.rs | 4 + 4 files changed, 163 insertions(+), 6 deletions(-) diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs index 9407844..6ad4068 100644 --- a/src/widget/data_table/data_table.rs +++ b/src/widget/data_table/data_table.rs @@ -21,10 +21,13 @@ use crate::props::{ use crate::state::{DataStore, Selection, SelectionObserver}; use crate::widget::{Column, Container, get_unique_element_id}; +use pwt_macros::builder; + 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, render_row_cells, }; pub enum HeaderMsg { @@ -109,6 +112,7 @@ pub enum MultiSelectMode { /// * `End`: moves focus to the last cell in the row that contains focus. #[derive(Properties, Derivative)] #[derivative(Clone(bound = ""), PartialEq(bound = ""))] +#[builder] pub struct DataTable { /// Yew key property. #[prop_or_default] @@ -173,6 +177,24 @@ pub struct DataTable { #[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. + /// + /// To make it easier to handle with enum records (often used by trees), this is a list, so + /// multiple variants can be used simultaneously. + /// + /// The records are rendered with `level: 0` and not expanded, so tree indentation is + /// not considered. + /// + /// NOTE: Only up to [`VIRTUAL_SCROLL_TRIGGER`] records are supported for performance reasons. + #[prop_or_default] + #[builder] + pub sample_records: Vec, + /// Selection object. #[prop_or_default] pub selection: Option, @@ -240,7 +262,9 @@ impl CssPaddingBuilder for DataTable {} impl CssMarginBuilder for DataTable {} impl WidgetStyleBuilder for DataTable {} -static VIRTUAL_SCROLL_TRIGGER: usize = 30; +/// The automatic cut-off for virtual scrolling. When the DataTable can be scrolled +/// and there are more rows than this limit, virtual scrolling is automatically enabled. +pub const VIRTUAL_SCROLL_TRIGGER: usize = 30; impl DataTable { /// Create a new instance. @@ -536,6 +560,9 @@ pub struct PwtDataTable { keypress_timeout: Option, focus_table: bool, + + /// Cached column sizers so recalculation does not happen too frequently. + column_sizers: Vec<(usize, usize, Html)>, } /// Whether the header has measured the columns. A hidden header measures them as 0. @@ -1059,6 +1086,69 @@ impl PwtDataTable { }; } + // Calculate and 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. + fn calculate_column_sizers(&mut self, props: &DataTable) { + if props.sample_records.is_empty() { + self.column_sizers = Vec::new(); + return; + } + + debug_assert!( + props.sample_records.len() <= VIRTUAL_SCROLL_TRIGGER, + "More than {VIRTUAL_SCROLL_TRIGGER} sample records can have a negative performance \ + impact. Anything more than that will not be rendered." + ); + + let records: Vec<(Key, &S::Record)> = props + .sample_records + .iter() + .take(VIRTUAL_SCROLL_TRIGGER) + .map(|record| (props.store.extract_key(record), record)) + .collect(); + + let mut res = Vec::with_capacity(records.len() * self.columns.len()); + + for (row_index, (record_key, record)) in records.into_iter().enumerate() { + let rendered_cells = + render_row_cells(&self.columns, &self.column_hidden, |column_index| { + DataTableCellRenderArgs { + selection: props.selection.clone(), + record, + record_key: &record_key, + row_index, + column_index, + selected: false, + config: (*self.cell_config).clone(), + is_expanded: false, + is_leaf: true, + level: 0, + } + }); + + for cell in rendered_cells { + res.push(( + cell.col_index, + cell.colspan, + Container::new() + .class(cell.config.class) + .styles(cell.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! {
{cell.content}
}) + .into(), + )); + } + } + + self.column_sizers = res; + } + fn init_headers(&mut self, props: &DataTable) { let headers = create_indexed_header_list(&props.headers); @@ -1136,12 +1226,16 @@ impl Component for PwtDataTable { keypress_timeout: None, focus_table: false, + column_sizers: Vec::new(), }; me.init_headers(props); me.update_scroll_info(props); // fixme: remove unknown keys from selection me.update_selection_status(props); + + me.calculate_column_sizers(props); + me } @@ -1653,6 +1747,7 @@ impl Component for PwtDataTable { } Msg::Header(HeaderMsg::ColumnHiddenChange(column_hidden)) => { self.column_hidden = Rc::new(column_hidden); + self.calculate_column_sizers(props); true } Msg::Header(HeaderMsg::ToggleSelectAll) => { @@ -1794,7 +1889,8 @@ impl Component for PwtDataTable { .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.column_sizers.clone()), ) .into_html_with_ref(self.header_scroll_ref.clone()), ) @@ -1810,8 +1906,19 @@ impl Component for PwtDataTable { self.update_scroll_info(props); } + let mut recalculate_sizers = false; if props.headers != old_props.headers { self.init_headers(props); + recalculate_sizers = true; + } + + if props.sample_records != old_props.sample_records || props.bordered != old_props.bordered + { + recalculate_sizers = true; + } + + if recalculate_sizers { + self.calculate_column_sizers(props); } true diff --git a/src/widget/data_table/header_widget.rs b/src/widget/data_table/header_widget.rs index b6f06f6..268b66c 100644 --- a/src/widget/data_table/header_widget.rs +++ b/src/widget/data_table/header_widget.rs @@ -43,6 +43,11 @@ pub struct HeaderWidget { pub focusable: bool, reserve_scroll_space: f64, + + /// Invisible content per visible column, used to size the column tracks. Contains + /// the visible column index, the `colspan` value and the content. + #[prop_or_default] + pub column_sizers: Vec<(usize, usize, Html)>, } impl HeaderWidget { @@ -95,6 +100,17 @@ impl HeaderWidget { 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<(usize, usize, 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<(usize, usize, Html)>) { + self.column_sizers = column_sizers; + } } pub enum Msg { @@ -635,6 +651,36 @@ impl Component for PwtHeaderWidget { let column_count = self.state.visible_column_count(); + // 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. + for (i, (grid_start, colspan, sizer)) in props.column_sizers.iter().enumerate() { + if *grid_start >= column_count { + continue; + } + let cols_left = column_count - grid_start; + let colspan = (*colspan).min(cols_left); + + header_row.push( + Container::new() + .key(Key::from(format!("sizer-{i}"))) + .class("pwt-datatable-content") + .attribute("role", "none") + .attribute("aria-hidden", "true") + .style("height", "0px") + .style("overflow", "clip") + .style("visibility", "hidden") + .style("grid-row", "10") + .style( + "grid-column", + format!("{} / span {}", grid_start + 1, colspan), + ) + .with_child(sizer.clone()) + .into(), + ); + } + // add some space at the end to make room for the tables vertical scrollbar let scrollbar_size = ctx.props().reserve_scroll_space; if scrollbar_size > 0.0 { diff --git a/src/widget/data_table/mod.rs b/src/widget/data_table/mod.rs index ba0d0ff..9cf719e 100644 --- a/src/widget/data_table/mod.rs +++ b/src/widget/data_table/mod.rs @@ -48,7 +48,7 @@ mod data_table; pub(crate) use data_table::HeaderMsg; #[doc(hidden)] pub use data_table::PwtDataTable; -pub use data_table::{DataTable, MultiSelectMode, RowSelectionStatus}; +pub use data_table::{DataTable, MultiSelectMode, RowSelectionStatus, VIRTUAL_SCROLL_TRIGGER}; use yew::prelude::*; diff --git a/src/widget/data_table/rendered_cell.rs b/src/widget/data_table/rendered_cell.rs index 42ab8e6..77422b1 100644 --- a/src/widget/data_table/rendered_cell.rs +++ b/src/widget/data_table/rendered_cell.rs @@ -5,6 +5,8 @@ use crate::widget::data_table::{CellConfiguration, DataTableCellRenderArgs, Data /// Contains the rendered cell contents plus meta info to properly show it in the data table pub(crate) struct RenderedCell<'a, T: 'static> { pub column_num: usize, + pub col_index: usize, + pub colspan: usize, pub config: CellConfiguration, pub content: Html, pub column: &'a DataTableColumn, @@ -46,6 +48,8 @@ pub(crate) fn render_row_cells<'a, T>( res.push(RenderedCell { column_num, + col_index, + colspan, config: args.config, content, column, -- 2.47.3