How to Create Tables in Drupal CMS

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

The video above explores methods for creating and managing tables in Drupal. Whether you need inline tables or complex data displays with sorting and filtering capabilities, this guide walks you through multiple approaches from basic CKEditor functionality to custom code implementation with DataTables integration.

Tables in CKEditor: The Simplest Approach

CKEditor provides built-in table functionality that allows content editors to create and manage tables directly within the text editor. This approach works well for simple, inline table without requiring additional modules.

Getting Started with CKEditor Tables

Drupal CMS includes CKEditor with table support enabled by default.

To verify or enable the table functionality:

1. Navigate to Configuration > Content Authoring > Text formats and editors
2. Click Configure on your desired text format
3. Ensure the table button appears in the Active toolbar section
4. If not visible, drag the table icon from Available buttons to Active toolbar

The table button provides comprehensive table management features:

• Insert and delete columns – Add columns to the left or right of the current selection
• Insert and delete rows – Add rows above or below the current position
• Set header rows – Define which rows should be treated as table headers
• Set header columns – Mark specific columns as headers with special styling
• Merge cells – Combine multiple cells using colspan and rowspan
• Cell properties – Control individual cell formatting and content

Copy and Paste from Google Sheets

CKEditor supports direct copying and pasting from external sources like Google Sheets:

1. Open your Google Sheet with the data
2. Select and copy the desired range of cells
3. Paste the content directly into the editor

The table structure, including multiple columns and rows, transfers seamlessly. This method provides a quick way to move tabular data into Drupal without manually creating it.

TableField Module

The TableField module offers a dedicated field type for storing tabular data. This approach provides structured data storage while maintaining flexibility for content editors.

Installation and Configuration

Install TableField using Composer, then enable it.

composer require 'drupal/tablefield:^3.0'

Adding Tables to Content Types

To add a table field to a content type:

1. Navigate to Structure > Content types
2. Select your content type and click Manage fields
3. Click Add field and select Table field from the field type options
4. Configure the field label and machine name
5. On the field settings page, configure the following options:
   • Allow users to export as CSV – Enables CSV export functionality
   • Restrict rebuilding – Prevents editors from changing table dimensions
   • Restrict importing – Disables data import features
   • Cell processing – Choose between plain text or filtered text

On the Manage form display page, ensure the widget is set to “Table field” to provide the editing interface.

And on the Manage display page, ensure the “Tabular View” is used as the formatter.

Import and Export Functionality

TableField provides three methods for populating table data:

Manual Entry: Type directly into each cell using the provided grid interface.

Copy and Paste: Click the “Copy and Paste” section, paste your data (tab or comma-delimited), and click “Import & Rebuild” to populate the table.

CSV Import: Use the “Import CSV” option to upload a properly formatted CSV file containing your table data.

The rebuild functionality allows editors to change the number of rows and columns dynamically. You can specify exact dimensions and click Rebuild to adjust the table structure.

Text Format Configuration

Configure the table field to use a text format that provides additional functionality:

1. Edit the table field settings
2. Under “Table cell processing,” select “Filtered text”
3. Save the field configuration
4. Edit your content and select a text format (such as “Content”)
5. Configure the text format to include filters like “Convert URLs into links”

This configuration automatically converts plain text URLs in table cells into clickable links.

Note: TableField stores data as a serialized array in the database. While this simplifies data entry, it may require additional processing for search indexing or complex queries.

Ultimate Table Field Module

The Ultimate Table Field module provides a different approach to table management with enhanced cell type support and a unique editing interface.

Setting Up Ultimate Table Field

Install the module via Composer:

composer require 'drupal/ultimate_table_field:^2.0'

After installation, navigate to Structure > Content types > Manage fields and add a new Ultimate Table field.

The module offers multiple cell type options:

• Text – Single-line text input
• Long text – Multi-line text areas
• Link – URL fields with link text
• File – File upload functionality

Select all required cell types during field configuration to make them available for use.

Cell Types and Data Structure

Ultimate Table Field treats each cell as a distinct entity with its own data type. This structure provides more flexibility than simple text storage:

1. Add a field to your content type
2. Configure which cell types editors can use
3. On the Manage form display page, select “Ultimate table” as the widget
4. On the Manage display page, choose “Ultimate table” as the formatter

Managing Columns and Rows

The editing interface uses a column-first approach:

1. Define column headers by clicking “Add column”
2. Enter header text for each column
3. Add rows by clicking “Add row”
4. Populate cells with appropriate data types (text, links, files)
5. Reorder rows using drag handles

