Skip navigation

Manage tables in Kontent.ai

7 min read
Download PDF

Tables help people better understand complex information. You can use them to clearly present lists of product features, offices in the area, property listings, and so on. In Kontent.ai, you can model this kind of information using structured content.

The beauty of structured content is that you can display it however you want. It can be a classic table on your website or interactive tiles in your mobile app, for instance.

Table of contents

    Key points

    • Using structured content to model tables brings you complete freedom of how you present the information on your website or an app.
    • If your tables don't have more than a couple of rows and columns, the built-in table in a rich text might do the job.
    • You can also use a custom element for tables but that requires some work from your development team.

    Model your content and use it anywhere, anyhow

    When creating tables in Kontent.ai, the recommended way to do so is by structuring your content. The actual content can be anything that needs to be sorted, a pricing list, online courses, or a number of products.

    Let's say you have a list of products that you want to display. Each product has details such as its name, price, and product number. In Kontent.ai, you can create this structure using components. The idea is that you create one component for each product, which represents one row in a table.

    Need to reuse your table?

    Think about where you want to use your table before you start creating it. This way, you'll know whether to use components for one-time use, or reusable content items.

    You can also convert components to separate items, if you decide to reuse them later on.

    To create such a product table in Kontent.ai, you need two content types. One for the table itself and one for the individual products.

    Step 1: Define the Product content type

    First, create a content type for individual products and name it Product. Now, add content elements for each piece of information you have about your products:

    • Text elements for the product name and description
    • Number elements for its price and product number. 
    • Also, add guidelines to the elements to clarify how to fill in the information.

    You'll use this content type to create components for each product in your table.

    Step 2: Define the content type for your table

    Create a second content type called Table and add one rich text element to it. Your content creators will be adding products as components to the rich text.

    Add a guideline to the rich text explaining how to add a new table entry. Limit the rich text to allow only the components and items of the Product type.

    Content type "Table" with a single rich text element set to allow only components or items of the "Product" type.

    The Table content type is universal

    Use the Table type for more than just products. For example, list your departments, university courses, and so on. To do that, allow the appropriate content types in the Table type limitations.

    Step 3: Create the table and fill it with content

    Now, your content creators will use both content types to create the table in 3 steps:

    1. Open a content item where you want to place the table. 
    2. In the rich text element, add a component based on the Table content type.
    3. In the Table component, add each product as a nested component of the Product type.
      • If you plan to reuse the content, add a linked item of the Product type instead.

    And that's it! The finished table can look something like this:

    Rich text element containing a component of the "Table" type which then contains two components of the "Product" type.

    As you can see, each component represents one row of the table. If you decide you want to arrange the rows differently or sort them, you can grab the components using and move them as needed.

    A simple way for simple content

    If the information you want to share is really simple, yet best shown as a table, you can use the built-in tables in Kontent.ai. If you want to show the opening hours of your office, for example, the built-in tables can do the job just fine.

    Keep in mind that once you have created your table this way, there's no easy way to move the rows around or reuse the table somewhere else. That's why it only makes sense to use built-in tables for a simple content that you won't need to reuse in the future.

    Table in the rich text editor. Some text is selected and the text formatting tooltip is visible.

    If you want to set the first table row as a header, your developers need to take care of it in your front-end app. For example, you can make the text bold so that your app can then recognize such a row as a header.

    Insert tables from external sources

    If your content creators are used to managing tables in the spreadsheet documents, you might want to provide them with a similar experience in Kontent.ai. This way of working requires involvement from your development team as they need to create a custom element first. Then, your creators could select a spreadsheet document from Google Drive, for instance, and insert it into a content item within a few clicks.

    Paste your table from a spreadsheet

    If you have your table in a spreadsheet such as Microsoft Excel, you can also copy the table from there and paste it directly into the rich text editor in Kontent.ai.

    If you prefer the old ways of working with content, you can also integrate WYSIWYG HTML editors, such as TinyMCE, into Kontent.ai. You can check out the custom elements for TinyMCE, CKEditor, and Summernote.

    Be careful with WYSIWYG editors

    These editors allow you to define visual aspect of the content. While that might sound useful, it can lead to visual inconsistencies or even break your app. Have a look at our blog post about the pitfalls of WYSIWYG editors.

    You can also check out our sample gallery of custom elements to see what else you can use.

    What's next?