TimelineGrid

Usage

Define columns with stable ids, labels and optional descriptions. Each row supplies its items; start identifies a column id and span extends across consecutive columns. The grid clamps spans to the available columns and ignores items with an unknown start. Use tone, subtitle and meta to describe activities. minColumnWidth preserves readable columns and the schedule scrolls locally on narrow screens.

Examples

Try the interaction and open Code for the complete implementation.

Try and configure

Change the options, try the result and see the template update. Code contains the full executable example.

<neu-timeline-grid
  [columns]="columns"
  [rows]="rows"
  density="normal"
  minColumnWidth="112px"
  [stickyLabels]="true"
  [selectedItemId]="selectedItemId()"
  [selectedSlot]="selectedSlot()"
  (itemClick)="chooseItem($event)"
  (slotClick)="chooseSlot($event)"
/>

import { signal } from '@angular/core';

export const columns = [
  {
    "id": "mon",
    "label": "Monday"
  },
  {
    "id": "tue",
    "label": "Tuesday"
  },
  {
    "id": "wed",
    "label": "Wednesday"
  }
];

export const rows = [
  {
    "id": "design",
    "label": "Design",
    "description": "Product team",
    "items": [
      {
        "id": "research",
        "title": "Research",
        "start": "mon",
        "span": 2,
        "tone": "info",
        "subtitle": "Interviews"
      }
    ]
  },
  {
    "id": "engineering",
    "label": "Engineering",
    "items": [
      {
        "id": "review",
        "title": "Review",
        "start": "tue",
        "tone": "success"
      },
      {
        "id": "release",
        "title": "Release",
        "start": "wed",
        "tone": "warning"
      }
    ]
  }
];

export const selectedItemId = signal(null);

export const selectedSlot = signal(null);

import type { NeuTimelineGridRow } from '@neural-ui/core/timeline-grid';

const rows: readonly NeuTimelineGridRow[] = [
  {
    "id": "design",
    "label": "Design",
    "description": "Product team",
    "items": [
      {
        "id": "research",
        "title": "Research",
        "start": "mon",
        "span": 2,
        "tone": "info",
        "subtitle": "Interviews"
      }
    ]
  },
  {
    "id": "engineering",
    "label": "Engineering",
    "items": [
      {
        "id": "review",
        "title": "Review",
        "start": "tue",
        "tone": "success"
      },
      {
        "id": "release",
        "title": "Release",
        "start": "wed",
        "tone": "warning"
      }
    ]
  }
];

Data and content

itemClick and slotClick report activation; they do not apply selection automatically. Update selectedItemId or selectedSlot to show the selection your application accepts. Clear the other value for mutually exclusive item/slot selection. This component displays data; it does not implement dragging or editing. It has no Templates.

Accessibility and keyboard

Items and slots are native buttons named from their row and content. Use Tab to reach them and Enter or Space to activate them. Applied selections expose aria-pressed. The scroll viewport is keyboard focusable; stickyLabels keeps row names visible while scrolling.

API

Inputs and Outputs match the installed package. Named types link to definitions. Every available Template has a Demo and Code example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDensity } from '@neural-ui/core';

// Public declaration (reference only)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

import type { NeuTimelineGridColumn } from '@neural-ui/core/timeline-grid';

// Public declaration (reference only)
export interface NeuTimelineGridColumn {
  description?: string;
  id: string;
  label: string;
}

import type { NeuTimelineGridItemTone } from '@neural-ui/core/timeline-grid';

import type { NeuTimelineGridItem } from '@neural-ui/core/timeline-grid';

// Public declaration (reference only)
export interface NeuTimelineGridItem {
  id: string;
  meta?: string;
  span?: number;
  start: string;
  subtitle?: string;
  title: string;
  tone?: NeuTimelineGridItemTone;
}

import type { NeuTimelineGridItemTone } from '@neural-ui/core/timeline-grid';

// Public declaration (reference only)
export type NeuTimelineGridItemTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';

import type { NeuTimelineGridItem } from '@neural-ui/core/timeline-grid';

import type { NeuTimelineGridRow } from '@neural-ui/core/timeline-grid';

// Public declaration (reference only)
export interface NeuTimelineGridRow {
  description?: string;
  id: string;
  items: readonly NeuTimelineGridItem[];
  label: string;
}

import type { NeuTimelineGridSlotSelection } from '@neural-ui/core/timeline-grid';

// Public declaration (reference only)
export interface NeuTimelineGridSlotSelection {
  columnId: string;
  rowId: string;
}

Styles and tokens

Customize supported public tokens and check both themes. Example illustrations and application state are not Core inputs.

Related components

Use related components to complete your interface.

• Timeline
• Table