Get Started with Web Components Grid in 5 min
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 compatibility web applications with custom elements used in web components. It contains more than 30 UI components and has a user interface which 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 about 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.
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 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 filenpm i @smarthtmlelements/smart-custom-element // Library for Custom Elements Development
2. Folder Structure:
To start with Smart Elements you need only 3 files, HTML, JS and CSS file.
3. Integrating HTML file with Smart.Grid: To initialize the grid we need below CSS and JS files in the head of HTML file.
4. Styling:
CSS styling can be applied to the Grid. These are a pair of CSS files, a. Smart.base.css: Base style is responsible for elements layouts like padding, border-width, position, and margin.
b. smart.[theme name].css: Applies the HTML Element’s colors, fonts, borders, and backgrounds. Eg : smart-grid-footer-height: Sets height of the footer.
Smart.base.css class style must be included before the theme styling.
5. Scripting File:
Use the JS file to add your custom script. JS file is referred in HTML file in between the </script> tags.
<script src=”index.js”></script>Define grid web component in JavaScript file. Define the properties, data source, and columns. That’s all it takes to integrate the smart grid into a web page.
6. Binding Events To Grid:
Binding an event to 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 “data-id”. These can be achieved using “event.path”. Below is an example of adding an event listener.
Below is the glimpse of 3 files HTML, JS and CSS file.
Index.js
Index.html
Style.css
Features of Grid Component:
The Grid has impressive features like pagination, cell editing, live updates and automatic loading of 50,000 rows to 1 lakhs columns. We will see these features one by one.
1) Grid Cells Editing:
Grid cells can be edited at the run time. There are 3 types of options for editing.
a. Cell Editing: Cells can be edited and edited data can be stored. To make the cells editable. Enable editing property to “true” and set model to “cell”.
b. AutoComplete Cell Editing: There are 3 things to do for autocomplete cell editing. This allows editing cells with auto-complete pop-up. Firstly set editing as true, secondly, create an editor with auto open and dropdown positions properties. Assign this editor to required columns.
c. 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.
2) Live updates :
Data can be updated every 1s, to update data live we need to set interval a call the function which would return updated data. The time is mentioned in a millisecond.
3) Pagination:
Pagination for the grid is an essential property and to enable that set the properties of pagination to true. Also set other properties like enable, “pagesize”,”pageindex”, position, and visibility.
4) Filter:
Filtering is enabled using filter property and we need to define which columns need to be filtered.
5) Sorting:
Sorting is a feature used on columns to sort the entire data. This is enabled using enable property as true and assigning sub-property “sortorder” to the column.
Sorting can be done for one column or many columns. There are sub-properties which defines animations, sorted icons determine which column is sorted.
Scrolling:
Scrolling data can be done in different ways. There are 3 types of scrolling, Infinite Scrolling, Deferred Scrolling, and Virtual Scrolling. To enable scrolling you need to specify the “scrollMode”. In infinite scrolling mode, data is loaded when we scroll to the bottom of the view. In a deferred view, data is loaded after scrollbar’s thumb is released. In virtual scrolling mode, data is loaded on demand.
scrollMode: 'infinite',Summary:
Smart HTML elements components are emerging and are light weighted and easy to handle. It mainly relies on java scripts and HTML. We have seen the Grid component which is easy to integrate and use. It has other features like merged cells, checkbox selection on the grid, freezing rows and freezing columns. Take a look at the unique feature of performing CURD operation on rows and columns, with large datasets at run time.
