Getting Started with Grid Web Component

Smart UI Web Components work with current evergreen browsers and Node 18+ for local tooling; pin package versions to match your project policy.

Smart UI is distributed as the smart-webcomponents NPM package. You can also use the full download from the Download page.

Quick start

1. Install the package:
   
   

   npm install smart-webcomponents

   
   
2. Load the Grid module (ES module script):
   
   

   <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.grid.js"></script>

   
   Smart.Grid supports also module-first integration. Learn more: Data Grid Modularity
   
3. Add the default stylesheet (prefer angular.json / bundler entry in app codebases; for plain HTML use a link):
   
   

   <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

   
   
4. Basic Setup

<smart-grid id="grid" editable sortable filterable selectable></smart-grid>

<script type="module">
  const grid = document.querySelector('#grid');

  grid.columns = [
    { label: 'Name', dataField: 'name' },
    { label: 'Age', dataField: 'age', dataType: 'number' },
    { label: 'Country', dataField: 'country', editor: 'list' }
  ];

  grid.dataSource = [
    { name: 'John', age: 30, country: 'USA' },
    { name: 'Jane', age: 25, country: 'Canada' },
    { name: 'Bob', age: 35, country: 'UK' },
    { name: 'Alice', age: 28, country: 'USA' },
    { name: 'Tom', age: 32, country: 'Canada' },
    { name: 'Sara', age: 27, country: 'UK' },
    { name: 'Mike', age: 40, country: 'USA' },
    { name: 'Emily', age: 22, country: 'Canada' },
    { name: 'David', age: 38, country: 'UK' },
    { name: 'Anna', age: 26, country: 'USA' },
    { name: 'James', age: 31, country: 'Canada' }
  ];
</script>
		

5. Add markup in one of two ways - semantic custom element (the component tag is in your HTML) or a host div (you mount programmatically with appendTo):
   
   

   Semantic element (id matches the selector in Smart()):

   <smart-grid id="grid"></smart-grid>

   
   

   Host container (id matches appendTo on Smart.Grid):

   <div id="gridContainer"></div>

   
   
