React - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com

Using with React

1. Installation

The easiest way to start with React is to use create-react-app. To scaffold your project structure, follow the installation instructions.

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

2. Preparation

Open src/App.js andsrc/App.css

  1. Remove everything inside the App div tag in src/App.js:
    <div className="App"> </div>
  2. Remove the logo.svg import
  3. Remove the contents of src/App.css
  4. Remove src/logo.svg

3. Setup

Smart UI for React is distributed as smart-webcomponents-react NPM package

  1. Download and install the package.
    npm install smart-webcomponents-react

2. Add the React Component in src/app.js

import { Accordion, AccordionItem } from 'smart-webcomponents-react/accordion';
import 'smart-webcomponents-react/source/styles/smart.default.css';


3. Add the HTML for the Accordion in src/app.js

app.js

 <Accordion>  
   <AccordionItem label="First Item">First Item Content.</AccordionItem>  
   <AccordionItem label="Second Item">Second Item Content.</AccordionItem>  
   <AccordionItem label="Third Item">Third Item Content.</AccordionItem>  
   <AccordionItem label="Fourth Item">Fourth Item Content.</AccordionItem>  
 </Accordion>  

Start the app with
npm start
and open localhost:3000 in your favorite web browser to see the output below:

Create React App The full source code:
import React from 'react';
import './App.css';
import { Accordion, AccordionItem } from 'smart-webcomponents-react/accordion';
import 'smart-webcomponents-react/source/styles/smart.default.css';

function App() {
  return (
	<Accordion>  
	   <AccordionItem label="First Item">First Item Content.</AccordionItem>  
	   <AccordionItem label="Second Item">Second Item Content.</AccordionItem>  
	   <AccordionItem label="Third Item">Third Item Content.</AccordionItem>  
	   <AccordionItem label="Fourth Item">Fourth Item Content.</AccordionItem>  
	</Accordion>  
  );
}

export default App;
 

app.css

 @import '../node_modules/smart-webcomponents-react/source/styles/smart.default.css';

Adding Grid

Now, let's build a more advanced example with our Grid component. The Smart.Grid for React is the industry's best data grid component, covering features such as paging, sorting, filtering, editing, grouping, localization. excel and pdf export, import from excel, printing, charting, etc.

Let's add a Smart.Grid component and enable columns hierarchy, sorting, paging, multiple cells selection, column resize and editing.

Add the code below to create a Grid bound to a list of people.

<Grid
	dataSource={this.dataSource}
	columns={this.columns}
	columnGroups={this.columnGroups}
	appearance={this.appearance}
	behavior={this.behavior}
	selection={this.selection}
	paging={this.paging}
	pager={this.pager}
	sorting={this.sorting}
	editing={this.editing}
	ref="grid">
</Grid>

The Grid is databound to a dataAdapter instance which acts as a bridge between the Data and the Smart.Grid for React.
dataSource = new Smart.DataAdapter({
	dataSource: GetData(500),
	dataFields: [
		'id: number',
		'firstName: string',
		'lastName: string',
		'productName: string',
		'quantity: number',
		'price: number',
		'total: number'
	]
})

