Demos

[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/

[admin]

Hi,

No, it is a client-side component, but it can be used along with NextJS, we handle this in the Table component when the SSR is enabled.

Best regards,
Markov

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

[admin]

Hi,

You can use the

onTaskRender
function | null
This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:

1. 'task' – The full task object containing all associated data.
2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
3. 'taskElement' – The root HTML element representing the task in the DOM.
4. 'segmentElement' – The HTML element representing the current segment of the task.
5. 'labelElement' – The HTML element that displays the segment’s label.

You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.

Try a demo showcasing the onTaskRender property.
Example
Set the onTaskRender property.

 <smart-gantt-chart on-task-render='null'></smart-gantt-chart>

Set the onTaskRender property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } };

Get the onTaskRender property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let onTaskRender = ganttchart.onTaskRender;

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/input-api/ and go to the events section which includes the list of the event names and example how to add listeners.

Best regards,
Markov

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

[admin]

Hi,

Please, check https://www.htmlelements.com/docs/kanban-css/

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please refer to https://www.htmlelements.com/demos/kanban/editable/ which shows how to enable the editing.

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

You can look at https://www.htmlelements.com/demos/scheduler/travel-schedule/

Best regards,
Markov

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

[admin]

Hi,

Smart Gantt is UI-only, so it doesn’t talk to REST services by itself—but it’s designed to bind easily to data coming from a REST API and to sync changes back.

How it works (high level)

Fetch data from your REST API (tasks, dependencies, resources)

Map the response to the Smart Gantt task structure

Load it into the component

Listen for changes (add/update/delete)

Send updates back to your API

This works the same way in JavaScript, Angular, React, Vue, and Blazor.

Typical REST → Smart Gantt data flow
REST API ⇄ Frontend logic ⇄ Smart Gantt

Smart Gantt focuses on:

Visualization

Editing

Scheduling logic

Your app handles:

Data fetching

Persistence

Authentication

Business rules

Example (JavaScript)
fetch(‘/api/tasks’)
.then(res => res.json())
.then(data => {
gantt.tasks = data.map(task => ({
id: task.id,
label: task.name,
startDate: task.start,
endDate: task.end,
progress: task.progress
}));
});

Sending changes back to the API

Smart Gantt fires events when data changes.

gantt.addEventListener(‘change’, event => {
fetch(/api/tasks/${event.detail.id}, {
method: ‘PUT’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(event.detail)
});
});

You can handle:

Task updates

New tasks

Deletions

Dependency changes

Best regards,
Markov

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/demos/kanban/export/

Best regards,
Markov

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

[admin]

Hi,

Please, take a look at https://www.htmlelements.com/themebuilder/ and https://www.htmlelements.com/docs/table-css/

Best regards,
Markov

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

[admin]

Hi,

Please, refer to https://www.htmlelements.com/demos/scheduler/overview/.

Best regards,
Markov

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

[admin]

Hi Patrick,

We just released a new version. You have an originalEvent parameter in the column click.
Alternatively, the column definition includes a new headerTemplate property which allows you to setup the column’s header after the label template is rendered.

Here’s the code:

` “label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
labelTemplate: function () {
return “AddID“;
},
headerTemplate: function (header) {
const button = header.querySelector(‘smart-button’);
button.addEventListener(‘pointerdown’, function (event) {
grid.addNewRow();
event.stopPropagation();
});
}`

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Yes, this is possible. Please, take a look at https://www.htmlelements.com/angular/demos/grid/server-side-paging-sorting-filtering-mysql-php/

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please, take a look at https://www.htmlelements.com/docs/gantt/. It shows how to get started with the Gantt in Vue.

Regards,
Markov

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

[admin]

Hi,

Yes, Smart Scheduler can be used inside modals or dialogs in Vue

Example:

<template>
  <div>
    <button @click="showModal = true">Open Scheduler</button>

    <smart-window v-if="showModal" label="Scheduler Modal">
      <smart-scheduler :dataSource="schedulerData"></smart-scheduler>
    </smart-window>
  </div>
</template>

Hope this helps.

Best regards,
Markov

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

[Author]

Posts