Get Started With a Web Components Grid in 5 Minutes

We take a look at how easy it is to create grid components for your client-side app so you can properly display your data.

Shanika WIckramasinghe

Nov. 26, 19 · Tutorial

Like (4)

Save

16.49K Views

Smart HTML elements is a lightweight and easy to use web components framework. It is built using CSS, HTML, and Javascript. It enables cross-browser compatible web applications with custom elements used in web components. It contains more than 30 UI components and has a user interface that works on mobile and on PCs. It is native and does not have any dependencies and works with any framework like Angular, React, and Vue.js.

This article explains Smart HTML Grid and its features. The Grid component can be easily integrated into web pages. It has many features like filtering, sorting, pagination, etc.

Grid component

Introduction to Smart Grids

Smart Grid is a grid which displays the data in rows and columns. The grid can be bound to a data source.

Installation

To install the latest version through npm use the below command; or you can download the smart elements to your project folder and unzip your directory.

npm i @smarthtmlelements/smart-core # for core version source file.
npm i @smarthtmlelements/smart-elements # Commercial version source file
npm i @smarthtmlelements/smart-custom-element # Library for Custom Elements Development

Folder Structure

To start with Smart Elements, you nee only three files: HTML, CSS, and JS files.

Integrating HTML File With Smart.Grid

To initialize the grid we need the below CSS and JS files in the head of HTML file.

smart.base.css // file for css formatting
smart.element.js // base class of smart
smart.grid.js // contains element definition
smart.dataadaptor.js // contains dataapdaptor definition
smart.buttons.js // Contains button definition
smart.scrollbar.js // Contains definition of scrollbar
Adding your custom elements:
Index,js // adding your index.js file .Add you custom js file.

Styling

CSS styling can be applied to the Grid. These are a pair of CSS files:

Smart.base.css: Base style is responsible for element layouts like padding, border-width, position, and margin.
smart.[theme name].css: Applies the HTML Element’s colors, fonts, borders, and backgrounds. For example, smart-grid-footer-height: sets height of the footer.

The Smart.base.css class style must be included before the theme styling.

Scripting File

Use the JS file to add your custom script. The JS file is referred to in the HTML file in between the <script> tags.

<script src="index.js"></script>

Define the grid web component in the JavaScript file. Define the properties, data source, and columns. That’s all it takes to integrate the smart grid into a web page.

Binding Events to the Grid

Binding an event to the Grid instance is an easy task. For a Grid instance, we can bind the “click” event in the scripting file. Each data-field column has “data-field” and the row has a “data-id.” Biding events to the grid can be achieved using an “event.path.” Below is an example of adding an event listener.

window.onload = function() {  
  grid.addEventListener('click', function(event){  
     const path = event.path;  
     let cell = null;  
     let row = null;  
     let column = null;  
     for(let i = 0; i < path.length; i++) {  
       const node = path[i];  
       if (node.nodeName === 'SMART-GRID-CELL') {  
         cell = node;  
       }  
       if (node.nodeName === 'SMART-GRID-ROW') {  
         row = node;  
       }  
       if (node.nodeName === 'SMART-GRID-COLUMN')      {  
         column = node;  
       }  
     }  
     if (row) {  
       alert(row.getAttribute('data-id'));  
     }  
     if (column) {  
       alert(column.getAttribute('data-field'));  
     }  
     if (cell) {  
       alert(cell.innerText);  
     }  
  });  
 }

Below is the glimpse of 3 files HTML, JS and CSS file.

Index.js

Smart('#grid', class {
get properties() {
return {
    dataSource: new Smart.DataAdapter(
{
dataSource: // add datasource,
dataFields:
[
'ID: number',
//Adding data fields
]
}),
columns: [
'Country',
// adding columns
]
}
}
});

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid Overview Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../source/styles/smart.default.css" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />

    <script type="text/javascript" src="../../scripts/common.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
    <script type="text/javascript" src="../../source/smart.elements.js"></script>
    <script type="text/javascript" src="../../scripts/data.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="viewport">
<div class="demo-description">
The 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.
</div>

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

Style.css

smart-grid {
    width: auto;
    height: auto;
}

Features of the Grid Component

The Grid has impressive features like pagination, cell editing, live updates, and automatic loading of 50,000 rows to one column. We will see these features one by one.

Grid Cells Editing

Grid cells can be editd at run time. There are three types of options for editing.

Cell Editing

Cells can be edited and edited data can be stored. To make the cells editable. Enable the editing property to “true” and set the model to “cell.”

editing: {
enabled: true,
mode: 'cell'
},

AutoComplete Cell Editing

There are three things to do for autocomplete cell editing. This allows for the editing of cells with the auto-complete pop-up. First, set editing as true; second, create an editor with auto open and dropdown positions properties; third, assign this editor to the required columns.

editing: {
  enabled: true,
  mode: 'cell'
},
columns: [
{
      label: 'First Name', dataField: 'firstName', editor: 'autoComplete'
},
{ 
    label: 'Last Name', dataField: 'lastName', editor: { 
  template: 'autoComplete',
  autoOpen: true,
  dropDownButtonPosition: 'right'
  }
  },
{ label: 'Product', dataField: 'productName', editor: 'autoComplete' },
  ]

Autocomplete Dropdown Editor

This enables the user to edit the cells but selects the data from a read-only dropdown list. To enable this, create a read-only editor.

{
label: 'First Name', dataField: 'firstName', editor: {
template: 'autoComplete',
readonly: true
 }
}

Live Updates

Data can be updated every second. To update data, we need to set the interval to call the function which will return the updated data. The time is set in milliseconds.

setInterval(function() {
updateValues();
}, 1000);

Pagination

Pagination for the grid is an essential property and to enable it we set the pagination property to true. Also set other properties like enable, pagesize, pageindex, position, and visibility.

paging: {
enabled: true,
pageSize: 10,
pageIndex: 0

},
Pager: {
    position: 'bottom',
    visible: true
},

Filter:

Filtering is enabled using filter property and we need to define which columns need to be filtered.

paging: {
enabled: true,
pageSize: 10,
pageIndex: 0

},
Pager: {
    position: 'bottom',
    visible: true
},

Sorting

Sorting is a feature used on columns to sort all the data. This is enabled by setting the enable property as true and assigning the “sortorder” sub-property to the column.

sorting: {
enabled: true
},

//Columns property
{ label: 'Country', dataField: 'Country', sortOrder: 'desc' },

Sorting can be done for one column or many columns. There are sub-properties which define animations and sorted icons determine which column is sorted.

Scrolling

Scrolling can be done implemented in different ways. There are three types of scrolling: Infinite Scrolling, Deferred Scrolling, and Virtual Scrolling. To enable scrolling, you need to specify the “scrollMode.” In infinite scrolling mode, the data is loaded when we scroll to the bottom of the view. In a deferred view, data is loaded after the scrollbar’s thumb is released. In virtual scrolling mode, data is loaded on demand.

scrollMode: 'infinite',

Data (computing) Column (database) HTML Property (programming)

Published at DZone with permission of Shanika WIckramasinghe. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments