NITGrid

An Angular wrapper library for AG Grid Community with an opinionated, production-ready feature set — including column groups, floating filters, a translated toolbar, custom filters, master-detail rows, infinite scrolling, and a built-in language picker.

Breaking Changes

0.6.0

| # | Was | Neu | Migration | |---|---|---|---| | 1 | <nit-nitgrid> | <nit-grid> | Alle Template-Usages von <nit-nitgrid ...> auf <nit-grid ...> umbenennen |

# Quick migration (Linux/macOS)
grep -rl "nit-nitgrid" src/ | xargs sed -i 's/nit-nitgrid/nit-grid/g'

# Quick migration (PowerShell)
Get-ChildItem -Recurse -Filter "*.html" | ForEach-Object {
  (Get-Content $_.FullName) -replace 'nit-nitgrid', 'nit-grid' | Set-Content $_.FullName
}

Features

| Feature | Description | |---|---| | Column Groups | Define grouped column headers with ColGroupDef; groups are locked (columns cannot be dragged apart) | | Column Manager | Reorder, show/hide, pin, rename columns; create and manage column groups; save/load named views | | Floating Filters | Quick-filter row below headers — LIKE search by typing, IST (exact) shown as chip from context menu | | Custom Filters | Set filter (contains + exact), number filter (=, >, ≥, <, ≤), date filter, text filter | | Filter Breadcrumbs | Active filters shown as dismissible chips below the grid | | Responsive Toolbar | Title, row counter, action buttons (refresh, add, edit, delete), views, column manager, Excel export | | Master-Detail Rows | Expandable rows with a detail panel (key-value chips); Community-edition compatible | | Infinite Scroll | AG Grid Infinite Row Model with server-side sort & filter support | | Localization | Built-in 🇩🇪/🇬🇧 + 12 more languages; all texts translated; extendable to any language | | Custom Pagination Bar | Fully translated; replaces AG Grid's built-in panel | | Excel Export | Visible + filtered rows only, via SheetJS (.xlsx) | | Loading Overlay | Spinner with configurable text | | Context Menu | Right-click on cells (copy, set filter) and column/group headers (pin, manage columns) |

Installation

npm install nitgrid

Peer dependencies (install separately if not already present):

npm install ag-grid-community ag-grid-angular xlsx

Basic Usage

import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';
import { NITGridComponent } from 'nitgrid';

@Component({
  standalone: true,
  imports: [NITGridComponent],
  template: `
    <nit-grid
      title="Fahrzeuge"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [excelExport]="true"
      rowSelection="multiple"
      height="60vh"
    />
  `,
})
export class MyComponent {
  columnDefs: ColDef[] = [
    { field: 'make',  headerName: 'Marke' },
    { field: 'model', headerName: 'Modell' },
    { field: 'price', headerName: 'Preis', type: 'numericColumn' },
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica',  price: 35000 },
    { make: 'Ford',   model: 'Mondeo',  price: 32000 },
  ];
}

Column Groups

NITGrid supports AG Grid's native column grouping via ColGroupDef. Groups are locked by default — columns inside a group cannot be dragged out of it (marryChildren: true).

import { ColDef, ColGroupDef } from 'ag-grid-community';

columnDefs: (ColDef | ColGroupDef)[] = [
  {
    headerName: 'Fahrzeug',           // Group header
    children: [
      { field: 'make',  headerName: 'Marke' },
      { field: 'model', headerName: 'Modell' },
    ],
  },
  {
    headerName: 'Preis & Alter',
    children: [
      { field: 'price', headerName: 'Preis',   type: 'numericColumn' },
      { field: 'year',  headerName: 'Baujahr', type: 'numericColumn' },
      { field: 'date',  headerName: 'Datum',   type: 'dateColumn' },
    ],
  },
  // Ungrouped columns can be mixed in freely
  { field: 'fuel', headerName: 'Antrieb' },
];

To allow columns to be separated, set marryChildren: false explicitly on the group.

Column Group alignment

