Skip to content

Gantt Svelte Example

This example shows the Gantt plugin through the Svelte wrapper without adding a catalog registration.

svelte
<script lang="ts">
  import { RevoGrid } from '@revolist/svelte-datagrid';
  import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/revogrid-enterprise';
  import {
    DEPENDENCIES,
    GANTT_CONFIG_BASE,
    STANDARD_CALENDAR,
    TASKS,
  } from './gantt-data';
  import { currentTheme } from '../composables/useRandomData';

  const { isDark } = currentTheme();

  const plugins = [GanttPlugin];
  const columns = [
    createDefaultTaskTableColumn('wbs'),
    createDefaultTaskTableColumn('name'),
  ];
  const calendars = [STANDARD_CALENDAR];
</script>

<RevoGrid
  style="height: 500px"
  theme={isDark() ? 'darkCompact' : 'compact'}
  hideAttribution
  {plugins}
  source={TASKS}
  {columns}
  gantt={GANTT_CONFIG_BASE}
  ganttDependencies={DEPENDENCIES}
  ganttCalendars={calendars}
/>