arrow_back Back to the Blog

Directus Spotlight: Layouts

By Rijk van Zanten on August 11, 2022

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. You can also choose to refresh the data continuously, in real-time, via web sockets – for example, if you’re tracking a fleet of IoT devices or vehicles.
  • 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 thhe 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.

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 cloud-exclusive layout (you have to be using Directus Cloud to access it). The Kanban layout 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, Directus Cloud is always adding more Layouts to its Cloud Exclusive 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. You can learn about other key tools by reading more of our Spotlights.

Want to write for us?

We're always looking for new writers and ideas. If you have an idea for content we should cover, or are interested in submitting your work, give us a shout.

Press and Media
For any press or media inquiries, feel free to reach out via our contact form and we can discuss. Contact us
Brand Assets
Use the link below to download a zip file containing of our brand guidelines, vector logo, or other resources. Download brand assets

Take back control of your data.

No spam, just important updates regarding Directus.