Directus Auto-wrapping Table Layout Extension

This is a Directus layout extension that provides the following features:

  1. Automatic text wrapping in table cells, preventing long text truncation
  2. Adaptive table column width to avoid horizontal scrolling
  3. Automatic row height adjustment based on content

Features

  • Automatic text wrapping in cells for better long text viewing
  • Adaptive table width to maximize available space
  • Automatic row height adjustment to ensure all content is visible
  • Preserves native table features like sorting and selection

Installation

Via NPM

cd directus-project
npm install directus-layout-text-auto-wrapping

Manual Installation

  1. Build the extension:
npm run build
  1. Copy the files from the dist directory to the extensions/layouts/text-auto-wrapping directory in your Directus project

Usage

  1. In the Directus collection page, click on the layout switcher button
  2. Select “Auto-wrapping Table Layout”
  3. In the layout options, you can select which fields to display

Configuration Options

  • Field Selection: Choose which fields to display in the table

Development

# Install dependencies
npm install

# Build in development mode
npm run dev

# Build for production
npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.