DelamGrid

A lightweight Angular grid component with dynamic data binding, column‑level controls, and flexible rendering options.
Built with Angular 19.

Demo

Features

• Dynamic Data Binding – Pass tableHeader and response data dynamically to render your table.

• Column‑Level Controls – Enable filtering, sorting, and drag‑and‑drop reordering with simple config flags.

• Custom Column Rendering – Replace any column with a custom Angular component (like AG Grid’s cellRenderer).

• Nested Child Components – Add Angular components as expandable child rows.

• Class Customization – Apply custom class names to headers and cells for styling flexibility.

• Custom Content Rendering – Use colRenderer to inject custom HTML, images, or spans into specific columns.

• Renderer Type (API or UI) –- Use the dataRendererType property to specify whether the grid should use API rendering or UI rendering. If you don’t provide a value, it defaults to UI.

Note: Columnwise Filter, Tooltip with text truncation are planned for the next version.
This plugin is implemented using Angular 19, so plan integration accordingly.

Installation

tableHeader: DlamTableHeaderInterface[] = [ { headerName: 'S.No', keyName: 'id', isDraggable: true, width: 100, resize: true }, { headerName: 'Name', keyName: 'name', isSort: true, resize: true, width: 240, class: { headerClass: 'headerFirstClass', headerColClass: 'headerColFirstClass', bodyClass: 'tdClass', bodyColClass: 'tdcolDiv' }, colRenderer: (param: any) => ${param.name}, ${param.school ? param.school : 'not there'}, isFilterEnabled: true, callbackEvent: (column: any, row: any) => this.ontriggerClick(column, row) } ]; }