The module lacks quick import options like CSV support, requiring manual entry for each cell.

Paragraphs Table

The Paragraphs Table module combines the flexibility of the Paragraphs module with specialized table rendering capabilities. This approach enables frontend editing and multiple display format options.

Install the module via Composer:

composer require 'drupal/paragraphs_table:^2.0'

Creating Paragraph Types for Tables

Set up a paragraph type to represent table rows:

1. Install both the Paragraphs and Paragraphs Table modules
2. Navigate to Structure > Paragraph types
3. Create a new paragraph type (for example, “Row”)
4. Add fields representing your table columns:
   • Name (plain text field)
   • Summary (long text field)
   • Value (number field)
5. Configure the field order on the Manage display page

The field order on the Manage display page determines column order in the rendered table.

Add a paragraph reference field to your content type:

1. Select “Paragraph” as the field type
2. On the field settings page, select your row paragraph type
3. Configure the field widget on Manage form display to “Paragraphs table”

Frontend Management Interface

Paragraphs Table provides a unique frontend editing experience:

• Click rows to edit individual entries
• Duplicate existing rows to copy data
• Delete rows directly from the display
• Reorder rows using drag-and-drop

This interface enables content management without accessing the full edit form, making it useful for scenarios where users need quick table updates.

Display Format Options

Configure the formatter on the Manage display page to choose how tables render:

Standard Table: Displays data as a basic HTML table with your defined columns.

Bootstrap Table: Applies Bootstrap styling with features like:

• Row highlighting on hover
• Responsive behavior
• Column totals for numeric fields

DataTables: Integrates the DataTables JavaScript library to provide:

• Sorting by clicking column headers
• Search functionality
• Pagination controls
• Export options (copy, CSV, Excel)

Google Charts: Renders table data as interactive charts, useful for data visualization.

Select your preferred format and configure options like summary rows for numeric columns.

Views-Based Tables: Query and Display

The Views module provides options for displaying entity data in a table format.

This approach works well when table data comes from content entities, paragraphs, or other structured Drupal data.

Creating Tables with Paragraphs and Views

Want to learn more about Views, then checkout our “Getting started with Views in Drupal” course.

To display paragraph data in a table using Views:

1. Navigate to Structure > Views > Add view
2. Select your content type which has the paragraphs (for example, “Case Study”)
3. Choose “Create a block” as the display format
4. Click “Save and edit”

Configure the view to display paragraph data:

1. Under “Format,” change the display style to “Table”
2. Add a Relationship for your paragraph field:
   • Click “Add” under Relationships
   • Select “Paragraph: Field paragraphs”
   • Check “Require this relationship”
3. Add a Contextual Filter for Content ID:
   • Select “Content: ID”
   • Under “When the filter value is NOT available,” choose “Provide default value”
   • Set type to “Content ID from URL”
4. Add Fields for your paragraph data:
   • Remove the default fields
   • Add fields from your paragraph type (Name, Summary, Value)
   • Configure labels appropriately

This configuration creates a table displaying paragraph data for the current content item.

To make the table visible on the case study content page, you must add the block to a region or use Layout Builder.

Building Standard Views Tables

Create a simple table of content:

1. Create a new view showing your desired content type
2. Create a page display
3. Set format to “Table”
4. Add fields to display:
   • Title
   • Body (trimmed to a specific character count)
   • Authored by
   • Authored on
5. Configure field settings:
   • Add labels
   • Control text trimming
   • Format dates appropriately

Enhance the table with additional features:

Exposed Filters: Add filters that users can control:

1. Add a filter (for example, “Content: Title”)
2. Check “Expose this filter to visitors”
3. Set operator to “Contains” for partial matching
4. Configure label and other display options

Sorting: Enable column sorting:

1. Click settings under “Format: Table”
2. Check “Sortable” for desired columns
3. Set a default sort column and direction

Pagination: Control how many rows display:

1. Under “Pager,” select your preferred option
2. Configure items per page

Ajax: Enable Ajax for seamless updates:

1. Under “Advanced,” find “Use Ajax”
2. Set to “Yes” for dynamic filtering and sorting

Responsive Table Configuration

Drupal provides responsive table functionality that adapts to different screen sizes:

1. Edit your view and access table settings
2. For each column, set priority:
   • High – Always visible (mobile and up)
   • Medium – Hidden on mobile, visible on tablet and up
   • Low – Hidden on mobile and tablet, visible on desktop only

The backend theme (Claro) supports this functionality by default. Frontend themes must include responsive table JavaScript for the feature to work properly.

On smaller screens, users see a “Show all columns” button that reveals hidden columns in an expandable section.

Custom Code Implementation with DataTables

For maximum control and advanced functionality, you can create tables with custom code and integrate the DataTables JavaScript library for enhanced features.

Create Module

Begin by creating a module. You can do this using Drush with the following command:

drush generate module

Remember to enable the module afterwards.

Rendering Tables in Controllers

Next, generate a controller to render the table using Drush.

Execute the following command:

drush generate controller

Warning: If you can’t select your module when using the generate command make sure you first enable the module.

Modify the controller (src/Controller/*.php) to render a table:

     $rows = [
          ['Pathauto', '1.12', '850,000'],
          ['Token', '1.13', '920,000'],
          ['Metatag', '2.0', '780,000'],
          ['Webform', '6.2.3', '650,000'],
          ['Admin Toolbar', '3.4.2', '720,000'],
          ['Paragraphs', '1.17', '580,000'],
          ['Views Bulk Operations', '4.2.5', '490,000'],
          ['Entity Reference Revisions', '1.11', '610,000'],
          ['Google Analytics', '4.0.2', '530,000'],
          ['Redirect', '1.9', '690,000'],
      ];

    $build['content'] = [
      '#type' => 'table',
      '#header' => [
          $this->t('Module name'),
          $this->t('version'),
          $this->t('Installs'),
      ],
      '#rows' => $rows,
      '#empty' => $this->t('No modules have been installed.'),
      '#attributes' => ['class' => ['enable-datatables']],
      '#attached' => [
          'library' => [
              'module/datatables',
          ]
      ]
    ];

This render array creates an HTML table with the specified headers, rows, and an empty message.

Integrating DataTables Library

Create a library definition file (module.libraries.yml):

datatables_cdn:
  remote: https://datatables.net/
  version: 2.3.4
  license:
    name: MIT
    url: https://datatables.net/license/mit
    gpl-compatible: true
  css:
    theme:
      //cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css: { type: external, minified: true }
  js:
    //cdn.datatables.net/2.3.4/js/dataTables.min.js: { type: external, minified: true }

datatables:
  js:
    js/ww-datatables.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - module/datatables_cdn

This configuration:

• Defines the DataTables CDN library with CSS and JavaScript files
• Creates a local library that depends on Drupal core libraries and the CDN
• Uses protocol-relative URLs for flexibility

Attach the library in your controller:

return [
  '#type' => 'table',
  // ... other configuration ...
  '#attached' => [
    'library' => [
      'module/datatables',
    ],
  ],
];

JavaScript Behaviors

Create the JavaScript file (js/ww-datatables.js):

/**
 * @file
 * ww_custom behaviors.
 */
(function ($, Drupal, once) {

  'use strict';

  Drupal.behaviors.wwCustomDatatables = {
    attach (context, settings) {

      $(once(
        'datatable-loaded-once',
        '.enable-datatables',
        context
      ))
        .each(function () {

          $(this).DataTable({
            lengthMenu: [5, 10, 25]
          });
        });

    }
  };

} (jQuery, Drupal, once));

This behavior:

• Uses Drupal’s once library to prevent multiple initializations
• Finds tables with the enable-datatables class
• Initializes DataTables with custom configuration
• Runs only once per element even when the DOM changes

The DataTables library provides:

• Sorting – Click column headers to sort
• Searching – Global search box filters all columns
• Pagination – Configure rows per page
• Exporting – Copy or download table data

Summary

Drupal provides multiple approaches for creating and managing tables, each suited to different requirements:

• CKEditor tables work best for simple inline tables within content, offering quick creation without additional modules.
• TableField provides structured storage for tabular data at the field level, with import/export capabilities and text format support.
• Ultimate Table Field offers advanced cell type support with text, links, and files, suitable for complex data structures.
• Paragraphs Table combines paragraph flexibility with table rendering, enabling frontend editing and multiple display formats including DataTables integration.
• Views-based tables excel at displaying entity data with sorting, filtering, and responsive features built in.
• Custom code implementation provides complete control with DataTables integration for advanced functionality like search, pagination, and export features.

Select the approach that matches your data complexity, editing workflow, and display requirements. For simple needs, start with CKEditor or TableField. For complex data management with advanced features, consider Paragraphs Table or custom implementations with DataTables.