React is one of the most popular Javascript libraries. We are working hard on releasing Smart UI for React. Smart UI for React will be a collection of React Components, which you can use to build feature rich, native React apps. These React components are built for business applications and include features such as Localization, Accessibility and Right-to-left layouts support.
The following demonstrates how to create a React Grid component with Smart UI for React:
);
}
}
ReactDOM.render(, document.querySelector("#root"));
export default App;
The following demonstrates how to create a React Grid component with Smart UI for React:
import React from "react"; import ReactDOM from "react-dom"; import { Smart, Grid } from 'smart-webcomponents-react/grid'; import { GetData } from './common/data' 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) { const rowId = settings.row; const columnDataField = settings.column; const template = settings.template; if (settings.value >= 4) { settings.cell.background = '#00A45A'; settings.cell.color = '#fff'; } else if (settings.value = 20) { settings.cell.background = '#00A45A'; settings.cell.color = '#fff'; } if (settings.valueThe Grid in this demo displays data in a series of rows and columns. This is the simplest case when the Grid is bound to a local data source.
Online Demo: React Grid
The post Do you like React? Smart UI for React is coming soon appeared first on HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com.