Grid StencilJS Integration

Using Smart.Grid with StencilJS Framework

This document provides a complete guide on how to build and use the Smart with the StencilJS Framework.

Prerequisities

  • Node.js
  • IDE (e.g. Visual Studio Code )

Setup development environment

  1. Create a new folder called stencil. From inside the folder open the Command prompt/Terminal and run the following command line to install the StencilJS framework:

    on Windows:

    npm init stencil
    

    on Linux:

    sudo npm i stencil
    
  2. When prompted for selection choose app ( we are going to create a simple application) and press Enter to continue.

    When finished, a new stencil Project will be created in the stencil folder.

Create a new StencilJS component

  1. Install the smart-webcomponents npm package in the application folder. From inside the project folder - stencil, type in the following command:
    npm i smart-webcomponents
    
  2. Create a new StencilJS component by running the following command from inside the project folder:
    stencil generate my-first-component
    

    The new component will be generated and placed inside the stencil/src/components.

    my-first-component.tsx file hosts the definition of our new component. Here's the component definition:

    import { Component, Prop, Host, h } from '@stencil/core';
    
    import { Grid, GridColumn, GridBehavior } from 'smart-webcomponents/source/typescript/smart.elements';
    
    import 'smart-webcomponents/source/components/smart.ui.grid.js';
    
    const w = window as any;
    
    @Component({
      tag: 'my-first-component',
      styleUrl: 'my-first-component.css',
      shadow: true
    })
    export class MyFirstComponent {
    	@Prop() columns: GridColumn[];
    	@Prop() behavior: GridBehavior;
    	@Prop() dataSource;
    	@Prop() appearance;
    	@Prop() paging;
    	@Prop() pager;
    	@Prop() sorting;
    	@Prop() editing;
    	@Prop() selection;
    	
      componentDidLoad() {
    	 this.appearance = {
    	  alternationCount: 2,
    	  showRowHeader: true,
    	  showRowHeaderSelectIcon: true,
    	  showRowHeaderFocusIcon: true
    	}
    
    	this.sorting = {
    	  enabled: true
    	}
    	this.editing = {
    	  enabled: true
    	}
    	this.selection = {
    	  enabled: true,
    	  allowCellSelection: true,
    	  allowRowHeaderSelection: true,
    	  allowColumnHeaderSelection: true,
    	  mode: 'extended'
    	}
    	this.columns = [
    	  { label: 'Id', dataField: 'CustomerID' },
    	  { label: 'Company Name', dataField: 'CompanyName' },
    	  { label: 'Contact Name', dataField: 'ContactName' },
    	  { label: 'Contact Title', dataField: 'ContactTitle' },
    	  { label: 'Address', dataField: 'Address' },
    	  { label: 'City', dataField: 'City' },
    	  { label: 'Country', dataField: 'Country' }
    	];
    	this.behavior = { columnResizeMode: 'growAndShrink' };
     	this.dataSource = new w.Smart.DataAdapter({
    	  dataSource: 'https://raw.githubusercontent.com/HTMLElements/smart-webcomponents/master/sampledata/customers.json',
    	  id: 'CustomerID',
    	  dataFields: ['CustomerID: string', 'CompanyName: string', 'ContactName: string', 'ContactTitle: string', 'Address: string', 'City: string', 'Country: string'],
    	});
      }
    
      render() {
        return (
          <Host>
            <smart-ui-grid appearance={this.appearance} sorting={this.sorting} selection={this.selection} editing={this.editing} behavior={this.behavior} dataSource={this.dataSource} columns={this.columns} id="grid"></smart-ui-grid>
          </Host>
        );
      }
    }
    

    Here we have a simple StencilJS component called my-first-component that contains a Smart.Grid component inside it's template

  3. Add the necessary CSS import for the Smart Components Library from the my-first-component.css file which is located in the same folder as the .tsx. Here's the content of the file:
    @import url("../../../node_modules/smart-webcomponents/source/styles/smart.default.css");
    
    @font-face {
      font-family: smart-icons;
      src: 
      url(assets/font/smart-icons.woff2) format('woff2'), 
      url(assets/font/smart-icons.woff) format('woff'), 
      url(assets/font/smart-icons.ttf) format('truetype'), 
      url(assets/font/smart-icons.eot) format('embedded-opentype');
      font-weight: 400;
      font-style: normal
    }

    Notice that we also import the icons for the Smart framework. In order to do so we need to copy the font folder from node_modules/smart-webcomponents/source/styles to src/assets.

  4. Add the new component to the stencil/index.html page in order to view the component:
      <body>
        <my-first-component label="Stencil Grid Component"></my-first-component>
      </body>
    
  5. Run the application by opening a command promp from inside the root directory of the project and entering the following command:
    npm start
    

    The StencilJS server will run the application on localhost:3333 and a new tab will open in your browser to view the result: