Installation

First, we need to create React project. To do so, we are going to use Vite. For more information about Vite, navigate here

Run the following command to generate React template project:

npm create vite@latest smart-app -- --template react

Next, as shown in the console, run

cd smart app

npm install

This will install the dependecies of our React project.

Now, clear App.css and index.css

After that, clear App.jsx and leave it empty this way:

import './App.css'

function App() {
  return (
    <></>
  )
}

export default App

Add SmartUI

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

Download it with the following command:

npm install smart-webcomponents-react

The first thing after installing the package is to add the CSS of SmartUI

Open App.jsx and add this import:

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

Everything is ready, we can add our desired components!

Add Accordion Component

Let's start simple, we will add Smart.Accordion

First, in App.jsx we have to import it:

import { Accordion, AccordionItem } from 'smart-webcomponents-react/accordion';

Add the corresponding tags, the component should look like this:

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

import { Accordion, AccordionItem } from 'smart-webcomponents-react/accordion';

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

Run the start script to see the result:

npm run dev

The result will be the following:

First Item Content.

Second Item Content.

Third Item Content.

Fourth Item Content.

For production build, add this to the vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    commonjsOptions: { transformMixedEsModules: true } // Change
  }
})

Add Grid Component

We will continue with a more advanced component: Smart.Grid. More information about the Grid here.

Smart.Grid represents a Data Grid component which displays tabular data. It allows you to sort, filter, edit, group the data. With the Smart.Grid, users can Freeze Rows and Columns, Resize Rows and Columns, Select like in Excel, Display Custom Templates in Cells and much more.

Import it from the package:

import { Smart, Grid } from 'smart-webcomponents-react/accordion';

Our Grid will be bound to a list of people. Our Grid will have enabled sorting, paging, multiple cells selection, column resize and editing.

Our template will look like this:

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

Since we have some properties, we have to add them in our component. The Data is bridged to Smart.Grid using Smart.DataAdapter. This should be the dataSource:

const dataSource = new Smart.DataAdapter({
    dataSource:
      [{ "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte" },
      { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte" },
      { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea" },
      { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte" },
      { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna" },
      { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },
      { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte" },
      { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano" },
      { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna" },
      { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea" },
      { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle" },
      { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist" },
      { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha" }],
    dataFields: [
      'firstName: string',
      'lastName: string',
      'productName: string'
    ]
  });

As you can see, there is a property dataSource, where the data is passed to and an array of dataFields in which the type of the fields is declared.

The next property of Smart.Grid is columns. This should be an array where each column is described. The most basic configuration is a label to be displayed in the header of the Grid and a data field to which the column will be bound.

const columns = [
    {
      label: 'First Name',
      dataField: 'firstName'
    },
    {
      label: 'Last Name',
      dataField: 'lastName'
    },
    {
      label: 'Product',
      dataField: 'productName'
    }
  ]

Enabling the resizing, sorting, paging, selection and editing is done this way:

const behavior = {
    columnResizeMode: 'growAndShrink'
  }

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

const paging = {
    enabled: true
  }

const pager = {
    visible: true
  }

const sorting = {
    enabled: true
  }

const editing = {
    enabled: true
  }

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

Our Smart.Grid is ready, the full component code is:

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

import { Smart, Grid } from 'smart-webcomponents-react/grid';

function App() {

  const dataSource = new Smart.DataAdapter({
    dataSource:
      [{ "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte" },
      { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte" },
      { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea" },
      { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte" },
      { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna" },
      { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },
      { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte" },
      { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano" },
      { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna" },
      { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea" },
      { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle" },
      { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist" },
      { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha" }],
    dataFields: [
      'firstName: string',
      'lastName: string',
      'productName: string'
    ]
  });

  const columns = [
    {
      label: 'First Name',
      dataField: 'firstName'
    },
    {
      label: 'Last Name',
      dataField: 'lastName'
    },
    {
      label: 'Product',
      dataField: 'productName'
    }
  ]

  const behavior = {
    columnResizeMode: 'growAndShrink'
  }

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

  const paging = {
    enabled: true
  }

  const pager = {
    visible: true
  }

  const sorting = {
    enabled: true
  }

  const editing = {
    enabled: true
  }

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

  return (
    <Grid
    dataSource={dataSource}
    columns={columns}
    appearance={appearance}
    behavior={behavior}
    selection={selection}
    paging={paging}
    pager={pager}
    sorting={sorting}
    editing={editing}
    >
    </Grid >
  )
}

export default App

The result of our code is this:

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { commonjsOptions: { transformMixedEsModules: true } // Change } })

Complex Components

Core Components

Using SmartUI with React - Getting Started with Vite

Installation

Add SmartUI

Add Accordion Component

Add Grid Component