[PATCH yew-widget-toolkit v3 13/38] widget: kvlist: add widget for user-modifiable data tables

Christoph Heiss
2026-04-03T16:55:59Z

A yew-based variant of the existing extjs
`Proxmox.form.WebhookKeyValueList`, but also generic over the value
type.

Signed-off-by: Christoph Heiss <c.heiss@proxmox.com>
---
Changes v2 -> v3:
* new patch

src/widget/key_value_list.rs | 429 +++++++++++++++++++++++++++++++++++
src/widget/mod.rs | 3 +
2 files changed, 432 insertions(+)
create mode 100644 src/widget/key_value_list.rs

diff --git a/src/widget/key_value_list.rs b/src/widget/key_value_list.rs
new file mode 100644
index 0000000..80f69a0
--- /dev/null
+++ b/src/widget/key_value_list.rs
@@ -0,0 +1,429 @@
+use anyhow::{Error, bail};
+use serde::{Deserialize, Serialize, de::DeserializeOwned};
+use serde_json::Value;
+use std::{
+ fmt::{Debug, Display},
+ ops::{Deref, DerefMut},
+ rc::Rc,
+ str::FromStr,
+};
+use yew::virtual_dom::Key;
+
+use crate::{
+ css::{AlignItems, ColorScheme, FlexFit, FontColor},
+ prelude::*,
+ state::Store,
+ widget::{
+ ActionIcon, Button, Column, Container, Fa, Row,
+ data_table::{DataTable, DataTableColumn, DataTableHeader},
+ form::{
+ Field, InputType, IntoSubmitValidateFn, ManagedField, ManagedFieldContext,
+ ManagedFieldMaster, ManagedFieldScopeExt, ManagedFieldState, SubmitValidateFn,
+ },
+ },
+};
+use pwt_macros::{builder, widget};
+
+#[widget(pwt = crate, comp = ManagedFieldMaster<KeyValueListField<T>>, @input)]
+#[derive(Clone, PartialEq, Properties)]
+#[builder]
+/// A [`DataTable`]-based grid to hold a list of user-enterable key-value pairs.
+///
+/// Displays a [`DataTable`] with three columns; key, value and a delete button, with an add button
+/// below to create new rows.
+/// Both key and value are modifiable by the user.
+pub struct KeyValueList<
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+> {
+ #[builder]
+ #[prop_or_default]
+ /// Initial value pairs to display.
+ pub value: Vec<(String, T)>,
+
+ #[builder]
+ #[prop_or(tr!("Name"))]
+ /// Label for the key column, defaults to "Name".
+ pub key_label: String,
+
+ #[builder]
+ #[prop_or_default]
+ /// Placeholder to display in the key columns fields, default is no placeholder.
+ pub key_placeholder: String,
+
+ #[builder]
+ #[prop_or(tr!("Value"))]
+ /// Label for the value column.
+ pub value_label: String,
+
+ #[builder]
+ #[prop_or_default]
+ /// Placeholder to display in the value columns fields, default is no placeholder.
+ pub value_placeholder: String,
+
+ #[builder]
+ #[prop_or_default]
+ /// Input type to set on the value columns fields, default is text.
+ pub value_input_type: InputType,
+
+ #[builder_cb(IntoSubmitValidateFn, into_submit_validate_fn, Vec<(String, T)>)]
+ #[prop_or_default]
+ /// Callback to run on submit on the data in the table.
+ pub submit_validate: Option<SubmitValidateFn<Vec<(String, T)>>>,
+}
+
+impl<T> KeyValueList<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ pub fn new() -> Self {
+ yew::props!(Self {})
+ }
+}
+
+#[derive(Clone, Debug, PartialEq)]
+struct Entry<T: Clone + Debug + PartialEq> {
+ index: usize,
+ key: String,
+ value: T,
+}
+
+pub struct KeyValueListField<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ state: ManagedFieldState,
+ store: Store<Entry<T>>,
+}
+
+impl<T> Deref for KeyValueListField<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ type Target = ManagedFieldState;
+
+ fn deref(&self) -> &Self::Target {
+ &self.state
+ }
+}
+
+impl<T> DerefMut for KeyValueListField<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ fn deref_mut(&mut self) -> &mut Self::Target {
+ &mut self.state
+ }
+}
+
+pub enum Message {
+ DataChange,
+ UpdateKey(usize, String),
+ UpdateValue(usize, String),
+ RemoveEntry(usize),
+}
+
+impl<T> KeyValueListField<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + for<'d> Deserialize<'d>
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ fn set_data(&mut self, data: Vec<(String, T)>) {
+ self.store.set_data(
+ data.into_iter()
+ .enumerate()
+ .map(|(index, (key, value))| Entry { index, key, value })
+ .collect(),
+ );
+ }
+
+ pub fn sync_from_value(&mut self, value: Value) {
+ match serde_json::from_value::<Vec<(String, T)>>(value) {
+ Ok(items) => self.set_data(items),
+ Err(_err) => {
+ // unable to parse list, likely caused by the user editing items.
+ // simply ignore errors
+ }
+ }
+ }
+
+ fn columns(
+ ctx: &ManagedFieldContext<KeyValueListField<T>>,
+ ) -> Rc<Vec<DataTableHeader<Entry<T>>>> {
+ let props = ctx.props().clone();
+ let link = ctx.link().clone();
+
+ Rc::new(vec![
+ DataTableColumn::new(props.key_label)
+ .flex(1)
+ .render({
+ let link = link.clone();
+ move |item: &Entry<T>| {
+ let index = item.index;
+ Field::new()
+ .on_change(link.callback(move |value| Message::UpdateKey(index, value)))
+ .required(true)
+ .disabled(props.input_props.disabled)
+ .placeholder(props.key_placeholder.clone())
+ .validate(|s: &String| {
+ if s.is_empty() {
+ bail!("Field may not be empty");
+ } else {
+ Ok(())
+ }
+ })
+ .value(item.key.clone())
+ .into()
+ }
+ })
+ .sorter(|a: &Entry<T>, b: &Entry<T>| a.key.cmp(&b.key))
+ .into(),
+ DataTableColumn::new(props.value_label)
+ .flex(1)
+ .render({
+ let link = link.clone();
+ move |item: &Entry<T>| {
+ let index = item.index;
+ let value = &item.value;
+ Field::new()
+ .input_type(props.value_input_type)
+ .on_change(
+ link.callback(move |value| Message::UpdateValue(index, value)),
+ )
+ .disabled(props.input_props.disabled)
+ .placeholder(props.value_placeholder.clone())
+ .value(value.to_string())
+ .into()
+ }
+ })
+ .into(),
+ DataTableColumn::new("")
+ .width("50px")
+ .render(move |item: &Entry<T>| {
+ let index = item.index;
+ ActionIcon::new("fa fa-lg fa-trash-o")
+ .tabindex(0)
+ .on_activate(link.callback(move |_| Message::RemoveEntry(index)))
+ .disabled(props.input_props.disabled)
+ .into()
+ })
+ .into(),
+ ])
+ }
+}
+
+impl<T> ManagedField for KeyValueListField<T>
+where
+ T: 'static
+ + Clone
+ + Debug
+ + Default
+ + DeserializeOwned
+ + Display
+ + FromStr
+ + PartialEq
+ + Serialize,
+{
+ type Message = Message;
+ type Properties = KeyValueList<T>;
+ type ValidateClosure = (bool, Option<SubmitValidateFn<Vec<(String, T)>>>);
+
+ fn create(ctx: &ManagedFieldContext<Self>) -> Self {
+ let store = Store::with_extract_key(|entry: &Entry<T>| Key::from(entry.index))
+ .on_change(ctx.link().callback(|_| Message::DataChange));
+
+ let value = Value::Null;
+
+ // put the default value through the validator fn, to allow for correct dirty checking
+ let default = if let Some(f) = &ctx.props().submit_validate {
+ f.apply(&ctx.props().value).unwrap_or_default()
+ } else {
+ serde_json::to_value(ctx.props().value.clone()).unwrap_or_default()
+ };
+
+ let mut this = Self {
+ state: ManagedFieldState::new(value, default),
+ store,
+ };
+
+ this.set_data(ctx.props().value.clone());
+ this
+ }
+
+ fn validation_args(props: &Self::Properties) -> Self::ValidateClosure {
+ (props.input_props.required, props.submit_validate.clone())
+ }
+
+ fn validator(props: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
+ let data = serde_json::from_value::<Vec<(String, T)>>(value.clone())?;
+
+ if data.is_empty() && props.0 {
+ bail!("at least one entry required!")
+ }
+
+ if data.iter().any(|(k, _)| k.is_empty()) {
+ bail!("Name must not be empty!");
+ }
+
+ if let Some(cb) = &props.1 {
+ cb.apply(&data)
+ } else {
+ Ok(value.clone())
+ }
+ }
+
+ fn changed(&mut self, ctx: &ManagedFieldContext<Self>, old_props: &Self::Properties) -> bool {
+ let props = ctx.props();
+ if old_props.value != props.value {
+ let default: Value = props
+ .value
+ .iter()
+ .filter_map(|n| serde_json::to_value(n).ok())
+ .collect();
+ ctx.link().update_default(default.clone());
+ self.sync_from_value(default);
+ }
+ true
+ }
+
+ fn value_changed(&mut self, _ctx: &ManagedFieldContext<Self>) {
+ match self.state.value {
+ Value::Null => self.sync_from_value(self.state.default.clone()),
+ _ => self.sync_from_value(self.state.value.clone()),
+ }
+ }
+
+ fn update(&mut self, ctx: &ManagedFieldContext<Self>, msg: Self::Message) -> bool {
+ match msg {
+ Message::DataChange => {
+ let list: Vec<(String, T)> = self
+ .store
+ .read()
+ .iter()
+ .map(|Entry { key, value, .. }| (key.clone(), value.clone()))
+ .collect();
+ ctx.link().update_value(serde_json::to_value(list).unwrap());
+ true
+ }
+ Message::RemoveEntry(index) => {
+ let data: Vec<(String, T)> = self
+ .store
+ .read()
+ .iter()
+ .filter(move |item| item.index != index)
+ .map(|Entry { key, value, .. }| (key.clone(), value.clone()))
+ .collect();
+ self.set_data(data);
+ true
+ }
+ Message::UpdateKey(index, key) => {
+ let mut data = self.store.write();
+ if let Some(item) = data.get_mut(index) {
+ item.key = key;
+ }
+ true
+ }
+ Message::UpdateValue(index, value) => {
+ let mut data = self.store.write();
+ if let Some(item) = data.get_mut(index) {
+ if let Ok(v) = T::from_str(&value) {
+ item.value = v;
+ }
+ }
+ true
+ }
+ }
+ }
+
+ fn view(&self, ctx: &ManagedFieldContext<Self>) -> Html {
+ let table = DataTable::new(Self::columns(ctx), self.store.clone())
+ .border(true)
+ .class(FlexFit);
+
+ let button_row = Row::new()
+ .with_child(
+ Button::new(tr!("Add"))
+ .class(ColorScheme::Primary)
+ .icon_class("fa fa-plus-circle")
+ .on_activate({
+ let store = self.store.clone();
+ move |_| {
+ let mut data = store.write();
+ let index = data.len();
+
+ data.push(Entry {
+ index,
+ key: String::new(),
+ value: T::default(),
+ })
+ }
+ }),
+ )
+ .with_flex_spacer()
+ .with_optional_child(self.state.result.clone().err().map(|err| {
+ Row::new()
+ .class(AlignItems::Center)
+ .gap(2)
+ .with_child(Fa::new("exclamation-triangle").class(FontColor::Error))
+ .with_child(err)
+ }));
+
+ Column::new()
+ .class(FlexFit)
+ .gap(2)
+ .with_child(
+ Container::from_widget_props(ctx.props().std_props.clone(), None)
+ .class(FlexFit)
+ .with_child(table),
+ )
+ .with_child(button_row)
+ .into()
+ }
+}
diff --git a/src/widget/mod.rs b/src/widget/mod.rs
index 0df2cbf..a6f2836 100644
--- a/src/widget/mod.rs
+++ b/src/widget/mod.rs
@@ -189,6 +189,9 @@ pub use tooltip::Tooltip;
mod visibility_observer;
pub use visibility_observer::VisibilityObserver;

+mod key_value_list;
+pub use key_value_list::KeyValueList;
+
use std::sync::atomic::{AtomicUsize, Ordering};

static UNIQUE_ELEMENT_ID: AtomicUsize = AtomicUsize::new(0);
--
2.53.0