Every Angular project I’ve worked on has a table. Usually more than one. And every single time I end up writing the same setup — wire up MatSort, wire up MatPaginator, build a SelectionModel for checkboxes, manage filter state somewhere, figure out export again from scratch.
It’s not hard, it’s just tedious. So I extracted it.
ngx-mat-simple-table — an Angular Material table component that takes a column config and data, and handles the rest.
<simple-table
[tableColumns]="columns"
[dataSource]="rows"
[tableConfig]="config"
(sortChange)="onSort($event)"
(selectionChange)="onSelect($event)"
>
<st-export filename="tasks" format="xlsx" [allDataProvider]="getAllForExport" />
</simple-table>That’s the whole host component. Pagination, sorting, multi-select, column filters, Excel export with full header styling, drag-reorder, sticky columns, column chooser. Client-side and server-side data modes.
Built with Angular 17 signals throughout — input(), output(), computed(). No ChangeDetectorRef, no EventEmitter. I’d not go back.
Full writeup with the bugs I hit along the way (the Windows file: reference trap, CDK drag-reorder quirks, SheetJS being paywalled) is on dev.to.
- npm: ngx-mat-simple-table
- Demo: ng-simple-table.vercel.app
- GitHub: github.com/xonaib/ng-simple-table