codihauscodihaus
65

Directus Extension Grid Layout

screenshot of Directus Extension Grid Layout
vue
scss
directus

Directus Extension to display items as grid with customizable, flexible display.

GithubDemo

Overview

Directus Grid Layout Extension is a custom display type that enhances the way data is displayed in Directus. It allows users to present data in a grid layout that is both intuitive and visually appealing. This extension is developed by CodiHaus.

Features

  • Enhanced Data Display: Directus Grid Layout Extension improves the way data is presented in Directus by allowing users to display it in a grid layout.
  • Intuitive Interface: Users can easily select the grid layout option from the right sidebar, making it simple to switch between different display types.
  • Customizable Configurations: The extension provides additional configurations that allow users to select the data to be shown on each item in the grid.

Installation via npm

  1. Open your Directus project at the root level.
  2. Run the following command:
npm i directus-extension-grid-layout

Installation by Compiling

  1. Clone the Directus Grid Layout Extension repository.
  2. Navigate to the repository folder.
  3. Run the following command:
npm run build
  1. Copy the index.js file from the dist/index.js folder to the /directus/extension/directus-extension-grid-layout folder.
  2. Restart your Directus instance to apply the changes.

Summary

Directus Grid Layout Extension is a powerful tool that enhances the way data is displayed in Directus. With its intuitive interface and customizable configurations, users can easily create visually appealing grid layouts for their data. The extension is available for installation via npm or by compiling the source code.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

directus
Directus

A website that uses Directus as an open source headless CMS to manage content. This includes features such as a customizable content model, role-based access control, and API-based content delivery to support a wide range of digital experiences.

Recoil

Recoil is a state management library for React that provides an intuitive and flexible API for managing and sharing state across components. It supports a range of features, including derived state, asynchronous updates, and time-travel debugging, and is designed to work well with the React ecosystem and other state management solutions.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.