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.

The Grid's header and footer options allow you to add your own components to the grid's header and footer.

Grid Footer

To turn on the Grid's footer, you can use the footer property. The code sample below shows how to show a footer and apply a custom rendering to it.

footer: {
	visible: true,
	template: (element) => {
		element.innerHTML = `<div style="display: flex; height: 100%;">
			<smart-button>Save</smart-button>
		</div>`
	}
}	
	

Another way is to use HTMLTemplateElement. For example:

<template id="footerTemplate">
	<div>
		<smart-button>
			Click Me
		</smart-button>
	</div>
</template>

and the footer property will look like that:

footer: {
	visible: true,
	template: '#footerTemplate'
}	

Grid Header

Similarly to the footer, the header is enabled by using the header property.

header: {
	visible: true,
	template: '#headerTemplate'
}	

The Grid has built-in header template, so if you do not set the template property, the default haeder template will be displayed with options to sort, filter, group, search and customize columns. The header.buttons property determines which buttons in the header will be displayed. The list with buttons is ['columns', 'filter', 'group', 'sort', 'format', 'search'].