What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Carlos Morcillo Fernández says he open-sourced ng-hub-ui-paginable after repeatedly rebuilding the same Angular screen: an API-backed list with pagination, sortable columns, filters, search, and row selection. The frustration was less about difficult code than repeated maintenance—and paging bugs that resurfaced after earlier implementations were copied between projects.
Why publish another Angular table?
Morcillo describes a familiar cycle: implement a record list, carry its code into another project, strip away project-specific pieces, and later rediscover pagination bugs. His stated reason for publishing the component was to preserve the accumulated implementation knowledge and avoid rebuilding and maintaining the same features repeatedly.
He put the frustration plainly: “That is the part that wore me down. Not the difficulty — none of this is hard — but the repetition, and the fact that the knowledge kept evaporating.” The motivating example includes a server-paginated list of forty thousand records, but that is an illustration from the author, not a general workload recommendation.
How does the component distinguish client-side and server-side data?
In the author’s description, the inputs determine who handles the data operations. A plain array signals that the component should work on the full dataset in memory. Supplying page data together with a total item count signals that the page is already being provided externally; the table renders it and reports requested changes through bindings rather than manipulating the full dataset itself.
#1 Best Overall
| Input pattern | Where operations happen | What the table does |
|---|---|---|
| Plain array | In the component, against the in-memory dataset | Performs pagination, sorting, filtering, and search. |
Page data plus totalItems |
Outside the component, typically in the application’s data-fetching flow | Displays the supplied page and exposes changes such as page, page size, sorting, and search through bindings. |
That means totalItems acts as the mode signal in the described design; the author does not use a separate serverSide boolean. The distinction matters when integrating it: in server mode, the application still has to respond to the table’s changed state and obtain the corresponding page.
What does the Angular state integration provide?
The article describes two-way Angular model() bindings for values including page, page size, sort order, search term, filters, loading, and error. The intent is for the table and application to use shared state, rather than maintain separate copies that must be synchronized.
A resource can also be supplied through a structural interface that reads value(), isLoading(), and error(). As Morcillo describes it, changing the page updates a resource parameter and Angular’s resource machinery loads again; the table itself does not call reload(). This is the author’s account of the integration, not an independent code review.
What does the author say about compatibility and licensing?
Morcillo’s article reports that ng-hub-ui-paginable is MIT licensed, supports Angular 18 and later, and can be installed with npm i ng-hub-ui-paginable. Those are claims in the article, not independently verified current package metadata. Before adopting it, check the author’s DEV Community article and the linked project documentation and source repository for current compatibility, release, and license details. The post page displays “Sep 22” without a publication year in the retrieved text, so a year should not be inferred.
Rank #3
What is missing, and where are the accessibility limits?
The author explicitly lists several features the component does not provide: virtual scrolling, export, column reordering, and row grouping. It tracks rows by index, so a refetched page rerenders rather than diffing rows by ID. Morcillo says it is not intended for tens of thousands of rows in one scrollable container; the forty-thousand-record example is server-paginated, not evidence that the component can render that many rows at once.
The article reports accessibility fixes in version 22.25.0, including column scope, loading state, a live row-count region, and indication of the current page. It also acknowledges that range filters remain unlabeled and paginator ellipses can still receive focus when they should not. These are author-reported details, not the results of an independent accessibility audit. Teams with accessibility requirements should assess the component in their own interface and verify the current implementation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When might another table approach fit better?
The author frames the choice as a tradeoff rather than a universal recommendation. Angular Material’s table provides primitives that developers assemble with a paginator and sort header, and its design language may suit an application already built with Material. A more feature-rich commercial grid may cover broader needs, but the author notes that per-developer cost can be hard to justify for a small internal tool; that is a contextual tradeoff, not a general pricing claim.
Before choosing, compare the options against the needs of the specific application:
Quick Recap
- Design-system fit: whether the table should match an existing Material interface or another established design language.
- Assembly and maintenance: whether the team prefers configuring primitives or adopting a component with the needed table behavior already bundled.
- Feature breadth and licensing: whether built-in export, grouping, column controls, or other capabilities justify the relevant license terms.
- Data volume and rendering: whether the interface needs virtualization or a very large, continuously scrollable dataset.
- Accessibility: whether the implementation’s current behavior meets the application’s requirements and has been evaluated in context.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
