Live demo of our MCP this Thursday! RSVP
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our 13k member Discord community.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Chat With UsGet Started Free
GitHub logo30,736
Back
product
Thursday, August 11, 2022

Directus Spotlight: Layouts

A key feature in our Core product – Layouts – provides the easiest, most efficient way to browse any collection of data, whether text, media, geospatial or temporal.
Grid of images showing the Directus user interface

At Directus, we’re dedicated to developing solutions that democratize data across the enterprise by enabling technical and non-technical users alike to browse, manage, visualize and connect to data easily. To that end, a key tool in our Core product – Layouts – provides the easiest, most efficient way to browse any collection of data, whether text, media, geospatial or temporal.

Layouts solve the problem of searching, filtering, and viewing the data you need within your ever-expanding data stores, providing maximum control and flexibility simultaneously.

Directus Layouts exist within the Data Studio as extensions. Directus Core comes with five built-in layouts – Table, Cards, Maps and Calendar – which are all highly configurable, so you can tweak them to display your data exactly the way you prefer. Additionally, you can access the Kanban layout in Directus Cloud.

By default, all collections will first appear in the Table layout, but you can choose from different options by navigating to Layout Options within the page sidebar:

Once you choose the desired Layout, you can configure it any way you like. The following functionality is available for all layouts:

  • Data operations: You can search, filter and add data, and selet items.
  • Auto-refresh: You can set data to refresh at various intervals, such as every 10 seconds or every 10 minutes. 
  • Import/export capabilities: The data for all layouts can be imported or exported via CSV, JSON or XML.
  • Bookmarks: Once you’ve configured a layout to your specifications, you can bookmark it with all of your configurations saved.

Let’s take a look at our built-in layouts in greater detail, along with some of the configuration options they provide:

Table: The Table layout presents any collection or type of data in rows and columns. In addition to all of the data operations mentioned above, table supports drag-and-drop functionality, so you can organize the rows and columns as you see fit. You can also adjust the spacing, add and remove fields, and toggle and reorder columns, and select items to perform operations.

Cards: The Cards layout is for media files – images, pdfs, icons and so on. This is the default layout for both the User Directory and File Library. Using options in the right-hand sidebar, you can set the image source, name files using static text or fields, add subtitles, and leverage advanced options such as Image Fit and Fallback Icon.

A screenshot of a photo gallery on a computer screen.

Calendar: The Calendar layout is for browsing collections of temporal data – anything to do with dates and time. Some of the layout options include the ability to customize the display template; view data by month, week and day; and set start and end times for fields.

Maps: Directus offers a Maps layout for browsing geospatial data. Users can access a world map with data displayed as JSON points on the map (i.e., latitude-longitude or single-point locations) or geometry such as polygons and lines (for example, flight patterns or submarine routes).

To set how data is displayed, simply choose the geospatial field and various parameters in the right-hand sidebar. For each data point, you can select, drill down, zoom in or out, filter and search. You can also choose to cluster nearby data.

Kanban: Kanban is a layout that enables you to browse and manage data as cards organized with a workflow of columns.

Kanban is great for managing Collections that serve as project management tools, to-do lists, or any other data that progresses across stages, such as statuses of "In Progress", "Under Review", and "Complete". You can customize the display of tiles with titles, tags, dates, and images; create new groupings and assign an owner; and drag and drop tiles into different columns to update the status.

In our Documentation, you’ll find additional information and details about all of our built-in layouts, and how you can configure them to meet your needs.

Imagine the Possibilities!

Keep in mind, Directus is completely open-source, modular and extensible – so you’re free to create any Layout you need, and add it to your project as an extension. The possibilities are limited only to your imagination! Additionally, we're always adding more Layouts to its Extensions, so check back often to stay up-to-date with the latest and greatest.

Directus Layouts overlaps with other tools to provide the robust experience our users have come to expect from the Directus platform. 

A screen shot of a web page showing a group of people.

Posted By

Rijk van Zanten

Rijk van Zanten

CTO, Co-Founder

Share

LinkedIn LogoTwitter LogoReddit LogoDev.to Logo

Sign up for updates 🐇

Get insights, releases, and exciting news delivered directly to your inbox once a month. No spam - we promise. 🙂

  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy