Demos

[Markov]

Hi,

With React, you can do this:

import { Chart } from "smart-webcomponents-react/chart";
import { useEffect, useState } from "react";

export default function LiveChart() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const ws = new WebSocket('wss://example.com/live-data');
    ws.onmessage = (event) => {
      const point = JSON.parse(event.data);
      setData(prev => [...prev.slice(-49), point]); // keep last 50 points
    };
    return () => ws.close();
  }, []);

  return <Chart caption="Live Data" type="line" dataSource={data} />;
}

Using useState ensures reactive updates in React.

As for Typescript – sure, this is supported.

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible.

Example with React + React Router + Redux

import { Kanban } from "smart-webcomponents-react/kanban";
import { useSelector, useDispatch } from "react-redux";
import { setCards, setColumnFilter } from "./kanbanSlice";
import { useEffect } from "react";

export default function KanbanPage() {
  const dispatch = useDispatch();
  const cards = useSelector(state => state.kanban.cards);
  const filter = useSelector(state => state.kanban.columnFilter);

  // Save state to Redux when card changes
  const handleChange = (event) => {
    const { type, data } = event.detail;
    if (type === "update" || type === "add" || type === "delete") {
      dispatch(setCards(data));
    }
  };

  return (
    <Kanban
      dataSource={cards}
      columnProperty="status"
      columns={[
        { label: "To Do", dataField: "todo" },
        { label: "In Progress", dataField: "inProgress" },
        { label: "Done", dataField: "done" },
      ]}
      onChange={handleChange}
    />
  );
}

The idea is:

Data persistence: Kanban’s dataSource holds all cards; filters or column settings can also be tracked.
State storage options: Redux, Vuex, or React Context.
Local storage: Store JSON data in localStorage.

On navigation:

Save the current state and restore the state when the Kanban component is mounted again

Best regards,
Markov

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

[Markov]

Hi,

Conditional formatting for events

You can use eventRender to modify event appearance dynamically.

const scheduler = document.getElementById('scheduler');

scheduler.dataSource = [
  { label: 'Meeting', dateStart: '2025-10-01T09:00', dateEnd: '2025-10-01T10:00', status: 'urgent' },
  { label: 'Lunch', dateStart: '2025-10-01T12:00', dateEnd: '2025-10-01T13:00', status: 'normal' }
];

// Apply styles based on event status
scheduler.eventRender = function(event, element) {
  if (event.status === 'urgent') {
    element.style.backgroundColor = '#FF4D4F'; // red
    element.style.color = '#FFFFFF';
  } else if (event.status === 'normal') {
    element.style.backgroundColor = '#1890FF'; // blue
  }
};

Best regards,
Markov

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

[Markov]

Hi,

You can use Smart Scheduler with state management libraries like Redux, Vuex, or even React’s useReducer to keep the scheduler in sync with your global store. The key idea is that the scheduler’s data and settings are treated as part of your app’s state, and any changes are dispatched to the store. Let me break it down for different scenarios.

Example with Redux:

import React, { useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Scheduler } from "smart-webcomponents-react/scheduler";
import { addEvent, updateEvent, removeEvent } from "./schedulerSlice";

export default function SchedulerWithRedux() {
  const dispatch = useDispatch();
  const events = useSelector(state => state.scheduler.events);
  const schedulerRef = useRef(null);

  // Sync scheduler changes to Redux
  const handleEventChange = (event) => {
    const { type, eventDetails } = event.detail;
    if (type === 'add') dispatch(addEvent(eventDetails));
    if (type === 'update') dispatch(updateEvent(eventDetails));
    if (type === 'delete') dispatch(removeEvent(eventDetails));
  };

  useEffect(() => {
    const scheduler = schedulerRef.current;
    scheduler.addEventListener('change', handleEventChange);
    return () => scheduler.removeEventListener('change', handleEventChange);
  }, []);

  return (
    <Scheduler
      ref={schedulerRef}
      dataSource={events}
      view="week"
      views={['day', 'week', 'month']}
      dateCurrent={new Date()}
    />
  );
}

Best regards,
Markov

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

[Markov]

Hi,

You can use the dataSource property to data bind the table.

<smart-table id="table"></smart-table>

<script>
  const table = document.getElementById('table');

  table.columns = [
    { label: 'ID', dataField: 'id' },
    { label: 'Name', dataField: 'name' },
    { label: 'Email', dataField: 'email' }
  ];

  table.dataSource = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];
