Web Wash: How to Create Tables in Drupal CMS

Create a simple table of content:

Install the module via Composer:

Install the module via Composer:

Tables in CKEditor: The Simplest Approach

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

Boost Your Web Development Skills

The table button provides comprehensive table management features:

Getting Started with CKEditor Tables

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

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

  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
Table button in CKEditor

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.

  • 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

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

  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

Get lifetime access to all premium courses, a private site builder forum, and exclusive live streams.

TableField Module

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

Installation and Configuration

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.

drush generate module

Sorting: Enable column sorting:

The editing interface uses a column-first approach:

Import and Export Functionality

Install TableField using Composer, then enable it.

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

Exposed Filters: Add filters that users can control:

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

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

Text Format Configuration

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

  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”

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.

Bootstrap Table: Applies Bootstrap styling with features like:

Ultimate Table Field Module

The module offers multiple cell type options:

Setting Up Ultimate Table Field

Configure the view to display paragraph data:

Configure the view to display paragraph data:

Paragraphs Table provides a unique frontend editing experience:

  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 Ultimate Table Field module provides a different approach to table management with enhanced cell type support and a unique editing interface.

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

  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

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

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

Ajax: Enable Ajax for seamless updates:

Display Format Options

composer require 'drupal/paragraphs_table:^2.0'

Creating Paragraph Types for Tables

TableField provides three methods for populating table data:

/**
* @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));

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

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

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

Pagination: Control how many rows display:

Views-Based Tables: Query and Display

composer require 'drupal/ultimate_table_field:^2.0'

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

Creating Tables with Paragraphs and Views

Attach the library in your controller:

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

  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”

To display paragraph data in a table using Views:

  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

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.

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

Building Standard Views Tables

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

  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

Table of Contents

Enhance the table with additional features:

  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

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

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

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

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

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

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

Responsive Table Configuration

$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',
]
]
];

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

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

Custom Code Implementation with DataTables

Drupal CMS includes CKEditor with table support enabled by default.

Create Module

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

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

Rendering Tables in Controllers

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.

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

JavaScript Behaviors

Execute the following command:

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

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

Integrating DataTables Library

The DataTables library provides:

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.

  • 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

composer require 'drupal/tablefield:^3.0'

Adding Tables to Content Types

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

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

  • 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

drush generate controller

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.

  • 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.

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

Similar Posts