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.
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 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:
If 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 | IMDBOpens in a new window |
| From Dusk Till Dawn | 1996 | USA | IMDBOpens 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 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 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.
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.