Grid - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
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.

This tutorial demonstrates how to replace the default icons in Smart.Grid action buttons with your own custom icons.

Step 1: Prepare Your Custom Icon Font

Before you can use custom icons in Smart.Grid, you need an icon font that contains your desired icons. Popular tools for generating icon fonts include IcoMoon and Fontello. Once you have your font:

  • Include the font in your project.
  • Note the font-family name.
  • Identify the Unicode values or ligature names for each icon.

Step 2: Include the Font in Your Project

Reference your icon font in HTML. For example:

<link rel="stylesheet" href="path/to/custom-icons.css">

In our example, we used the Material icons from https://fonts.googleapis.com/css2?family=Material+Icons

Step 3: Replace a Grid icon

Use CSS to map your custom icons to Smart.Grid actions

html, body { padding: 10px; }

smart-grid {
    width: 100%;
    height: 600px;
}
smart-grid .smart-action-button div {
    border:none !important;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    text-transform: none;

    /* required for Material Icons */
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
}
smart-grid .smart-action-button div:before {
 content: "menu";
    font-family: "Material Icons";
  border: none !important;
  background: inherit !important;
  
}
smart-grid .smart-action-button div:after {
  display: none;
   border: none !important;
}

.smart-grid-icon.smart-sort-button {
  font-family: 'Material Icons';
  --smart-icon-arrow-down: 'arrow_downward'
}

Step 4: Configure Your Grid

Create a Smart.Grid and enable command columns or toolbar actions. Example:

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

componentRef.current.dataSource = [
{ id: 1, name: 'Apple', price: 1.2 },
{ id: 2, name: 'Banana', price: 0.8 }
];

componentRef.current.columns = [
	{ label: 'ID', dataField: 'id' },
	{ label: 'Name', dataField: 'name' },
	{ label: 'Price', dataField: 'price' }
];

componentRef.current.sorting = {
  enabled: true
}

componentRef.current.editing = {
	enabled: true,
	mode: 'row'
};

Step 5: Verify Your Icons

Open your page in a browser and verify that each action button displays the correct custom icon. Adjust the font size or spacing as needed using CSS.

Tips and Best Practices

  • You can use different icons for toolbar and command column buttons by adjusting your CSS selectors.
  • If your icons are ligatures, ensure content matches the icon name; for Unicode icons, use the corresponding code.
  • Use !important if your theme overrides it.
  • Maintain a consistent icon size for a clean UI.
Now, let's modify the Sort icon. In order to do that, we need to override the .smart-sort-button CSS class and set the font-family to our Custom icons class. Then set a new value to the CSS variable used for applying an icon. 
.smart-grid-icon.smart-sort-button {
  font-family: 'Material Icons';
  --smart-icon-arrow-down: 'arrow_downward'
}
For AI tooling

Developer Quick Reference

Topic: grid-custom-icons   Component: Grid   Framework: React

Main methods: (none detected)

Common config keys: (none detected)

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.