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.

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.

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.

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:

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

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.

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.

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.

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.

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:

• Organize content types with content groups to improve your content creators' experience.
• Reuse collections of elements that you need in multiple types of content.
• Enrich your text with tweets or testimonials using components.
• Use guidelines to give your team useful information for more efficient content production.