JavaScriptAngularVueReact

Grid for React

React version of this topic (compatible with React 19+). Keep the same configuration logic from JavaScript and pass it as component props.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import React, { useMemo, useRef } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';
import 'smart-webcomponents-react/source/styles/smart.default.css';

export default function App() {
  const componentRef = useRef(null);
  const componentProps = useMemo(() => ({
    // Copy this topic's JavaScript configuration here.
  }), []);

  return <Grid ref={componentRef} {...componentProps}></Grid>;
}

Use componentRef.current for API methods in this topic.

Grid Users

The Grid component has built-in dialogs for 'comments', 'history' of edits and support for multiple users. For example, if you create a web app with a Grid, you may want to track which user edited something or enable comments between the users. In order to handle such use-case scenarios, the users and currentUser properties are available.
Example:

currentUser: 0,
users: [
	{ id: 0, color: '#8E24AA', name: 'Andrew', image: '../../images/people/andrew.png' },
	{ id: 1, color: '#41B883', name: 'Anne', image: '../../images/people/anne.png' },
	{ id: 2, color: '#53B9E6', name: 'Janet', image: '../../images/people/janet.png' },
	{ id: 3, color: '#FFCD42', name: 'John', image: '../../images/people/john.png' },
	{ id: 4, color: '#DD5347', name: 'Laura', image: '../../images/people/laura.png' }
]
	

See example with multiple users: https://www.htmlelements.com/demos/grid/users/.


Dialog with comments section



After doing some edits in the Grid