• Group headers → text centered
• Column headers → text left-aligned (including numeric columns)

Column Manager with Group Support

Right-click any column or group header → Spalten verwalten to open the Column Manager.

The redesigned manager shows each group as a card with:

• Editable group name — click to rename inline
• Delete group (×) — columns move to "Keine Gruppe"
• Per-column group selector — move a column to a different group via dropdown
• + Gruppe hinzufügen — create a new empty group

Floating Filters

Enable a quick-filter input row directly below the column headers:

<nit-grid [floatingFilter]="true" ... />

Filter behaviour

| Action | Result | |---|---| | Type in the floating filter input | LIKE search — contains match (case-insensitive) | | Right-click cell → "Als Filter verwenden" | IST search — exact match, shown as a blue chip | | Click the chip's × button | Clear the IST filter |

• Text / Set columns — text input with a search icon
• Number columns — text input; string-contains on the formatted value (e.g. "23" matches 23, 123, 230)
• Date columns — date picker; string-contains on the ISO date (e.g. "2024" matches all dates in 2024)

Inputs

| Input | Type | Default | Description | |---|---|---|---| | rowData | any[] | [] | Row data (client-side mode) | | columnDefs | (ColDef \| ColGroupDef)[] | [] | Column definitions — supports flat columns and grouped columns | | gridOptions | GridOptions | {} | Additional AG Grid options | | defaultColDef | Partial<ColDef> | sortable + filter + resizable | Default column settings | | title | string | '' | Grid title shown in toolbar | | gridName | string | '' | Key for saved views in localStorage | | userName | string | '' | User key for saved views | | height | string | '500px' | Grid height | | width | string | '100%' | Grid width | | theme | Theme | themeQuartz | AG Grid theme | | rowSelection | 'single' \| 'multiple' | — | Row selection mode | | pagination | boolean | false | Enable pagination | | paginationPageSize | number | 20 | Rows per page | | floatingFilter | boolean | false | Show floating filter row below headers | | loading | boolean | false | Show loading overlay | | loadingText | string | '' | Override loading text (falls back to locale) | | excelExport | boolean | false | Show Excel Export button | | columnAutoFit | boolean | false | Show Column Width button | | showBreadcrumbs | boolean | true | Show active filter chips | | displayViews | boolean | false | Show Views / Save View buttons | | masterDetail | boolean | false | Enable expandable detail rows | | detailField | string | 'details' | Row field with { label, value }[] for detail panel | | detailRowHeight | number | 120 | Height of the detail panel in px | | rowModelType | 'clientSide' \| 'infinite' | 'clientSide' | AG Grid row model | | datasource | IDatasource | — | Datasource for infinite row model | | cacheBlockSize | number | 100 | Block size for infinite row model | | languages | NITLanguage[] | [] | Language options for the built-in language picker | | defaultLanguage | string | '' | Language code to pre-select (e.g. 'de') | | persistLanguage | boolean | false | Save/restore language selection in localStorage |

Outputs

| Output | Type | Description | |---|---|---| | gridReady | GridApi | Fired when the grid is initialized | | rowClicked | RowClickedEvent | Row click | | rowSelected | RowSelectedEvent | Row selection change | | selectionChanged | SelectionChangedEvent | Selection changed | | filterChanged | Record<string, any> | Active filter model | | cellValueChanged | NITCellValueChangedEvent | Inline cell edit | | refresh | void | Refresh button clicked | | addRow | void | Add button clicked | | editRow | any | Edit confirmed (returns updated row) | | deleteRow | any[] | Delete confirmed (returns selected rows) | | languageChanged | string | Language code after switch (e.g. 'de', 'en') |

Context Menu

Right-clicking opens a context-sensitive menu:

| Target | Available actions | |---|---| | Column header | Pin / Unpin column, Spalten verwalten | | Group header | Spalten verwalten | | Cell | Copy value, Als Filter verwenden (sets IST filter) |

Localization

NITGrid ships with complete built-in translations for 14 languages. Every visible text is covered: toolbar buttons, dialogs, filter panels, breadcrumbs, pagination bar, and all AG Grid-internal texts.

