Grid Row Sort
JavaScriptJavaScriptAngularAngularVueVueReactReact

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.

Row Drag

You can drag rows and reorder rows in the Grid. The following properties should be set to enable row dragging. 

behavior: {
	allowRowReorder: true
},
appearance: {
	showRowHeader: true,
	showRowHeaderDragIcon: true
}


The 'rowDragStart', 'rowDragging', 'rowDragEnd' and 'rowReorder' events occur during the drag and drop process.
The following example shows how to implement drag and drop of rows between two Grid instances.

For AI tooling

Developer Quick Reference

Topic: grid-row-reorder   Component: Grid   Framework: React

Main methods: (none detected)

Common config keys: behavior, appearance

Implementation Notes

Compatibility: React 19+   API access pattern: const componentRef = useRef(null) + componentRef.current.method()

Lifecycle guidance: Use useMemo for large config objects and call imperative API through componentRef.current after first render.

Common pitfalls:

  • Recreating columns/dataSource objects on every render can reset component state.
  • Calling API methods before ref is available causes runtime errors.
  • Mixing controlled and imperative updates without sync can lead to stale UI.

Validation checklist:

  • Keep config objects memoized when possible.
  • Guard API calls with ref existence checks.
  • Verify CSS theme import is present once per app.