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.
Pros
Cons
One data entry serves different display purposes, which saves creation time
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.
Pros
Cons
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)
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.
Pros
Cons
Covers more complex scenarios
Can be displayed as tables, CSS grids, 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.
Pros
Cons
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
Tomas Nosek, Carlo Vinci
3 minutes
Linked items / Components / Custom elements / Rich text (formatting) / Content model
