Ionic 5 ngx-datatable Tutorial Basic

Introduction

This sample app tutorial and part 1 (basic part) of the ngx-datatable Ionic 5 application tutorial that provides step-by-step instructions to walk you through the process of developing a basic DataTable Ionic 5 application where you can apply sorting:

Downloads and Resources

You can also download the basic Ionic 5 DataTable basic app backup file to import it under your account. In this case, the database and the database service will be imported automatically.

🚧

Pre-condition

There are some important pre-conditions to make your app work: you will need to make sure the database and a related database service are created; please, check Steps 1 and 2 for details.

Step 1: Creating Database

Let's start by creating a database where the data will be stored.

  1. Co to the Databases tab and create a new Appery.io Database, let's name name it BooksDB:
  1. Click Create new collection and, in the new window, enter the new custom collection name: BooksList.
  2. Click +Col to add two columns both of String type: Title and Author:
  1. Then, add another column with Name= Year and type = number.
  2. Finally, add one more column: Image of the file type for uploading all the needed book cover images:
  1. To add some sample data, click +Row and fill in the table rows.

👍

Uploading Media to Database

To upload the images for the book covers (need to be prepared beforehand), use the Media Manager tool:

  1. When ready, click Refresh to see the table with sample collection data:
BooksDBBooksDB

BooksDB

Downloads and Resources

  • You can also download the database backup file from this step to import it to your own app.
  • You might like to get more information from Appery.io Database documentation.

Step 2: Creating Database Service

To create a new database service:

  1. We need to, first of all, create a new Ionic 5 app (Blank); you can name it to Ionic5 DataTable Basic App:
  1. Now, we can proceed with creating a service for our database. Click CREATE NEW > Database Service:
  1. In a new window, select the database we have just created (BooksDB), select the List service of the BooksList collection (expand it first) and confirm import:
Importing DB sevicesImporting DB sevices

Importing DB sevices

👍

The services will be instantly imported under the Project tab Services folder:

  1. Open the Pages > Screen1 DESIGN panel and drag & drop the DataTable component to the screen:
  1. Hover the mouse cursor over the DataTable Context menu and click the green plus icon to add two more DataTable columns so that there are 4 of them in the table:
Adding **DataTable** columnsAdding **DataTable** columns

Adding DataTable columns

  1. Now, switch to the screen DATA panel and, for datasource, select the created before BooksDB_BooksList_list_service and click the Add button:

📘

Customizing Service Name

You can change the name of your service to for e.g. BooksList.

Adding new datasourceAdding new datasource

Adding new datasource

  1. Click the Success mapping button and, in the mapping editor, click the Expand all link for both Service response and Page. We should relate our service with the DataTable component and bind the service scope with the rows of our DataTable as well as the columns of the table. To do it, create the below mapping and save:
Service **Success** mappingService **Success** mapping

Service Success mapping

  1. Go back to the DESIGN panel and select the DataTable1 component.

👍

You can also use the OUTLINE view menu or the Breadcrumbs for navigating between the app UI components:

  1. Under the PROPERTIES panel, expand the Data Mode property, leave Client Pages for Mode, then select our service (BooksList) for Service Name.
Configuring **Data Mode**Configuring **Data Mode**

Configuring Data Mode

  1. To initialize the table, expand the EVENTS tab and select the Page component from the list. For EVENT, select Before page showing and then select [DataTable update](https://docs.appery.io/docs/5-event-handling#datatable-update) for the ACTION drop-down with indicating our DataTable1 component. Save the event:
Setting up **Page** eventSetting up **Page** event

Setting up Page event

Step 3: Defining App UI

  1. On the Screen1 DESIGN panel and use the Breadcrumbs to select the Page component. Then, under its PROPERTIES panel, set the Footer property to False. After that, select the Header Toolbar title component and enter Books to read for its Text property:
Defining **Toolbar Title**Defining **Toolbar Title**

Defining Toolbar Title

  1. Now, select the DataTable1 component and go to its PROPERTIES panel to define it as follows:
    • Selection Type: Checkbox;
    • Limit: 2;
    • ScrollbarH: true.
  2. Expand Messages and type in Data is missing for Empty Message.
  3. Now, expand Sorts and, for Column Name, insert Year; for Direction, select asc:
Defining **DataTable** propertiesDefining **DataTable** properties

Defining DataTable properties

  1. Next, select the first column of the table, DataTableCol1, this is where the database image files will be mapped to. Under the PROPERTIES panel, define the following DataTableCol1 properties as follows:

    • Checkboxable: true;
    • Header Checkboxable: true;
    • Max Width: 120;
    • Name: Image.
  2. Also, click the Editbutton of the Cell Template property and enter the next code:

<ion-img src = "https://api.appery.io/rest/1/db/files/PUT YOUR DB ID HERE/{{value}}"></ion-img>

The *DataTableCol1** component's properties should look like this:

🚧

Database ID Credentials

Note that inside the script, you will need to replace the PUT YOUR DB ID HERE template with your database ID (can be found in the browser search field or in YOUR DB > Settings > API keys):

Locating your database IDLocating your database ID

Locating your database ID

👍

Note!

You might also like to adjust the UI components properties of other table columns to fit the needed content, for example, we used the next Max Width property values for our table columns:

Step 4: Testing App

Now, your app looks well-rounded and should work as expected.
Click TEST in the App Builder Toolbar to check:

App in workApp in work

App in work


Did this page help you?