6. Initialize after the module loads: define a const gridOptions object, then either bind with Smart('#grid', ...) on the semantic tag or use new Smart.Grid({ ...gridOptions, appendTo: '#gridContainer' }) on the host div:
   
   

   <script type="module">
   	import 'node_modules/smart-webcomponents/source/modules/smart.grid.js';
   
   	const gridOptions = {
   		dataSource: [{
   			id: 1,
   			firstName: 'Andrew',
   			lastName: 'Fuller',
   			productName: 'Black Tea',
   			available: true,
   			date: '2026-01-01',
   			quantity: 10,
   			price: 2.5,
   			total: 25
   		},
   		{
   			id: 2,
   			firstName: 'Nancy',
   			lastName: 'Davolio',
   			productName: 'Green Tea',
   			available: false,
   			date: '2026-01-01',
   			quantity: 5,
   			price: 3.0,
   			total: 15
   		},
   		{
   			id: 3,
   			firstName: 'John',
   			lastName: 'Doe',
   			productName: 'White Tea',
   			available: true,
   			date: '2026-01-01',
   			quantity: 8,
   			price: 2.0,
   			total: 16
   		}
   		],
   		dataSourceSettings: {
   			dataFields: [
   				'id: number',
   				'firstName: string',
   				'lastName: string',
   				'productName: string',
   				'available: boolean',
   				'date: date',
   				'quantity: number',
   				'price: number',
   				'total: number'
   			]
   		},
   		selectable: true,
   		sortable: true,
   		filterable: true,
   		columnResize: true,
   		editable: true,
   		columns: [
   			{
   				label: 'First Name', dataField: 'firstName', editor: {
   					required: true,
   					template: 'input'
   				}
   			},
   			{
   				label: 'Last Name', dataField: 'lastName', editor: {
   					required: true,
   					template: 'input'
   				}
   			},
   			{
   				label: 'Product', width: 200, dataField: 'productName', editor: {
   					required: true,
   					template: 'dropDownList'
   				}
   			},
   			{ label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
   			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
   			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
   		]
   	};
   
   	// Option A - semantic <smart-grid> with id="grid"
   	Smart('#grid', class {
   		get properties() {
   			return gridOptions;
   		}
   	});
   
   	// Option B - host div id="gridContainer"
   	// const gridInstance = new Smart.Grid({
   	// 	...gridOptions,
   	// 	appendTo: '#gridContainer'
   	// });
   
   	// Option C - constructor(selector, options), then append the returned element yourself
   	// const myGrid = new Smart.Grid('#grid', gridOptions);
   	// document.body.appendChild(myGrid);
   </script>
   		

   
   

   Uncomment Option B when you use the host div; use Option A when you use the semantic element. The Runtime cookbook also documents new Smart.Grid('#grid', gridOptions) with appendChild, and document.createElement('smart-grid') with .props or Object.assign (all are valid patterns; do not combine overlapping patterns for the same instance unless you intend multiple components).

7. Serve the folder over HTTP (or use your bundler dev server) and open the page.

Grid example: Dynamic data

Grid example: options object and appendTo

For grids you typically pass sorting, filtering, columns, and dataSource in one object and mount with appendTo (see also the Grid demos for editing, custom cell templates, and menus).

<div id="gridContainer"></div>

<script type="module">
	import 'node_modules/smart-webcomponents/source/modules/smart.grid.js';

	const grid = new Smart.Grid({
		sorting: { enabled: true, mode: 'many' },
		filtering: { enabled: true, filterRow: { visible: true } },
		appearance: { showColumnIcon: true },
		behavior: { columnResizeMode: 'growAndShrink' },
		columns: [
			{ label: 'First Name', dataField: 'firstName' },
			{ label: 'Last Name', dataField: 'lastName' },
			{ label: 'Product', dataField: 'productName' },
			{ label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right' },
			{ label: 'Unit Price', dataField: 'price', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
			{ label: 'Total', dataField: 'total', align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }
		],
		dataSource: [
			{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Espresso', quantity: 1, price: 3.2, total: 3.2 },
			{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Green Tea', quantity: 2, price: 2.5, total: 5 }
		],
		layout: { rowHeight: 45 },
		dataSourceSettings: {
			dataFields: [
				{ name: 'firstName', dataType: 'string' },
				{ name: 'lastName', dataType: 'string' },
				{ name: 'productName', dataType: 'string' },
				{ name: 'quantity', dataType: 'number' },
				{ name: 'price', dataType: 'number' },
				{ name: 'total', dataType: 'number' }
			]
		},
		appendTo: '#gridContainer'
	});
</script>

Runtime cookbook

Alternative creation patterns and imperative APIs. These are all valid ways to create Smart UI components: semantic markup + Smart(); new Smart.Grid({ ...options, appendTo: '#...' }); new Smart.Grid('#grid', options) plus appendChild on the returned element; and document.createElement('smart-grid') then assigning options via .props (Grid and other Smart UI tags) or Object.assign on the element.

Constructor with a selector string and options, then append the returned element (for example const myGrid = new Smart.Grid('#grid', gridOptions)):

	const gridOptions = {
		dataSource: [{
			id: 1,
			firstName: 'Andrew',
			lastName: 'Fuller',
			productName: 'Black Tea',
			available: true,
			date: '2026-01-01',
			quantity: 10,
			price: 2.5,
			total: 25
		},
		{
			id: 2,
			firstName: 'Nancy',
			lastName: 'Davolio',
			productName: 'Green Tea',
			available: false,
			date: '2026-01-01',
			quantity: 5,
			price: 3.0,
			total: 15
		},
		{
			id: 3,
			firstName: 'John',
			lastName: 'Doe',
			productName: 'White Tea',
			available: true,
			date: '2026-01-01',
			quantity: 8,
			price: 2.0,
			total: 16
		}
		],
		dataSourceSettings: {
			dataFields: [
				'id: number',
				'firstName: string',
				'lastName: string',
				'productName: string',
				'available: boolean',
				'date: date',
				'quantity: number',
				'price: number',
				'total: number'
			]
		},
		selectable: true,
		sortable: true,
		filterable: true,
		columnResize: true,
		editable: true,
		columns: [
			{
				label: 'First Name', dataField: 'firstName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Last Name', dataField: 'lastName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Product', width: 200, dataField: 'productName', editor: {
					required: true,
					template: 'dropDownList'
				}
			},
			{ label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
		]
	};
	const myGrid = new Smart.Grid('#grid', gridOptions);
	document.body.appendChild(myGrid);
	

Create with document.createElement('smart-grid'), assign your options to .props (Smart UI web components), then append:

	const gridOptions = {
		dataSource: [{
			id: 1,
			firstName: 'Andrew',
			lastName: 'Fuller',
			productName: 'Black Tea',
			available: true,
			date: '2026-01-01',
			quantity: 10,
			price: 2.5,
			total: 25
		},
		{
			id: 2,
			firstName: 'Nancy',
			lastName: 'Davolio',
			productName: 'Green Tea',
			available: false,
			date: '2026-01-01',
			quantity: 5,
			price: 3.0,
			total: 15
		},
		{
			id: 3,
			firstName: 'John',
			lastName: 'Doe',
			productName: 'White Tea',
			available: true,
			date: '2026-01-01',
			quantity: 8,
			price: 2.0,
			total: 16
		}
		],
		dataSourceSettings: {
			dataFields: [
				'id: number',
				'firstName: string',
				'lastName: string',
				'productName: string',
				'available: boolean',
				'date: date',
				'quantity: number',
				'price: number',
				'total: number'
			]
		},
		selectable: true,
		sortable: true,
		filterable: true,
		columnResize: true,
		editable: true,
		columns: [
			{
				label: 'First Name', dataField: 'firstName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Last Name', dataField: 'lastName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Product', width: 200, dataField: 'productName', editor: {
					required: true,
					template: 'dropDownList'
				}
			},
			{ label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
		]
	};
	const grid = document.createElement('smart-grid');
	grid.props = gridOptions;
	document.body.appendChild(grid);
	

Host on a div with appendTo (import the module, then instantiate when the document is ready; the container id must match appendTo):

	import "../../source/modules/smart.grid.js";

	document.readyState === 'complete' ? init() : window.addEventListener('load', init);

	function init() {
		const gridOptions = {
		dataSource: [{
			id: 1,
			firstName: 'Andrew',
			lastName: 'Fuller',
			productName: 'Black Tea',
			available: true,
			date: '2026-01-01',
			quantity: 10,
			price: 2.5,
			total: 25
		},
		{
			id: 2,
			firstName: 'Nancy',
			lastName: 'Davolio',
			productName: 'Green Tea',
			available: false,
			date: '2026-01-01',
			quantity: 5,
			price: 3.0,
			total: 15
		},
		{
			id: 3,
			firstName: 'John',
			lastName: 'Doe',
			productName: 'White Tea',
			available: true,
			date: '2026-01-01',
			quantity: 8,
			price: 2.0,
			total: 16
		}
		],
		dataSourceSettings: {
			dataFields: [
				'id: number',
				'firstName: string',
				'lastName: string',
				'productName: string',
				'available: boolean',
				'date: date',
				'quantity: number',
				'price: number',
				'total: number'
			]
		},
		selectable: true,
		sortable: true,
		filterable: true,
		columnResize: true,
		editable: true,
		columns: [
			{
				label: 'First Name', dataField: 'firstName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Last Name', dataField: 'lastName', editor: {
					required: true,
					template: 'input'
				}
			},
			{
				label: 'Product', width: 200, dataField: 'productName', editor: {
					required: true,
					template: 'dropDownList'
				}
			},
			{ label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
			{ label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
			{ label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
		]
	};
		const grid = new Smart.Grid({
			...gridOptions,
			appendTo: '#gridContainer'
		});
	}
	

Append to the DOM:

const container = document.getElementById('grid-container');
container.appendChild(grid);
	

Remove from the DOM:

grid.remove();
	

Set a property:

grid.disabled = true;
grid.theme = 'dark';
	

Get a property value:

const isDisabled = grid.disabled;
const currentTheme = grid.theme;
	

Invoke a method:

grid.refresh();
grid.focus();
	

Add event listener:

grid.addEventListener('change', (event) => {
    const { value, oldValue } = event.detail;
    console.log(`Value changed from ${oldValue} to ${value}`);
});
	

Remove event listener:

const handleChange = (event) => {
    console.log('Changed:', event.detail);
};

grid.addEventListener('change', handleChange);
grid.removeEventListener('change', handleChange);
	

Common Use Cases

• Load data from REST API

  Fetch JSON data and bind to the grid dynamically

  const response = await fetch('/api/data');
  const data = await response.json();
  grid.dataSource = data;

• Enable inline cell editing

  Allow users to edit cells directly in the grid

  grid.editing = { enabled: true, mode: 'cell' };

• Export to Excel

  Export grid data to an Excel file

  grid.exportData('xlsx', 'GridExport');

• Apply column filtering

  Enable filter row for column-based filtering

  grid.filtering = { enabled: true, filterRow: { visible: true } };

Troubleshooting

How do I create the grid programmatically?

Use new Smart.Grid({ ...options, appendTo: '#containerId' }) or document.createElement('smart-grid') and set properties via .props or Object.assign().

Accessibility

The Grid component follows WAI-ARIA best practices:

• Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
• ARIA roles - Appropriate roles and labels are applied automatically
• Focus management - Visible focus indicators for keyboard users
• Screen readers - State changes are announced to assistive technology
• High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

Related Components

• Table
• CardView
• QueryBuilder
• Pager

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.