Tables and tabular data

Is this page helpful?
calendar icon
user iconTomas Nosek, Carlo Vinci
clock icon3 minutes
bullseye iconLinked items / Components / Custom elements / Rich text (formatting) / Content model
arrow-down-line iconDownload PDF
Unlike with traditional CMSs, you have multiple options to present data effectively with Kontent.ai. This article explores various methods for creating tables that are not only visually appealing but also enhance the user experience. Dive in to discover the best approach for displaying your data in a clear and accessible way.
Content creators often need to show data in a user-friendly way. That’s why they choose tables and their clear, visually appealing way of displaying information. Nevertheless, their popularity has decreased over the years as the user experience of tables on mobile devices is poor.
Review the following approaches to see which works best for your situation. Most customers use a combination of them as different use cases may prefer different approaches.

Approach A: Model data, display tables

Before creating tables, think about modeling the underlying data. For example, your website likely contains many comparison tables if you manufacture and sell products. In the end, though, it displays the same data from various angles.
ProsCons
  • One data entry serves different display purposes, which saves creation time
  • Allows content reuse and nesting
  • The appearance is preconfigured for each display
  • The appearance may differ for each channel
  • Requires configuration in Kontent.ai only, without any integrations or complex custom development
  • Easy re-ordering of content
  • Overcomplicated for simple or single-use tables
  • Requires the content-first mindset from the developers and content creators

Approach B: Default rich-text tables

Kontent.ai’s rich text element comes with built-in tables. They are suitable for small tables that only require basic styling and don’t need any development or third-party plugins. Kontent.ai returns a valid HTML table, and using a JavaScript plugin for responsive tables, you can achieve responsiveness quickly.
ProsCons
  • Easiest to use for content creators (cells visible to creators, no need to make modeling decisions)
  • Doesn’t require any changes toward the traditional page-first mindset
  • Doesn’t require configuration or custom development
  • Too simple for complex tables (for example, not cell merging, styling, or width adjusting)
  • Only text and images can be added to the table, no components or linked items
  • Cannot reuse content (only the whole table can be reused)
  • Many channels may not fully support HTML tables, and they will require code adjustments to be responsive

Approach C: Modeled tables

You can also create a table in your content model. Create three types – Table, Table row, and Table cell. Using them together, either reusably via linked items or uniquely as components, will enable you to create tables as you need.
ProsCons
  • Covers more complex scenarios
  • Can be displayed as tables, CSS gridsarrow-right-top-square icon, or any other way – it’s a JSON object to be processed
  • Allows content reuse and nesting
  • Cells can include any content based on the model configuration
  • Easy re-ordering of content
  • Doesn’t require any changes toward the traditional page-first mindset
  • Requires configuration and development of how tables will be resolved
  • Not straightforward to use for content creators, can be hard to grasp the context for very large tables

Approach D: 3rd-party tables

You also always have the option to integrate a 3rd-party solution for table creation (such as CKEditor or TinyMCE) via a custom element. This gives you, in theory, unlimited options regarding your scenarios. However, it comes with the cost of integration development and maintenance.
ProsCons
  • All advanced features of your integration, no restriction by the Kontent.ai platform
  • Possibility to have a full visual editing experience for content creators
  • Doesn’t require any changes toward the traditional page-first mindset
  • Requires complex configuration and development
  • The integration will likely render HTML, which will then be returned in the JSON API response
  • Support for the 3rd-party editing by its vendor
  • Cheat sheets
  • Asset management
  • Content hierarchy and formatting
  • Tables and tabular data
  • desktop-alt icon
  • Cheat sheets
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
Copyright © 2024 Kontent.aiarrow-right-top-square icon. All rights reserved.
  • Webarrow-right-top-square icon
  • Privacy policyarrow-right-top-square icon
  • Cookies policy
  • Consent settingsarrow-right-top-square icon
  • Securityarrow-right-top-square icon
  • GDPRarrow-right-top-square icon

Why is this important?

Available solutions with Kontent.ai

  • Sign in
  • Why is this important?
  • Available solutions with Kontent.ai