Menu
ngx-table component with cells, sorting, selection, detail rows, and treegrid directives from @ibenvandeveire/ngx-layout.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Template directives ngxIsAuthenticated, ngxHasFeature, ngxHasPermission and impure pipes from @ibenvandeveire/ngx-authentication.
Route guards from @ibenvandeveire/ngx-authentication: NgxIsAuthenticatedGuard, NgxHasFeatureGuard, NgxHasPermissionGuard. Use with NgxAuthenticatedRoute data.
NgxAuthenticatedHttpClient and provideNgxAuthenticationConfiguration httpClientConfiguration. Use for base URL, withCredentials, authenticated interceptors, and download helper.
NgxAuthenticationAbstractService state: user$, session$, metadata$, hasFeature, hasPermission, global features. Use after provideNgxAuthenticationConfiguration.
Bootstrap @ibenvandeveire/ngx-authentication with provideNgxAuthenticationConfiguration and NgxAuthenticationAbstractService. Use when wiring sign-in/out and auth types.
Angular wrapper for CookieConsent V3 and cookie helpers from @ibenvandeveire/ngx-cookies. Use for setupCookiesHandler, consent observables, set/get/remove cookie, or *hasCookie directive.
| name | ngx-layout-table |
| description | ngx-table component with cells, sorting, selection, detail rows, and treegrid directives from @ibenvandeveire/ngx-layout. |
<ngx-table [columns]="['name', 'firstName']" [data]="users()" />
column matches columns key. Templates: #headerTmpl, #cellTmpl, #footerTmpl.
#cellTmpl — let-row="row", let-index="index", implicit property by column key.
Built-in: ngx-table-date-cell, ngx-table-currency-cell.
| Option | Purpose |
|---|---|
showDetailRow | always | on-click | on-single-item |
showOpenRowState | Open indicator |
allowMultipleRowsOpen | Multiple detail rows |
hideHeaderWhen | when-empty, when-loading |
components | loading, empty, checkbox, sort, openRowState |
[sortable]="true" + #sortTmpl; [currentSorting] input — you sort data in component (NgxTableSortEvent).
[selectable]="true", selectableType: checkbox | radio, selectableKey — implements CVA → FormControl.
#detailRowTmpl let-row + (rowClicked).
| Directive | Role |
|---|---|
[ngxTreeGrid] on table | role="treegrid" |
ngxTreeGridRow + index | Vertical nav |
ngxTreeGridCell | Horizontal nav |
[ngxTreeGridExpandable]="true" — expand/collapse with arrows. Follow W3C treegrid pattern.