Gantt Toolbar

GanttToolbar

GanttToolbar: ({ grid, columns, visuals: initialVisuals }: GanttToolbarComponentProps) => preact.JSX.Element;

---

GanttToolbarColumnOption

A single column entry shown in the Gantt toolbar column-visibility dropdown.

interface GanttToolbarColumnOption {
  /** Property name matching a task-table column (e.g. `'wbs'`, `'status'`). */
    prop: string;
  /** Human-readable label shown in the dropdown. */
    label: string;
  /**
     * Whether the column is visible by default.
     * Columns with `visible: false` will be added to `grid.hideColumns` on mount.
     * @default true
     */
    visible?: boolean
}

---

GanttToolbarVisuals

Initial visual toggle state passed to the toolbar.

interface GanttToolbarVisuals {
  showBaseline?: boolean;
  showCriticalPath?: boolean
}

---

GanttToolbarOptions

Options accepted by {@link defineGanttToolbar}.

interface GanttToolbarOptions {
  /** The `revo-grid` element the toolbar should control. */
    grid: HTMLRevoGridElement;
  /**
     * Column options to show in the visibility dropdown.
     * If omitted, no column dropdown is rendered.
     */
    columns?: GanttToolbarColumnOption[];
  /**
     * Initial state of the visual/scheduling toggles.
     * When omitted, values are read from the current `grid.gantt.visuals` config.
     */
    visuals?: GanttToolbarVisuals
}

---

defineGanttToolbar

Mounts the Gantt editing toolbar into el and wires it to the given revo-grid element. Call this once after the grid’s gantt property has been set so the toolbar can read the initial visual config.

Example

import { defineGanttToolbar } from '@revolist/revogrid-enterprise';

const toolbarEl = document.querySelector('#gantt-toolbar');
const grid      = document.querySelector('revo-grid');

defineGanttToolbar(toolbarEl, {
  grid,
  columns: [
    { prop: 'wbs',       label: 'WBS',       visible: true  },
    { prop: 'name',      label: 'Name',       visible: true  },
    { prop: 'startDate', label: 'Start Date', visible: true  },
    { prop: 'duration',  label: 'Duration',   visible: true  },
    { prop: 'status',    label: 'Status',     visible: true  },
    { prop: 'endDate',   label: 'End Date',   visible: false },
  ],
  visuals: {
    showBaseline:                true,
    showCriticalPath:            true,
  },
});

defineGanttToolbar: (el: HTMLElement, options: GanttToolbarOptions) => void;