Built-in languages

| Code | Language | Code | Language | |---|---|---|---| | de | 🇩🇪 Deutsch | pl | 🇵🇱 Polski | | en | 🇬🇧 English | cs | 🇨🇿 Čeština | | fr | 🇫🇷 Français | hu | 🇭🇺 Magyar | | es | 🇪🇸 Español | ro | 🇷🇴 Română | | it | 🇮🇹 Italiano | sk | 🇸🇰 Slovenčina | | pt | 🇵🇹 Português | hr | 🇭🇷 Hrvatski | | nl | 🇳🇱 Nederlands | sl | 🇸🇮 Slovenščina |

Quick start

import { NITLanguage } from 'nitgrid';

languages: NITLanguage[] = [
  { code: 'de', label: 'Deutsch' },
  { code: 'en', label: 'English' },
];

<nit-grid
  [languages]="languages"
  defaultLanguage="de"
  [persistLanguage]="true"
  gridName="myGrid"
  (languageChanged)="onLangChange($event)"
/>

Custom language

{ code: 'ja', label: '日本語',
  nitText: {
    refresh: '更新', add: '追加', edit: '編集', delete: '削除',
    // … all NITToolbarTexts keys
  },
  localeText: {
    page: 'ページ', of: '/', noRowsToShow: 'データなし',
    // … AG Grid locale keys
  },
}

Master-Detail

Expandable rows with a detail panel — Community-edition compatible (no Enterprise license required).

rowData = [
  {
    make: 'Toyota', model: 'Celica', price: 35000,
    details: [
      { label: 'Farbe',       value: 'Rot' },
      { label: 'Antrieb',     value: 'Hinterrad' },
      { label: 'Vorbesitzer', value: 1 },
    ],
  },
];

<nit-grid
  [masterDetail]="true"
  detailField="details"
  [detailRowHeight]="110"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
/>

Infinite Scroll (Server-Side)

Use the IDatasource pattern for large datasets. AG Grid loads data in blocks and only renders what is visible.

import { IDatasource, IGetRowsParams } from 'ag-grid-community';

datasource: IDatasource = {
  getRows: (params: IGetRowsParams) => {
    fetch('/api/rows', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        startRow:    params.startRow,
        endRow:      params.endRow,
        sortModel:   params.sortModel,
        filterModel: params.filterModel,
      }),
    })
      .then(r => r.json())
      .then(d => params.successCallback(d.rows, d.totalCount))
      .catch(() => params.failCallback());
  },
};

<nit-grid
  [rowModelType]="'infinite'"
  [datasource]="datasource"
  [cacheBlockSize]="100"
  [columnDefs]="columnDefs"
/>

.NET 10 API example

public record GridRowsRequest(
    int StartRow, int EndRow,
    List<SortModel>?             SortModel,
    Dictionary<string, FilterModel>? FilterModel);

public record SortModel(string ColId, string Sort);

public record FilterModel(
    string FilterType, string? Type, string? Filter,
    double? FilterFrom, double? FilterTo);

public record GridRowsResponse<T>(IEnumerable<T> Rows, int TotalCount);

app.MapPost("/api/rows", async (GridRowsRequest req, AppDbContext db) =>
{
    var query = db.Items.AsQueryable();

    if (req.FilterModel != null)
        foreach (var (field, f) in req.FilterModel)
            query = ApplyFilter(query, field, f);

    if (req.SortModel is { Count: > 0 })
        query = ApplySort(query, req.SortModel[0]);
    else
        query = query.OrderBy(x => x.Id);

    var total = await query.CountAsync();
    var rows  = await query.Skip(req.StartRow)
                           .Take(req.EndRow - req.StartRow)
                           .ToListAsync();

    return Results.Ok(new GridRowsResponse<Item>(rows, total));
});

Support

• Bugs & feature requests: GitHub Issues
• Questions & ideas: GitHub Discussions

License

MIT — see LICENSE for details.