Demos

[admin]

Hi Emily,

The best way is to look at the https://www.htmlelements.com/demos/grid/leads-template/ and how we define the templates with buttons in the first column. By using this approach there would not be unnecessary re-renders.

Regards,
Markov

[admin]

Hi,

You can use the Chart’s refresh() method which basically redraws the chart taking into account data changes.

Regards,
Markov

[admin]

Hi,

Yes, it is possible to enable / disable features when you create the editor and also dynamically. Please, refer to https://www.htmlelements.com/docs/editor-api/ for additional details about the available options.

Regards,
Markov

[admin]

Hi,

All online demos are with it.

Regards,
Markov

[admin]

Hi,

You can try this:

React + Redux integration (realistic pattern)
1. Treat Smart Table as controlled

<Table
  dataSource={data}
  sortMode="one"
  filterable
  paging
  pageIndex={page}
  pageSize={pageSize}
  onSort={handleSort}
  onFilter={handleFilter}
  onPage={handlePage}
/>

Wire events, Redux

const handleSort = (e) => {
  dispatch({
    type: 'SET_SORT',
    payload: e.detail.sortColumns
  });
};

const handleFilter = (e) => {
  dispatch({
    type: 'SET_FILTER',
    payload: e.detail.filters
  });
};

const handlePage = (e) => {
  dispatch({
    type: 'SET_PAGE',
    payload: e.detail.pageIndex
  });
};

Trigger API calls from state changes

useEffect(() => {
  dispatch(fetchTableData());
}, [sort, filter, page, pageSize]);

Fetch with state applied

export const fetchTableData = () => async (dispatch, getState) => {
  const { sort, filter, page, pageSize } = getState().table;

  const query = new URLSearchParams({
    page,
    size: pageSize,
    sort: JSON.stringify(sort),
    filter: JSON.stringify(filter)
  });

  const res = await fetch(<code>/api/data?${query}</code>);
  const data = await res.json();

  dispatch({ type: 'SET_DATA', payload: data });
};

Regards,
Markov

[admin]

Hi,

It is possible, you can look at this https://www.htmlelements.com/demos/scheduler/filtering/

Regards,
Markov

[admin]

Hi,

It’s possible, you can try something like this:

async function loadTasks() {
  const res = await fetch('/api/tasks');
  const tasks = await res.json();

  kanban.dataSource = tasks; 
}

Regards,
Markov

[admin]

Hi,

To customize the grid lines in the Smart UI Chart, you need to configure axis-related options within the seriesGroups property. While the context provided does not show direct axis or grid line properties, Smart UI Chart typically allows grid line customization via axis options (such as valueAxis, xAxis, or similar, which may include properties for grid line color, width, and style).

What is missing?
The relevant properties for grid line customization (for example, grid line color, width, or dash style) are not explicitly listed in the provided context. You should inspect the seriesGroups object, particularly its axis options like valueAxis and xAxis for members such as:

gridLinesColor
gridLinesWidth
gridLinesDashStyle
These are likely where grid line appearance can be customized.

Example setup (Pseudocode):

<smart-chart
  id="chart"
  [dataSource]="data"
  [seriesGroups]="seriesGroups"
></smart-chart>

// In your script:
const seriesGroups = [
  {
    type: 'line',
    valueAxis: {
      gridLinesColor: '#cccccc',
      gridLinesWidth: 1,
      gridLinesDashStyle: '4,4' // dashed grid lines
    },
    series: [
      { dataField: 'value', displayText: 'Example Series' }
    ]
  }
];

To customize grid lines, look for grid line properties inside the corresponding axis object within seriesGroups. If you need specific member names, review the seriesGroups documentation for axis customization options.

regards,
Markov

[admin]

Hi,

You usually have to simulate two-way binding by explicitly syncing incoming props → editor state and editor changes → your app state, while guarding against loops and stale updates.

You can try this code:

function SmartEditorWrapper({ value, onChange }) {
  const editorRef = useRef(null);
  const lastValueRef = useRef(value);

  // Initialize editor once
  useEffect(() => {
    editorRef.current = createSmartEditor({
      content: value,
      onUpdate: (newContent) => {
        // prevent unnecessary updates
        if (newContent !== lastValueRef.current) {
          lastValueRef.current = newContent;
          onChange(newContent);
        }
      }
    });

    return () => editorRef.current?.destroy();
  }, []);

  // Sync external value → editor
  useEffect(() => {
    if (!editorRef.current) return;

    if (value !== lastValueRef.current) {
      lastValueRef.current = value;
      editorRef.current.setContent(value);
    }
  }, [value]);

  return <div id="editor-container" />;
}

Regards,
Peter

[admin]

Hi,

You can refer v25.5 from your website as well. Codepen is a public tool.

Regards,
Markov

[admin]

Hi,

Unfortunately, we are unable to reproduce this based on the provided information using both versions. Could you share a codepen sample and steps to follow here?

Regards,
Markov

[admin]

Hi,

The public smart.elements.js in the demos is with ver. 25. You can click the Edit in Codepen button of some of the Grid demos to try it out and then share an example and steps which show an issue. We were not able to run the provided code snippet.

Regards,
Markov

[admin]

Hi,

Batch edit is supported, please refer to https://www.htmlelements.com/demos/grid/editing-batch/

Regards,
Markov

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

[Author]

Posts