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.
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.
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.
- Go to a content item where you want to place the catalog.
- Into a rich text there, add a component based on the Catalog content type.
- 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:
When you display the components from the picture above as a table in your app, it could look like this:
| Name | Year | Country | Link |
| The Shawshank Redemption | 1994 | USA | IMDB |
| From Dusk Till Dawn | 1996 | USA | IMDB |
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.
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.
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.