Whenever data is loaded into a Table, the columns are automatically generated. You can add, remove, or modify columns by accessing the table properties under the column section. You can also rearrange the columns by dragging and dropping them.

The Use dynamic column toggle allows users to dynamically set the columns of the Table using a JSON value.

For example, if you enter the below JSON, the table will display a column labeled "Name" where the data entries are editable strings, restricted in length between 5 and 20 characters, displayed in white text on a black background.

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

The table component supports the following column types:

• String
• Number
• Text
• Datepicker
• Select
• Multiselect
• Boolean
• Image
• Link
• Default - Deprecated
• Dropdown - Deprecated
• Multiselect - Deprecated
• Toggle switch - Deprecated
• Radio - Deprecated
• Badge - Deprecated
• Multiple Badges - Deprecated
• Tags - Deprecated

This column type is used for columns with text values. Unlike the text column type, string type doesn't support multi-line text.

Selecting the column type as number will load numerical data in the column cells.

The text column type can be used for multi-line text.

The datepicker type can be used to display dates.

The select column can be used to display or select a single item from a list.

Options can be used to provide values for the select column as an array. You can click on the Add new option button and enter Option label and Option value to create a new option. You can switch on the toggle for Make this option as default to mark an option as the default value. You can also enable Dynamic option and enter an array of values as shown in the example below:

{{[{ label: "Mobile Phones", value: "mobile-phones" },
  { label: "Smartphones", value: "smartphones" },
  { label: "Compact Cameras", value: "compact-cameras" },
  { label: "DSLR Cameras", value: "dslr-cameras" },
  { label: "Smart Watches", value: "smart-watches" },
]}}

The MultiSelect column can be used to display or select multiple items from a list.

Options can be used to provide values for the select column as an array. You can click on the Add new option button and enter Option label and Option value to set the option values. You can switch on the toggle for Make this option as default to mark an option as the default value. You can also enable Dynamic option and enter an array of values as shown in the example below:

{{[{ label: "Technology", value: "technology" },
  { label: "Apparrel", value: "apparrel" },
  { label: "Jewelry", value: "jewelry" },
  { label: "Furniture", value: "furniture" },
]}}

The boolean column type can be used to display boolean values. If the value is true, a green tick will be displayed and for false values a red cross will be displayed.

The image column type can be used to display images.

The link column type can be used to create a link to .

This default column is used to display text.

The Dropdown column type is used to display a dropdown in the column cells using the column data.

The multiselect column type is used to show multiple selections or display a dropdown in the column cells using the column data.

The Toggle Switch column type is used to display a toggle switch in the column cells, providing a clear visual indicator for boolean values.

The Radio column type is used to show radio buttons in the column cells, offering a single-choice selection from multiple options.

The Badge column type is utilized to exhibit labels or tags on the columns, visually distinguishing the data.

Similar to the Badge type, the Multiple Badges type is used to display multiple badges within a column cell, providing a more nuanced display of statuses or categories.

The Tags column type is utilized to display an array of tags within the column cells, providing a flexible way to categorize or tag items dynamically.

You can add a new column to the table by clicking on the + Add new column button. On clicking this button a new column will be added to the Table and you can edit it's properties from the column section.

On hovering on a column, you can see a clone icon next to delete which can be used to create a duplicate copy of the same column.

On hovering on a column, you can see a delete icon on the right which can be used to delete a column.

You can choose which columns to show or hide in the Table using this option. You also have the option to hide the column selector button in the Table properties.

To make all the columns editable in your table, you can enable the Make all columns editable toggle. If you disable the Make editable property of any individual column, Make all columns editable will automatically switch to disabled.

Under column properties, when you switch on the Make editable toggle, you will be able to see validation options that will be different for each column type. For instance, the a column with string type will have the following validations.

Use this field to enter a Regular Expression that will validate the content.

Enter the number for a minimum length of characters allowed.

Enter the number for the maximum length of characters allowed.

If the condition is true, the validation passes, otherwise return a string that should be displayed as the error message. For example: {{components.table1.selectedRow.id==1&&"This row can't be deleted"}}