ECS PrimeNG Table

A solution created by Alex Ibrahim Ojea that enhances the PrimeNG table with advanced filters and extended functionality, delegating all query and filtering logic to the database engine. The frontend is built with Angular 21 and PrimeNG 21 components, while the backend is a .NET 10 (ASP.NET) API connected to Microsoft SQL Server, easily adaptable to other databases. This approach prevents server and frontend overload by handling filtering and paging dynamically in the database, and includes features such as column visibility, column filters, custom views, and more.

Introduction

Hello! My name is Alex Ibrahim Ojea.

This project was created to provide an efficient and reusable PrimeNG table solution for Angular applications. Unlike the default PrimeNG approach, which requires loading all data into the frontend, this implementation delegates filtering, sorting, and pagination logic directly to the database engine, making it highly performant on large datasets.

The goal is to make it simple to integrate a powerful, flexible, and good-looking table into your applications without overloading either the frontend or the server.

Some of the key features included are:

Dynamic pagination with lazy loading
Multi-column sorting
Advanced and predefined filters
Global search
Column resizing, reordering, toggling, and descriptions
Customizable cells (alignment, overflow, tooltips, ...)
Conditional row styling
Table views for saving configurations
And much more!

A video showcasing an overview of some of the features can be found at the following link: YouTube Video
This is an example image of the final solution:

Improving documentation readability

For a clearer reading experience on GitHub, it is recommended to first navigate to the README file path and then collapse the file tree (by clicking on the icon in the top-left corner).
Then, select the Outline button in the top-right corner to display an index containing all sections of the documentation.

Following these steps provides a more convenient way to navigate and review the documentation.

1 Required software

To run this project, you will need:

Visual Studio Code – for frontend development.
Visual Studio 2026 – for backend API development with ASP.NET Core. Make sure to install the ASP.NET workload and .NET 10 framework.
Node.js – to run the Angular application. Managing Node versions with NVM is recommended.
Microsoft SQL Server – the database engine used for queries. Optional, can be replaced with other engines with minor code adjustments.
(Optional) DBeaver – A GUI for database management that works with multiple engines. You can use other tools, but this is the one I normally use.

2 Setup the environment to try the demo

2.1 Database (MSSQL)

This example has been set up using MSSQL. Other database engines should work with some modifications, but this guide only covers MSSQL. First, create a new database named primengtablereusablecomponent. The database should have a schema named dbo. You can use a different database or schema name, but you will need to adapt the backend and database scripts accordingly. Once the database and schema are ready, download all the database scripts located under this path. Execute the scripts in order (starting with 00):

<ins>00 Create EmploymentStatusCategories.sql</ins>: Creates the table EmploymentStatusCategories, which contains all possible employment categories used in the predefined filter example.
<ins>01 Populate EmploymentStatusCategories.sql</ins>: Inserts initial records into the EmploymentStatusCategories table.
<ins>02 Create TestTable.sql</ins>: Creates the table used for testing, containing the main data displayed in the frontend.
<ins>03 Populate TestTable.sql</ins>: Inserts sample data into TestTable. This script can be slightly modified to generate different random data.
<ins>04 FormatDateWithCulture.sql</ins> (optional): Creates a database function used by the backend to allow global search on date columns, formatting them as text with the same mask, timezone, and locale as in the frontend.
<ins>05 SaveTableViews.sql</ins>: Creates an example table to store user-defined table views. This is only needed if you are using the database to save views instead of browser or session storage.

After executing all scripts successfully, you should have:

Two populated tables (EmploymentStatusCategories and TestTable).
One empty table (TableViews).
One function (FormatDateWithCulture).

The following image shows the ER diagram of all the tables:

2.2 Backend (API in ASP.NET)

[!NOTE]
You can use other .NET versions with the corresponding packages. The solution should still work without issues.

2.2.1 Open the project

Using Visual Studio 2026, open the backend solution located in this path. Make sure the ASP.NET workload and .NET 10 framework are installed. If any component is missing, use the Visual Studio Installer to add it.

2.2.2 Update the database connection string

[!NOTE]
If you followed the default MSSQL installation and configured the database as primengtablereusablecomponent with a schema named dbo and no authentication, you can skip this step. Otherwise, follow these instructions carefully to avoid connection issues.

Next, update the database configuration for your backend API. Open the appsettings.Development.json file and ensure that the connection string under "DB_primengtablereusablecomponent" matches your setup. If you change the identifier name of the connection string in appsettings.json, remember to update it accordingly in Program.cs.

2.2.3 Scaffolding the database

[!NOTE]
This step is optional and only needed if you modify the database structure, want to generate the DbContext or models in a different location, or plan to use a database engine other than MSSQL.

To perform scaffolding, open the Package Manager Console in Visual Studio and navigate (cd) to the root folder of the project (where the .sln file is located). Once in the project folder, run the following command (assuming your database is named primengtablereusablecomponent, you are using SQL Server, and you want to place the DbContext and models in the same locations as in the example code):

dotnet ef dbcontext scaffold name=DB_primengtablereusablecomponent Microsoft.EntityFrameworkCore.SqlServer --output-dir Models --context-dir DBContext --namespace Models.PrimengTableReusableComponent --context-namespace Data.PrimengTableReusableComponent --context primengTableReusableComponentContext -f --no-onconfiguring

These are the common changes you may need to make in the command:

name=DB_primengtablereusablecomponent: Change only if you modified the connection string name in appsettings.Development.json.
Microsoft.EntityFrameworkCore.SqlServer: Change this to the appropriate provider package if you are using a different database engine.
--output-dir: Specifies where the models will be generated. In this example, they will be generated in the Models folder (created automatically if it does not exist).
--context-dir: Specifies where the DbContext will be generated. Here it will be created in a folder named DBContext (created automatically if it does not exist).
--namespace and --context-namespace: Set the namespaces for the models and the DbContext, respectively.
--context: Sets the name of the DbContext. In this example, it will be primengTableReusableComponentContext.
-f: Forces overwriting existing files.
--no-onconfiguring: Tells the scaffolding process not to configure the connection in the DbContext. In this example, the connection is managed through the appsettings.Development.json file.

2.2.4 API first run

After completing the previous steps, you should now be able to run the API and verify that everything works before moving to the frontend. In Visual Studio 2022, click the green Play button on the top bar. The API will start, and after a few moments, a webpage should appear. If everything is working correctly, you should see the Swagger-generated API documentation with some test endpoints. Below, the

ECSPrimengTable

Install / Use

README