Skip navigation

Manage tables in Kontent

8 min read
Download PDF

Tables help people better understand complex information. You can use them to clearly present lists of movies, product features, offices in the area, and so on. In Kontent, you can model this kind of information using structured content and reuse it across your app. This way you can show it to your users however you wish – as a table, structured list, or information tiles, for example.

Table of contents

    Model your data and use it anywhere, anyhow

    If your data is large and complex, be it a catalog of product specifications, movies, or offices in your area, you want a way to model it in Kontent so you can insert it once and use it as many times as you need. You can achieve that by creating a model of your content and then structuring the content based on that model.

    The beauty of structured content is that you can display your content however you want in your app. Your products, movies, or offices can be a table on a web page for desktop browsers and tiles that users can swipe left or right in a mobile app, for instance.

    Example: A movie catalog

    Let's say you have a catalog of movies. Each movie in this catalog has details like its name, release year, country of origin, and a link.

    In Kontent, you can create this structure using components in rich text. The idea is that you put a component for each movie into a rich text. The rich text with the movies is then the whole catalog.

    To create such a movie catalog in Kontent, you need two content types. One for the whole catalog of movies and one for the individual movies.

    Step 1: Define the movie content type

    First, create a content type for individual movies and name it Movie. Into this content type, add content elements for each piece of information you have about movies in your catalog – text elements for the movie name, country of origin, and a link, a number element for its release year. Also, add guidelines to the elements to clarify how to use them.

    You'll use this content type to create components for each movie in your catalog.

    Content type "Movie" for one table row

    Step 2: Define the catalog content type

    Create a second content type called Catalog and add one rich text element to it. You'll be adding movies as components into this rich text.

    Add a guideline to the rich text telling your content creators not to mix components of more content types there. You can also limit the rich text to allow only the Movie content type.

    Content type "Catalog" with a sole rich text editor that's set to allow only components or items of the "Movie" content type.

    The Catalog content type is universal

    Use the Catalog type for more than just movies. For example, catalog your products, offices, drivers, and so on. To do that, allow the appropriate content types in the Catalog type limitations.

    Step 3: Create the catalog and fill it with data

    Now use both content types to create the catalog and add movies to it. 

    1. Go to a content item where you want to place the catalog. 
    2. Into a rich text there, add a component based on the Catalog content type. 
    3. Into this component, add each movie as a nested component of the Movie type. 

    When you add more movies, you will see something like this:

    Content item with its rich text editor containing a component of the "Catalog" type which in turn contains two components of the "Movie" type with movie details filled in.

    When you display the components from the picture above as a table in your app, it could look like this:

    The Shawshank Redemption1994USAIMDB
    From Dusk Till Dawn1996USAIMDB

    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, just grab the components using and move them as needed.

    You can display the components as a table like this but you can also display them in a variety of other ways, such as a structured list, tiles that users can swipe left or right, or anyhow else you like.

    Reuse your catalog

    If you want to reuse some of the movies or the whole catalog elsewhere, you can convert the components to separate content items. 

    You can also create content items instead of components in the first place if you know from the beginning that you'll need to reuse the catalog elsewhere.

    A simple way for simple data

    If the information you want to get across is simple, yet best shown as a table, you can use the built-in tables in Kontent. They're just like your ordinary tables, you can format text in them, add links, and even insert images. If you want to show the opening hours of your office, for example, the built-in tables can do the job for you.

    This approach is great because it's out-of-the-box in Kontent and all you need is a rich text editor, no content modeling involved.

    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, you need to do so in your front-end app. If you need to distinguish whether the first row is a header row or not, you can make the header text bold, for example. Your app can then recognize the row as a header.

    Keep in mind that once you have created your table, there's no easy way to move the rows around to sort the data or reuse the table somewhere else. That might not be a problem for a table with three to six rows, but it can get difficult to manage if your table is a bit larger.

    Paste your table from a spreadsheet

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

    Use a custom element for table management

    Custom elements allow you to integrate WYSIWYG HTML editors, such as TinyMCE, into Kontent. This can be useful if your content creators are used to managing tables in other text processors and spreadsheets. If you want to provide them with a similar experience in Kontent, you can ask your development team to set up one of the existing custom elements or create a new one. We provide 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.

    Another option could be to ask your development team to create a custom element that would allow selecting a spreadsheet document from Google Drive, for instance, and insert it to a content item in Kontent. You can also check out our sample gallery of custom elements to see what else you can use them for.

    What's next?

    As you can see, there are several ways to handle tables in Kontent. If you want complete freedom of how you present complex information in your app and want to be able to rearrange and reuse the data, model it using the components in rich text.

    If your tables don't have more than a couple of rows and columns, the built-in rich text table editor might fulfill your needs. You can also use a custom element for tables but that needs more work from your development team and generally has more drawbacks than benefits.

    Check out other tutorials about creating content and content models: