Table Extension Setup Guide

The Table extension lets you add a table as a field in your content type. The content managers can then add values to the table, while creating entries. Here's how it works on the entry page:

Table Extension Demo.gif

This step-by-step guide explains how to create a Table custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Add the ‘Table’ custom field extension to your stack
  2. Use your custom field

Step 1 - Add the ‘Table’ custom field extension to your stack

  1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
    Create New Extension.png
  2. Select Custom Field.
    Select Extension Type - Custom Field.png
  3. You will be led to the Create New Extension details page where you need to enter details in the fields as given below:
    • Title: Provide a suitable title. For example, ‘Table’.
    • Field Data Type: Select the data type in which the input data of the field should be saved in Contentstack. Select ‘JSON’ in this case.
    • Multiple: Leave this checkbox unchecked.
    • Hosting Method: Select Hosted By Contentstack. As soon as you do this, you will see the Extension Source Code field appear below.
    • Extension Source Code: Enter the source code for the extension. For the source code of the Table extension, contact us.
      1. The support team will provide you with the source code.
      2. You need to use the code from the index.html file located inside the root folder.
      3. Paste this code in the Extension source code field.
    • Config Parameter: Enter the names of the columns, and set the row and column (max column limit is 50) limits. Based on the column names provided, your table will be designed accordingly:
          "columns": [
          "rowsLimit": 10,
          "columnsLimit": 8
  4. Click on Save. This creates your custom field.

Now, let’s understand how you can start using this custom field in your content type.

Step 2 - Use your custom field

To use your custom field, you need to follow the steps given below:

  1. Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
    Create Content Type.png
    This leads you to the Content Type Builder page where you can add the relevant fields.
  2. Add the Custom field to your content type.
    Add 'Custom' field.png
  3. Select Table in the Select Extension dropdown and set the other properties (shown in the above screenshot).
    Select 'Table' in the 'Select Extension' dropdown.png

    Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.

  4. After adding the necessary information of the extension, add other relevant fields (if needed) in your Content Type. Click on Save and Close when you are done.

This will create your Content Type. Now you can use the custom field while creating an entry for this Content Type as shown below:

Table Extension Demo.png
Was this article helpful?