Easy Mat UI documentation
An open-source Angular Material data table and UI components library. One configuration object gives you filters, pagination, child tables, tabs, dialogs, a multi-select and light and dark themes, and reusable components and a page generator come with it.
Frequently asked questions
What is Easy Mat UI?
An open-source (MIT) Angular library built on Angular Material: one configuration object gives a data table with column filters, pagination, expandable rows, child tables and tabs, a dialog and a multi-select.
How do I install it?
npm install easy-mat-ui-ng20 in an Angular 20 project, then import EasyTableComponent, EasyTableConfig and MatColumnTyped.
Does it support dark mode?
Yes: EasyThemeService.setTheme("light" | "dark" | "system") switches at runtime; the themes are CSS variables you can override.
Which Angular versions are supported?
Angular 20 officially (easy-mat-ui-ng20). Angular 19 and 21 build and run but are not official; 18 and older do not work.
Is it free?
Yes, MIT license. Source: https://github.com/chaibiredouane/easy-mat-ui
How does Easy Mat UI compare with AG Grid, PrimeNG Table and mat-table?
Easy Mat UI is a configuration-first table on top of Angular Material, with filters, pagination, child tables and a dialog, aimed at business screens. AG Grid targets very large datasets and server-side models, PrimeNG is a full suite with its own theming, and mat-table gives you the raw building blocks. See the comparison page for details and limits.
Does Easy Mat UI support server-side pagination or virtual scrolling?
No. The table works on an array held in memory: sorting, filtering and paging are client-side, and there is no virtual scrolling. For millions of rows or a server-side row model, use a data grid such as AG Grid.
Can I use it with standalone components and signals?
Yes. The components are standalone. A new EasyTableConfig object refreshes the table, so a computed() signal that builds the configuration from your data works well.
Does it work right to left, for example in Arabic?
Yes. The demo runs in Arabic with a right-to-left layout: set the dir attribute of the page, and the table and the reusable components follow it.
Do I need a translation dictionary?
No. The library reads its labels through ngx-translate, which is a required peer dependency, but texts you pass are shown as they are when no dictionary has a matching key.
Can it generate code for me?
Yes. npx easy-mat-ui add-page generates a page from the components and a data table: component, template, table configuration and models, with translation keys or plain texts. The page builder of the live demo does the same with a preview.
Which reusable components are included besides the table?
A segmented control, category buttons, a language picker, cards and a card grid, a key figure and a page header, plus the multi-select and the dialog. Each takes its data with inputs and reports with outputs.