Stacked Layout

Switch DataGrid rows into responsive stacked cards for small screens while retaining column labels.

Visual Design

Card-style rows with tableOptions.stacked and stackedLayout = cards. Use the layout toolbar for filter, sort, and column visibility — the same filter and sort logic as the standard grid header.

Stacked layout with layout toolbar

Integration steps

Enable card-style rows with tableOptions.stacked = true and tableOptions.stackedLayout = 'cards'.
Assign stackedGroup on each ColumnDef ('start' | 'center' | 'end') to place fields in the multi-column card row.
Project ngb-datagrid-layout-toolbar inside ngb-datagrid and bind [grid] once on the toolbar — filter, sort, and column-chooser tools receive that instance automatically (no per-tool [grid]).
Use ng-template ngbCell="fieldName" for custom cell templates (avatars, badges, progress bars, flags).
Optional: pass [grid] on an individual tool only when it is used outside the layout toolbar.

Component — stacked cards + layout toolbar

      @Component({
  imports: [
    Datagrid,
    NgbCellTemplate,
    NgbDatagridLayoutToolbarComponent,
    NgbDatagridFilterToolComponent,
    NgbDatagridSortToolComponent,
    NgbDatagridColumnChooserToolComponent,
  ],
  template: `
    <ngb-datagrid
      #productGrid
      [columns]="columns"
      [data]="rows"
      [enableSorting]="true"
      [enableFiltering]="true"
      [filterable]="'menu'"
      [tableOptions]="tableOptions"
    >
      <ngb-datagrid-layout-toolbar [grid]="productGrid">
        <ngb-datagrid-filter-tool></ngb-datagrid-filter-tool>
        <ngb-datagrid-sort-tool></ngb-datagrid-sort-tool>
        <ngb-datagrid-column-chooser-tool></ngb-datagrid-column-chooser-tool>
      </ngb-datagrid-layout-toolbar>

      <ng-template ngbCell="productName" let-row>
        {{ row.productName }}
      </ng-template>
    </ngb-datagrid>
  `,
})
export class ProductStackedGrid {
  readonly tableOptions: NgbTableOptions = {
    stacked: true,
    stackedLayout: 'cards',
    hoverRows: true,
    density: 'comfortable',
  };

  readonly columns: ColumnDef<ProductRow>[] = [
    { field: 'productName', header: 'Product', stackedGroup: 'start', sortable: true, filterable: true },
    { field: 'unitPrice', header: 'Price', type: 'number', stackedGroup: 'center', sortable: true, filterable: true },
    { field: 'inStock', header: 'In stock', type: 'boolean', stackedGroup: 'end', sortable: true, filterable: true },
  ];
}

Toolbar grid binding — once on toolbar, optional per-tool override

      <!-- Toolbar [grid] is required once; tools inside inherit the host grid. -->
<ngb-datagrid-layout-toolbar [grid]="gridRef">
  <ngb-datagrid-filter-tool></ngb-datagrid-filter-tool>
</ngb-datagrid-layout-toolbar>

<!-- Override only when a tool sits outside the toolbar: -->
<ngb-datagrid-filter-tool [grid]="otherGridRef"></ngb-datagrid-filter-tool>

Stacked layout

Loading interactive DataGrid example…