The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

CRUD + Tables


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.
Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop