A community of developers

Angular

Angular 10 Smart Data Table Example: Add, Update, Delete, Sort and Search Data

Angular 10 Smart Data Table Example

In this quick example, we’ll see how to create a smart table with Angular 10, the latest version of the framework at the time of writing this tutorial.

You sill learn how to add common table features and operations such as searching and filtering, and adding, updating and deleting data.

Make sure you have the following prerequisites before you continue with this example:

  • Working experience with Angular and TypeScript,
  • And a development environment for Angular i.e Node.js and Angular CLI installed on your machine.
  • You can also test the code using an online IDE such as Stackblitz.

If you are ready, let’s get started with the first step.

Creating an Angular 10 Project

So, first, you need to generate an Angular 10 project using the CLI using the following command:

$ ng new angular10smarttableexample

You’ll be asked for a couple of things such as if you want to add routing to your app and which stylesheets format you want to use in your project — Answer them as you see fit and wait for the CLI to generate the files and install the dependencies from npm.

Installing and Importing Angular Smart Table Library

After setting up your Angular 10 project, you need to run the following command:

$ npm install ng2-smart-table

We simply install ng2-smart-table which is a smart table component for Angular.

Next, you need to import the module in your app. Open the src/app/app.module.ts file and update it as follows:

// [...]

import { Ng2SmartTableModule } from 'ng2-smart-table';



@NgModule({
  imports: [
    // [...]
    
    Ng2SmartTableModule,
    
  ],
  declarations: [ ... ]
})

Adding the Smart Data Table

Next, open the src/app/app/component.ts file and update it as follows:

export class AppComponent { 

settings = {
  columns: {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Full Name'
    },
    username: {
      title: 'User Name'
    },
    email: {
      title: 'Email'
    }
  }
};

data = [
  {
    id: 1,
    name: "Michell Adeline",
    username: "Bret",
    email: "test@email.com"
  },
  {
    id: 2,
    name: "Josn Howell",
    username: "test",
    email: "test@gmail.com"
  },
  {
    id: 3,
    name: "John Michell",
    username: "test.Stanton",
    email: "test@test.com"
  }
]; }
...

Next, open the src/app/app.component.html file and add the following directive:

<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

Conclusion

That’s all for this example we have seen how to implement a smart data table in Angular 10 by example which allows you to add, update, delete, sort, and search for data.

Leave a Reply

Skip to toolbar