And this is the GetData function which generates the client-side data.
export function GetData(rowscount, last, hasNullValues) {
	const data = [];

	if (rowscount === undefined) {
		rowscount = 100;
	}

	let startIndex = 0;

	if (last) {
		startIndex = rowscount;
		rowscount = last - rowscount;
	}

	const firstNames =
		[
			'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
		];

	const lastNames =
		[
			'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
		];

	const productNames =
		[
			'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Caramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
		];

	const priceValues =
		[
			'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
		];

	for (let i = 0; i < rowscount; i++) {
		const row = {};

		const productindex = Math.floor(Math.random() * productNames.length);
		const price = parseFloat(priceValues[productindex]);
		const quantity = 1 + Math.round(Math.random() * 10);

		row.id = startIndex + i;
		row.reportsTo = Math.floor(Math.random() * firstNames.length);

		if (i % Math.floor(Math.random() * firstNames.length) === 0) {
			row.reportsTo = null;
		}

		row.available = productindex % 2 === 0;

		if (hasNullValues === true) {
			if (productindex % 2 !== 0) {
				const random = Math.floor(Math.random() * rowscount);
				row.available = i % random === 0 ? null : false;
			}
		}

		row.firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
		row.lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
		row.name = row.firstName + ' ' + row.lastName;
		row.productName = productNames[productindex];
		row.price = price;
		row.quantity = quantity;
		row.total = price * quantity;

		const date = new Date();
		date.setFullYear(2016, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
		date.setHours(0, 0, 0, 0);
		row.date = date;

		data[i] = row;
	}

	return data;
}

Below is the columns initialization code. Each column should have "label" and "dataField" props. "label" defines the header text, "dataField" defines the databinding in the data source. "columnGroup" is the parent column group name. The columnGroups array defines the column grouping headers. In our case "First Name" and "Last Name" will have a header called "Name", the "Product", "Quantity", "Unit Price" and "Total" columns will have a header called "Order".


columns = [{
	label: 'First Name',
	dataField: 'firstName',
	columnGroup: 'name'
},
{
	label: 'Last Name',
	dataField: 'lastName',
	columnGroup: 'name'
},
{
	label: 'Product',
	dataField: 'productName',
	columnGroup: 'order'
},
{
	label: 'Quantity',
	dataField: 'quantity',
	columnGroup: 'order'
},
{
	label: 'Unit Price',
	dataField: 'price',
	cellsFormat: 'c2',
	columnGroup: 'order',
	formatFunction(settings) {
		if (settings.value >= 4) {
			settings.cell.background = '#00A45A';
			settings.cell.color = '#fff';
		} else if (settings.value < 2) {
			settings.cell.background = '#DF3800';
			settings.cell.color = '#fff';
		} else {
			settings.cell.background = '#FFFDE1';
			settings.cell.color = '#333';
		}
		settings.value = '$' + Number(settings.value).toFixed(2);
	}
},
{
	label: 'Total',
	dataField: 'total',
	cellsFormat: 'c2',
	columnGroup: 'order',
	formatFunction(settings) {
		if (settings.value >= 20) {
			settings.cell.background = '#00A45A';
			settings.cell.color = '#fff';
		}
		if (settings.value <= 5) {
			settings.cell.background = '#DF3800';
			settings.cell.color = '#fff';
		} else {
			settings.cell.background = '#FFFDE1';
			settings.cell.color = '#333';
		}
		settings.value = '$' + Number(settings.value).toFixed(2);
	}
}
]

columnGroups = [{
	label: 'Customer Name',
	align: 'center',
	name: 'name'
},
{
	label: 'Order Detals',
	align: 'center',
	name: 'order'
}
]

Now lets enable resizing, selection, editing and paging in our React Grid.


behavior = {
	columnResizeMode: 'growAndShrink'
}

appearance = {
	alternationCount: 2,
	showRowHeader: true,
	showRowHeaderSelectIcon: true,
	showRowHeaderFocusIcon: true
}

paging = {
	enabled: true
}

pager = {
	visible: true
}

sorting = {
	enabled: true
}

editing = {
	enabled: true
}

selection = {
	enabled: true,
	allowCellSelection: true,
	allowRowHeaderSelection: true,
	allowColumnHeaderSelection: true,
	mode: 'extended'
}

To enable sorting, editing and paging we define objects and set the Grid's "enabled" property to true. The appearance object defines alternating rows appearance. showRowHeader displays the row header cells and the showRowHeaderSelectIcon and showRowHeaderFocusIcon define the row header cells style when the row is selected or focused. The selection object defines a cells selection and enables the row and column headers selection.

Create React App with Grid The full code for the example:
import React from "react";
import ReactDOM from "react-dom";
import { Smart, Grid } from 'smart-webcomponents-react/grid';
import { GetData } from './data'
import 'smart-webcomponents-react/source/styles/smart.default.css';

class App extends React.Component {
	behavior = {
		columnResizeMode: 'growAndShrink'
	}

	appearance = {
		alternationCount: 2,
		showRowHeader: true,
		showRowHeaderSelectIcon: true,
		showRowHeaderFocusIcon: true
	}

	paging = {
		enabled: true
	}

	pager = {
		visible: true
	}

	sorting = {
		enabled: true
	}

	editing = {
		enabled: true
	}

	selection = {
		enabled: true,
		allowCellSelection: true,
		allowRowHeaderSelection: true,
		allowColumnHeaderSelection: true,
		mode: 'extended'
	}

	dataSource = new Smart.DataAdapter({
		dataSource: GetData(500),
		dataFields: [
			'id: number',
			'firstName: string',
			'lastName: string',
			'productName: string',
			'quantity: number',
			'price: number',
			'total: number'
		]
	})

	columns = [{
		label: 'First Name',
		dataField: 'firstName',
		columnGroup: 'name'
	},
	{
		label: 'Last Name',
		dataField: 'lastName',
		columnGroup: 'name'
	},
	{
		label: 'Product',
		dataField: 'productName',
		columnGroup: 'order'
	},
	{
		label: 'Quantity',
		dataField: 'quantity',
		columnGroup: 'order'
	},
	{
		label: 'Unit Price',
		dataField: 'price',
		cellsFormat: 'c2',
		columnGroup: 'order',
		formatFunction(settings) {
			if (settings.value >= 4) {
				settings.cell.background = '#00A45A';
				settings.cell.color = '#fff';
			} else if (settings.value < 2) {
				settings.cell.background = '#DF3800';
				settings.cell.color = '#fff';
			} else {
				settings.cell.background = '#FFFDE1';
				settings.cell.color = '#333';
			}
			settings.value = '$' + Number(settings.value).toFixed(2);
		}
	},
	{
		label: 'Total',
		dataField: 'total',
		cellsFormat: 'c2',
		columnGroup: 'order',
		formatFunction(settings) {
			if (settings.value >= 20) {
				settings.cell.background = '#00A45A';
				settings.cell.color = '#fff';
			}
			if (settings.value <= 5) {
				settings.cell.background = '#DF3800';
				settings.cell.color = '#fff';
			} else {
				settings.cell.background = '#FFFDE1';
				settings.cell.color = '#333';
			}
			settings.value = '$' + Number(settings.value).toFixed(2);
		}
	}
	]

	columnGroups = [{
		label: 'Customer Name',
		align: 'center',
		name: 'name'
	},
	{
		label: 'Order Detals',
		align: 'center',
		name: 'order'
	}
	]

	componentDidMount() {

	}

	render() {
		return (
			<div>
				<Grid
					dataSource={this.dataSource}
					columns={this.columns}
					columnGroups={this.columnGroups}
					appearance={this.appearance}
					behavior={this.behavior}
					selection={this.selection}
					paging={this.paging}
					pager={this.pager}
					sorting={this.sorting}
					editing={this.editing}
					ref="grid">
				</Grid>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.querySelector("#root"));

export default App;