</script>

Best regards,
Markov

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

[Markov]

Hi,

The Table supports only client side rendering as it is a component written in javascript, html and css. As for the data export, use the exportData method. More details: https://www.htmlelements.com/docs/table-api/

Best regards,
Markov

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

[Markov]

Hi,

You can handle the ‘change’ event of the editor and then use the getHTML method to get the html. By doing this, you can perform validation.

Best regards,
Markov

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

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor/. The tutorial will walk you through the required steps to get started with our blazor components in dotnet 9.

Best regards,
Markov

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

[Markov]

Hi,

Transitions are not supported in the Smart.Table component. As for responsiveness, just set its size in percentages in the CSS and this is enough.

Best regards,
Markov

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

[Markov]

In Smart Angular, the recommended way to add a context menu to the Kanban board is by handling the onContextMenu event of the <smart-kanban> component and then showing your own Smart.Menu (or Angular menu) bound to the event.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from 'smart-webcomponents-angular/kanban';
import { MenuModule } from 'smart-webcomponents-angular/menu';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, KanbanModule, MenuModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Template: 

<smart-kanban
  #kanban
  [columns]="columns"
  [dataSource]="data"
  (onContextMenu)="openContextMenu($event)">
</smart-kanban>

<smart-menu #menu [modal]="true" [mode]="'dropDown'">
  <smart-menu-item>Edit Task</smart-menu-item>
  <smart-menu-item>Delete Task</smart-menu-item>
  <smart-menu-item>Assign To...</smart-menu-item>
</smart-menu>

import { Component, ViewChild } from '@angular/core';
import { KanbanComponent } from 'smart-webcomponents-angular/kanban';
import { MenuComponent } from 'smart-webcomponents-angular/menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('kanban', { static: true }) kanban!: KanbanComponent;
  @ViewChild('menu', { static: true }) menu!: MenuComponent;

  columns = [
    { label: 'To Do', dataField: 'toDo' },
    { label: 'In Progress', dataField: 'inProgress' },
    { label: 'Done', dataField: 'done' }
  ];

  data = [
    { id: 1, text: 'Create new feature', status: 'toDo' },
    { id: 2, text: 'Fix bug #42', status: 'inProgress' },
    { id: 3, text: 'Release version 1.0', status: 'done' }
  ];

  openContextMenu(event: CustomEvent) {
    event.preventDefault(); // prevent browser context menu
    const { originalEvent, target } = event.detail;

    // You can check target type: card, column, kanban
    console.log('Context menu target:', target);

    // Position menu at mouse pointer
    this.menu.open(originalEvent.pageX, originalEvent.pageY);
  }
}

Best regards,
Markov

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

[Markov]

Hi,

No, we support server-model data binding i.e loading data on demand from a server, but the rendering is client-side.

Best regards,
Markov

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

[Markov]

Hi,

You can data bind our components using the dataSource property, however you cannot use the browser’s internal saved lists and this is on purpose for security reasons. If you need to use native auto-completition, you will have to use the native input tag as well.

Best regards,
Markov

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

[Markov]

Hi,

Undo/redo is supported only in the Smart.Grid component, but not in the Smart.Table component. The Grid component has undo and redo methods and you can also use Ctrl+Z and Ctrl+Y key shortcuts.

Best regards,
Markov

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

[Markov]

Hi,

Use can use local storage for the state. It keeps the editor state on page refresh or temporary browser session.

const editor = document.getElementById("editor");

// Save state
editor.addEventListener("input", () => {
  localStorage.setItem("editorState", editor.innerHTML);
});

// Restore state
window.addEventListener("load", () => {
  const saved = localStorage.getItem("editorState");
  if (saved) editor.innerHTML = saved;
});

As for your theming related question.

/* Apply a global theme for Smart Editor */
smart-editor {
  --smart-background: #1e1e2f;     /* Editor background */
  --smart-surface: #2c2c3c;        /* Toolbar background */
  --smart-border: #444;            /* Borders */
  --smart-primary: #4cafef;        /* Primary accent (buttons, highlights) */
  --smart-ui-state-hover: #555;    /* Hover state */
  --smart-ui-state-active: #4cafef;
  --smart-editor-text-color: #fff; /* Text inside editor */
}

Best regards,
Markov

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

[Markov]

Hi,

No, currently API to turn it off is not available. For the next version, we will add a new ‘autoSuggest’ boolean property.

Best regards,
Markov

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

[Author]

Posts