Smart.Table - configuration and usage

Getting Started with Angular Table Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new Application

ng new smart-angular-table

Navigate to the created project folder

cd smart-angular-table

Setup the Table

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

1. Download and install the package.
   

   npm install smart-webcomponents-angular

2. Once installed, import the TableModule in your application root or feature module.
   
   app.module.ts
   
   

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { TableModule } from 'smart-webcomponents-angular/table';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [ AppComponent ],
       imports: [ BrowserModule, TableModule ],
       bootstrap: [ AppComponent ],
   	entryComponents: [ AppComponent ]
   })
   
   export class AppModule { }
   	

   
   
3. Adding CSS reference
   
   The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.
   
   

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

   
   Another way to achieve the same is to edit the angular.json file and in the styles add the style.
   
   

   	"styles": [
   		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
   	]
   	

4. Example
   
   
   app.component.html
   
   

    
   <div class="demo-description">Our Table web component can be used to wrap or replace standard Tables
       and add different styles, hover effects, sorting by one or multiple columns,
       add, remove and update rows.</div>
   <smart-table #table id="table">
       <table>
           <thead>
               <tr>
                   <th scope="col">Country</th>
                   <th scope="col">Area</th>
                   <th scope="col">Population_Rural</th>
                   <th scope="col">Population_Total</th>
                   <th scope="col">GDP_Total</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>Brazil</td>
                   <td>8515767</td>
                   <td>0.15</td>
                   <td>205809000</td>
                   <td>2353025</td>
               </tr>
               <tr>
                   <td>China</td>
                   <td>9388211</td>
                   <td>0.46</td>
                   <td>1375530000</td>
                   <td>10380380</td>
               </tr>
               <tr>
                   <td>France</td>
                   <td>675417</td>
                   <td>0.21</td>
                   <td>64529000</td>
                   <td>2846889</td>
               </tr>
               <tr>
                   <td>Germany</td>
                   <td>357021</td>
                   <td>0.25</td>
                   <td>81459000</td>
                   <td>3859547</td>
               </tr>
               <tr>
                   <td>India</td>
                   <td>3287590</td>
                   <td>0.68</td>
                   <td>1286260000</td>
                   <td>2047811</td>
               </tr>
               <tr>
                   <td>Italy</td>
                   <td>301230</td>
                   <td>0.31</td>
                   <td>60676361</td>
                   <td>2147952</td>
               </tr>
               <tr>
                   <td>Japan</td>
                   <td>377835</td>
                   <td>0.07</td>
                   <td>126920000</td>
                   <td>4616335</td>
               </tr>
               <tr>
                   <td>Russia</td>
                   <td>17098242</td>
                   <td>0.26</td>
                   <td>146544710</td>
                   <td>1857461</td>
               </tr>
               <tr>
                   <td>United States</td>
                   <td>9147420</td>
                   <td>0.19</td>
                   <td>323097000</td>
                   <td>17418925</td>
               </tr>
               <tr>
                   <td>United Kingdom</td>
                   <td>244820</td>
                   <td>0.18</td>
                   <td>65097000</td>
                   <td>2945146</td>
               </tr>
           </tbody>
       </table>
   </smart-table>
   		

   
   app.component.ts
   
   

    
   import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { TableComponent } from 'smart-webcomponents-angular/table';
   
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
   	styleUrls: ['./app.component.css']
   })
   
   export class AppComponent implements AfterViewInit, OnInit {	
   	@ViewChild('table', { read: TableComponent, static: false }) table!: TableComponent;
   	
    
   	ngOnInit(): void {
   		// onInit code.
   	}
   
   	ngAfterViewInit(): void {
   		// afterViewInit code.
   		this.init();
       }
   		
   	init(): void {
   		// init code.
   	    
   
   	}	
   }
   		

   
   app.module.ts
   
   

    
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { TableModule } from 'smart-webcomponents-angular/table';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [ AppComponent ],
       imports: [ BrowserModule, TableModule ],
       bootstrap: [ AppComponent ],
   	entryComponents: [ AppComponent ]
   })
   
   export class AppModule { }
   		

   
   

Running the Angular application

After completing the steps required to render a Table, run the following command to display the output in your web browser

ng serve

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.