Layout Extensions

Create custom ways to view and interact with collection items

Layouts determine how items in a collection are displayed in the admin app.

Overview

Directus includes 8 built-in layouts:

• Table - Spreadsheet-style rows and columns
• Cards - Card grid with image previews
• Calendar - Calendar view for date-based items
• Map - Geographic visualization
• Kanban - Board with draggable cards
• Timeline - Chronological timeline
• List - Simple list view
• Grid - Masonry grid

Creating a Layout

npm init directus-extension
# Select "layout" as the extension type

Layout Structure

import { defineLayout } from '@directus/extensions-sdk';

export default defineLayout({
  id: 'my-layout',
  name: 'My Layout',
  icon: 'view_module',
  component: LayoutComponent,
  slots: {
    options: OptionsComponent,
    sidebar: SidebarComponent,
    actions: ActionsComponent,
  },
});

Component Props

The layout component receives:

interface LayoutProps {
  collection: string;
  selection: (string | number)[];
  layoutOptions: Record<string, any>;
  layoutQuery: Record<string, any>;
  filters: Filter[];
  search: string;
}

Next Steps

Interfaces

Create input interfaces

Modules

Create custom modules