logo The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

CRUD + Tables

Overview

We've added a feature to facilitate your work with CRUD/Tables, by having small helpers and base entities for easy implementation of REST API and Tables with all functionalities (Sorting/Filtering/Searching/Grouping/Pagination/Edit/Delete/Add).

Likewise, we remove all MaterialDataSource/Material dependencies to increase performance and remove all HTML mark-up issues. It will now provide a fully customizable and extendable solution for all your CRUD/Tables needs.

All core helpers for CRUD/Tables are placed in the src/app/_metronic/shared/crud-table folder. Here's a quick rundown on the basic entities:

  1. src/app/_metronic/shared/crud-table/models/base.model.ts BaseModel - All your entities should implement this interface. +
  2. src/app/_metronic/shared/crud-table/models/table.model.ts ITableState - All table services should have the variable with this type. This is where we store the current state of the pagination/sorting/grouping. Also in this file, we've prepared Action interfaces for your table view. +
  3. src/app/_metronic/shared/crud-table/services/table.sevice.ts TableService<T> - All your services have to be extended from this class. All basic standard REST API requests/response methods are implemented in the TableService<T> class.

    Please be familiar with Request/Response model in the class methods.

    If you need something custom, you can override any method easily. +

Examples with eCommerce

In this section we will try to create an eCommerce customers table with requests on the server, getting responses and common view table features (e.g. Sorting/Filtering/Searching/Grouping/Pagination/Edit/Delete/Add).

  1. First, we need to import CRUDTableModule /src/app/modules/e-commerce/e-commerce.module.ts: +
  2. Second, let's create Customer model /src/app/modules/e-commerce/_modules/customer.model.ts (Don't forget, your module should extend BaseModel): +
  3. Then we need implement customers.service /src/app/modules/e-commerce/_services/customers.service.ts which should extend base TableService.
    (Pay attention to constructor, there we need to @Inject Angular HTTPClient. Without it, the parent class can't inject an instance of HTTPClient).
    (Don't forget change your API_URL). +
  4. Next, prepare the customers.component /src/app/modules/e-commerce/customers.component.ts: +
    Also, setup your HTML in /src/app/modules/e-commerce/customers.component.html: +
    The result should look like this: +
  5. To add Sorting to the table, we need to implement the ISortView interface: +
  6. To add Pagination to the table, we need to implement the IPaginatorView interface: +
  7. To add Grouping to the table, we need to implement the IGroupingView interface: +
  8. To add Filtering to the table, we need to implement the IFilterView interface: +
  9. To add Search to the table, we need to implement the ISearchView interface: +
  10. To add a Delete function to the table, we need to implement the IDeleteAction interface and create DeleteCustomerModalComponent component: +
  11. Similarly with the Delete function, we able to implement Add item and Edit item functions to our tables.