Dynamic Columns

ToolJet allows users to dynamically set the columns of a Table component using a JSON value. This guide explains how to configure dynamic columns in ToolJet.

Using Dynamic Column

1. Drag a Table component from the right-side component library onto the canvas.
2. Populate the Table component with data by connecting it to a query.
3. Toggle the Use dynamic column option.
4. Enter JSON to define the Table's columns dynamically. For example:

{
  "name": "Name",
  "columnType": "string",
  "key": "first_name",
  "cellBackgroundColor": "#000",
  "textColor": "#fff",
  "isEditable": true,
  "regex": "",
  "maxLength": 20,
  "minLength": 5,
  "customRule": ""
}

This configuration displays a column labeled Name with editable string data restricted to lengths between 5 and 20 characters, with white text on a black background.

Displaying Different Table Schema Based on the Current User

You can use dynamic columns to display different table schemas depending on the current user. Let's look at an example with the below schema:

ID	Name	Email	Department	Salary	Performance	Login

Here, two different schemas are to be displayed based on the current user.

For Admin:

ID	Name	Email	Department	Salary	Performance	Login

For Employees:

ID	Name	Email	Department	Login

1. To configure the schema as per the user, enable Use dynamic column property.

2. Use the following JSON logic to dynamically adjust the schema based on the current user's role:

{{globals.currentUser.groups.includes("admin") ? [
  { name: 'id', key: 'id', id: '1' },
  { name: 'Name', key: 'name', id: '2' },
  { name: 'Email', key: 'email', id: '3' },
  { name: 'Department', key: 'department', id: '4' },
  { name: 'Salary', key: 'salary', id: '5' },
  { name: 'Performance Rating', key: 'performance', id: '6' },
  { name: 'Last Login', columnType:"datePicker", key: 'login', id: '7' }
] : [
  { name: 'id', key: 'id', id: '1' },
  { name: 'Name', key: 'name', id: '2' },
  { name: 'Email', key: 'email', id: '3' },
  { name: 'Department', key: 'department', id: '4' },
  { name: 'Last Login', columnType:"datePicker", key: 'login', id: '5' }
]}}

Specifiying the Column Type

Dynamic columns in ToolJet support various types, such as strings, numbers, dates, and links.

In this example, you can see how you can specify a column type using dynamic columns.

1. Add a Table component with the following columns and column types:

   • Profile Photo - Image
   • Name - String
   • Contact Number - Number
   • Date of Birth - Datepicker
   • Website URL - Link

2. Toggle the Use dynamic column option.

3. Add the following JSON to define the columns:

{{[
  {name: 'Profile', key: 'photo',columnType: 'image', id: '1'},
  {name: 'Name', key: 'name', columnType:'string', id: '2'},
  {name: 'Contact', key: 'mobile_number', columnType:'number', id: '3'},
  {name: 'DOB', key: 'date', columnType:'datepicker', id: '4'}, 
  {name: 'Website', key: 'website', columnType:'link', id: '5'}
]}}

This configuration will create a table with the specified column types.

Setting a Default Column Width

You can set the default width of a column in pixels by adding a width property to the column object. This is especially useful for dynamic columns where you cannot resize headers in the editor.

{{[
  {
    "name": "Item Name",
    "key": "item_name",
    "columnType": "string",
    "width": 150,
    "id": "1"
  },
  {
    "name": "Price",
    "key": "price",
    "columnType": "number",
    "width": 100,
    "id": "2"
  }
]}}

If a user manually resizes a column in the editor, their preference is saved. On the next reload, the width value in the JSON is applied again as the default — overriding any previously saved resize. This makes the JSON configuration the authoritative source for column widths.