Reply To: Any examples or resources related to: Table?

[admin]

Hi,

Sure, please look at the information below:

Recommended syncing model

1) One-way data flow for row data (store ➜ table)

Keep the canonical dataset in Redux/Vuex.

Feed the table from the store via table.dataSource (array or DataAdapter).

Set a stable row key with dataRowId so updates map to the correct row.

2) Event-driven updates for edits (table ➜ store)

Listen to edit events and dispatch actions:

cellEndEdit (cell editing) provides id, dataField, row, value.

rowEndEdit (row editing mode) provides id and full row.
sort gives current sort info if you want to store UI state.

Here’s a simple example which should help you with this approach:

// 1) Render from store
const table = document.querySelector("smart-table");
table.dataRowId = "id"; // stable identity mapping :contentReference[oaicite:10]{index=10}
table.dataSource = store.getState().rows;

// 2) Store -> table (subscribe)
let lastRows = store.getState().rows;
store.subscribe(() => {
  const nextRows = store.getState().rows;
  if (nextRows === lastRows) return;

  // For big changes: replace once + batch refresh
  table.beginUpdate();                 // :contentReference[oaicite:11]{index=11}
  table.dataSource = nextRows;         // :contentReference[oaicite:12]{index=12}
  table.endUpdate();                   // :contentReference[oaicite:13]{index=13}

  lastRows = nextRows;
});

// 3) Table -> store (edit events)
table.addEventListener("cellEndEdit", (e) => {
  const { id, dataField, value } = e.detail; // :contentReference[oaicite:14]{index=14}
  store.dispatch({
    type: "ROWS/PATCH",
    payload: { id, changes: { [dataField]: value } },
  });
});

// Optional: capture sort UI state into Redux
table.addEventListener("sort", (e) => {
  const { sortDataFields, sortOrders } = e.detail; // :contentReference[oaicite:15]{index=15}
  store.dispatch({ type: "TABLE/SORT_CHANGED", payload: { sortDataFields, sortOrders } });
});

if you want to prevent double-updates, compare value vs previous value from your store before dispatching, or debounce commit actions.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/