Skip navigation

Manage tables in Kontent

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.

    The Movie content type that defines the information structure for a movie - its name, release year, country of origin and a link to IMDB.

    The Movie content type that defines the information structure for a movie.

    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 only to the Movie content type.

    The Catalog content type with one rich text used to hold components with individual items of the catalog.

    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:

    A component of the Movies type that holds a nested Movie component for each movie of the catalog


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

    NameYearCountryLink
    The Shawshank Redemption1994USAIMDBOpens in a new window
    From Dusk Till Dawn1996USAIMDBOpens in a new window

    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 where you want.

    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 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 in Kontent out-of-the-box and all you need is a rich text editor, no content modeling involved.

    Built-in table in rich text editor in Kontent

    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 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 TinyMCEOpens in a new window, CKEditorOpens in a new window, and SummernoteOpens in a new window.

    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.

    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 galleryOpens in a new window 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 table editor in rich text 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: