@jambotron/aria-grid (0.1.0)

Published 2026-11-05 02:08:48 +01:00 by Liosha84

Set up this registry in your project .npmrc file:

@jambotron:registry=https://gitea.jambotron.com/api/packages/jambotron_gang/npm/

To install the package using npm, run the following command:

npm install @jambotron/aria-grid@0.1.0

or add it to the package.json file:

"@jambotron/aria-grid": "0.1.0"

For more information on the npm registry, see the documentation.

Angular data grid on Angular Aria: sorting, paging, row selection, bulk and row actions, animations

@jambotron/aria-grid

Angular data grid built on Angular Aria grid: sorting, paging, row selection with "select all", bulk actions, row actions (up to two icons + a "⋮" menu), row highlight, row/sort/selection animations (off under prefers-reduced-motion).

Data is fully client-side — meant for admin lists of hundreds, not millions, of rows.

Requirements

Angular 22 with @angular/aria, @angular/cdk, @angular/material (peer dependencies, same major).

Install

From the Gitea npm registry of jambotron.com (after npm publish, see Develop):

npm config set @jambotron:registry https://gitea.jambotron.com/api/packages/jambotron_gang/npm/
npm install @jambotron/aria-grid

Global styles (once):

@use '@jambotron/aria-grid/styles/aria-grid';

Use

import { JtGridComponent, JtGridCellDirective, JtGridColumn, RowAction } from '@jambotron/aria-grid';

columns: JtGridColumn<User>[] = [
  { key: 'name', label: 'Name', sort: u => u.name },
  { key: 'created', label: 'Created', sort: u => u.created, align: 'end' }
];
bulk: RowAction[] = [{ value: 'delete', label: 'Delete', icon: 'delete', danger: true }];
actionsOf = (u: User): RowAction[] => [
  { value: 'open', label: 'Open', icon: 'open_in_new', inline: true },
  { value: 'delete', label: 'Delete', icon: 'delete', danger: true }
];
byId = (u: User) => u.id;

<jt-grid [rows]="users()" [columns]="columns" [trackBy]="byId" label="Users"
         [bulkActions]="bulk" (bulkAction)="onBulk($event)"
         [rowActions]="actionsOf" (rowAction)="onRow($event)">
  <ng-template jtGridCell="name" let-row>{{ row.name }}</ng-template>
  <ng-template jtGridCell="created" let-row>{{ row.created | date }}</ng-template>
</jt-grid>

Inputs: rows, columns, trackBy (required); label, emptyMessage, bulkActions (empty — no selection column), rowActions (null — no actions column), rowSubject, highlight, initialSort, pageSize (10/25/50/100, default 25). Outputs: bulkAction { action, rows }, rowAction { action, row }. Selection is kept by row key across sorting, paging and data reloads.

Bulk actions

JtGridBulkService asks once for all rows, runs them one by one (a failed row does not stop the rest) and reports "done N" / "failed M":

onBulk(e: JtGridBulkEvent<User>) {
  this.bulk.run({
    rows: e.rows, label: 'Delete', confirm: 'Delete the selected users?', danger: true,
    run: u => this.api.delete(u.id)
  }).subscribe(() => this.reload());
}

reason: true asks for one required reason for all rows (passed as the second argument of run). Cancelled — the stream completes without a value. By default the service uses a Material dialog and snack bar; plug in your own confirm dialog and toasts:

{ provide: JT_GRID_BULK_UI, useValue: { ask: req => myConfirm(req), success: m => toast.ok(m), error: m => toast.err(m) } }

Texts

English by default. Pass your own (a function follows the current language):

providers: [provideJtGridLabels(() => ({ selectAll: t('grid.selectAll'), next: t('grid.next') }))]

Theme

All colors, radii, spacing and durations are --jt-* CSS variables with defaults on :where(:root); any value your app sets wins. See styles/aria-grid.scss for the full list.

Develop

npm ci
npx ng test aria-grid --watch=false
npx ng build aria-grid        # → dist/aria-grid
cd dist/aria-grid && npm publish

License: UNLICENSED (internal to Jambotron).

Dependencies

ID	Version
tslib	^2.3.0

Peer Dependencies

ID	Version
@angular/aria	^22.2.0
@angular/cdk	^22.2.0
@angular/common	^22.2.0
@angular/core	^22.2.0
@angular/material	^22.2.0
rxjs	^7.8.0

Details

npm

2026-11-05 02:08:48 +01:00

UNLICENSED

30 KiB

Assets (1)

aria-grid-0.1.0.tgz 30 KiB

Versions (2) View all

0.2.0

2026-11-06

0.1.0

2026-11-05