Visual Design

Apply DataGrid themes, density, responsive layout, stacked cards, and Bootstrap-compatible visual settings.

Visual Design

Overview of theme, density, zebra stripes, hover states, and stacked layout options exposed through tableOptions.

Visual APIs covered

theme, tableOptions, density, stacked, zebraStripes, hoverRows, responsive, headerClass, headerStyle, cellClass, cellStyle, rowClass, and rowStyle.

Visual design basics

Integration steps

Start with [theme]="'bootstrap'" to use the shipped ngbootstrap DataGrid visual system.
Pass tableOptions for density, stacked mode, zebraStripes, hoverRows, and responsive table behavior.
Use headerClass / headerStyle, cellClass / cellStyle, rowClass / rowStyle for app-specific presentation hooks without replacing the grid internals.
Switch to stacked layout through tableOptions.stacked when a card layout is more readable on narrow screens.

Composite — themed datagrid configuration

      import { Datagrid, NgbTableOptions } from '@angular-bootstrap/ngbootstrap';

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="rows"
      [theme]="'bootstrap'"
      [tableOptions]="tableOptions"
      [rowClass]="rowClass"
    ></ngb-datagrid>
  `,
})
export class OrdersVisualDesignDemo {
  readonly tableOptions: NgbTableOptions = {
    density: 'comfortable',
    stacked: false,
    zebraStripes: true,
    hoverRows: true,
    responsive: true,
  };

  rowClass = (row: OrderRow) => ({
    'orders-row-overdue': row.status === 'Pending',
  });
}

Standalone table option variants

      // Compact mode
tableOptions = { density: 'compact', stacked: false };

// Stacked card mode
tableOptions = { density: 'comfortable', stacked: true };