Component

Dashboard Grid

Draggable, resizable dashboard tiles with responsive columns and layout change events

import { NeuDashboardGridComponent } from '@neural-ui/core/dashboard-grid';

2-column grid with large tiles

Gráfico de ventas

Resumen

Acciones rápidas

3-column grid (drag to reorder)

Usuarios activos

Ingresos

Pedidos

Tasa conversión

Sesiones

Rebote

Order users, revenue, orders, conversion, sessions, bounce

import { NeuDashboardGridComponent } from '@neural-ui/core/dashboard-grid';
import { NeuDashboardTileConfig } from '@neural-ui/core/dashboard-grid';

@Component({
  imports: [NeuDashboardGridComponent],
  template: `
    <neu-dashboard-grid
      [tiles]="tiles()"
      [columns]="3"
      (orderChange)="tiles.set($event)"
    >
      @for (tile of tiles(); track tile.id) {
        <div [attr.data-tile-id]="tile.id" class="tile-card">
          <h3>{{ tile.title }}</h3>
          <!-- métricas, gráficos, etc. / metrics, charts, etc. -->
        </div>
      }
    </neu-dashboard-grid>
  `
})
export class DashboardComponent {
  tiles = signal<NeuDashboardTileConfig[]>([
    { id: 'sales',   title: 'Sales' },
    { id: 'orders',  title: 'Orders' },
    { id: 'users',   title: 'Users' },
  ]);
}