Demos

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/table-css/

Best regards,
Markov

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

[admin]

Hi,

You need to set the dataSource property.

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

table.columns = [
  { label: 'Name', dataField: 'name' },
  { label: 'Age', dataField: 'age' }
];

table.dataSource = [
  { name: 'John', age: 30 },
  { name: 'Anna', age: 25 }
];

Best regards,
Markov

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

[admin]

Hi,

The feature is supported.

<smart-table id="table"></smart-table>
const table = document.getElementById('table');

table.virtualization = true;

Best regards,
Markov

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

[admin]

Hi,

Yes, it is possible. For example:

const table = document.querySelector('smart-table');

fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => {
    table.dataSource = data;
  });

Best regards,
Markov

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

[admin]

Hi,

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

Best regards,
Markov

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

[admin]

Hi,

Smart.Kanban uses templates, not standard <slot> elements.

You can define custom rendering via the template property (or column/task templates), which gives you full control over how cards look.

Example: Custom card template

kanban.taskTemplate = function (task) {
  return 

${task.text}

Owner: ${task.userId || ‘Unassigned’}

Priority: ${task.priority || ‘Normal’}

`;
};`

Best regards,
Markov

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

[admin]

Hi,

Inline task editing is supported in Smart Gantt.

Enable editing
<smart-gantt-chart editable></smart-gantt-chart>

What works out of the box
Task name → can be edited (usually via double-click)
Start/end dates → editable by dragging or resizing the task bar
Progress → adjustable via drag

This means users can modify tasks directly in the chart without an external form.

Best regards,
Markov

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

[admin]

Hi,

No, the component is client-side only.

Best regards,
Markov

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

[admin]

Hi,

You can use the native Javascript addEventListener method and bind to the ‘change’ event.

el.addEventListener('change', (event) => {
// your code here
});

Best regards,
Markov

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

[admin]

Hi,

You can do this:

const editor = document.querySelector(‘smart-editor’);

let timeout;

editor.addEventListener('change', () => {
  clearTimeout(timeout);

  // debounce (wait 1s after user stops typing)
  timeout = setTimeout(() => {
    const content = editor.getValue();

    // save somewhere (API or localStorage)
    saveContent(content);
  }, 1000);
});

function saveContent(data) {
  console.log('Autosaving...', data);

  // Example: send to backend
  // fetch('/save', {
  //   method: 'POST',
  //   body: JSON.stringify({ content: data })
  // });
}

Best regards,
Markov

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

[admin]

Hi,

Yes, it is possible.

seriesGroups: [
  {
    type: 'column', // bars
    series: [
      { dataField: 'sales', displayText: 'Sales' }
    ]
  },
  {
    type: 'line', // line
    series: [
      { dataField: 'trend', displayText: 'Trend' }
    ]
  }
]

Best regards,
Markov

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

[admin]

Hi,

No, the Grid is a client-side only UI component.

Regards,
Markov

[admin]

Hi,

The reported behavior could not be reproduced. Please, provide steps to reproduce and a link to a codepen example(if possible)

Regards,
Markov

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/css-variables/

Hope this helps.

Best regards,
Markov

[admin]

Hi,

Please, find an example below which shows the approach with React

// React Router + Smart.Scheduler state persistence example

import { useEffect, useRef } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import "smart-webcomponents-react/source/styles/smart.default.css";
import { Scheduler } from "smart-webcomponents-react/scheduler";

export default function SchedulerPage() {
  const schedulerRef = useRef(null);
  const navigate = useNavigate();
  const location = useLocation();

  // Restore state on load
  useEffect(() => {
    const scheduler = schedulerRef.current;

    const params = new URLSearchParams(location.search);

    if (params.get("view")) {
      scheduler.view = params.get("view");
    }

    if (params.get("date")) {
      scheduler.date = new Date(params.get("date"));
    }
  }, []);

  // Save state before navigation
  const goAway = () => {
    const scheduler = schedulerRef.current;

    const params = new URLSearchParams({
      view: scheduler.view,
      date: scheduler.date.toISOString()
    });

    navigate(<code>/other-page?${params.toString()}</code>);
  };

  return (
    <>
      <Scheduler ref={schedulerRef} />
      <button onClick={goAway}>Navigate</button>
    </>
  );
}

Regards,
Peter

[Author]

Posts