Skip to content

Component library

Input Table

Last updated 2 November 2026

Renders editable table. To see the mobile version, resize your browser to mobile phone resolution or view it on your mobile phone.

Live demo

<ins-input-table
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>"
  table-headers='[{ "name": "column_1", "label": "Column 1" },{ "name": "column_2", "label": "Column 2" }]'>
</ins-input-table>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string any Defines label of component
tableHeaders array [] any Defines the table column headers
add-button-icon string "icon-plus" any Defines the icon used in the add button
remove-button-icon string "icon-minus" any Defines the icon used in the remove button
add-button-color string "blue" any Defines the color of the add button
remove-button-color string "blue" any Defines the colo of the remove button
readonly boolean false true, false Specifies that the component is read-only
disabled boolean false true, false Specifies that the component is disabled
button boolean false true, false Merges label and placeholder into a single button dropdown
has-error boolean false true, false Specifies validation or mandatory input for the input field
error-message string "" any Defines the error message when input element is wrong
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content
html-description boolean false true, false Enables HTML tags in the description
description string "" any Defines the description value

Events

EVENT OBJECT DESCRIPTION
insInput value Emits the value when component values changed. Returns array object.
setValue
getValue

Examples

Complete Example

<ins-input-table id="inputTableEl" label="Input Table">
</ins-input-table>

<script type="text/javascript">
  var inputTableEl = document.getElementById('inputTableEl');
  
  inputTableEl.tableHeaders = [
    { name: "column_1", label: "Column 1" },
    { name: "column_2", label: "Column 2" },
    { name: "column_3", label: "Column 3" }
  ];
</script>

Input Table - v2 Direct Set Data

<ins-input-table id="directSetDataEl" label="Direct Set Data">
</ins-input-table>

<script type="text/javascript">
  var directSetDataEl = document.getElementById('directSetDataEl');
  
  directSetDataEl.tableHeaders = [
    { name: "column_1", label: "Column 1" },
    { name: "column_2", label: "Column 2" },
    { name: "column_3", label: "Column 3" }
  ];
  
  setTimeout(function() {
    directSetDataEl.setValue([
      { column_1: "1", column_2: "2", column_3: "3" },
      { column_1: "4", column_2: "5", column_3: "6" },
      { column_1: "7", column_2: "8", column_3: "9" }
    ]);
  }, 300);
</script>

Error State

<ins-input-table
  label="Table"
  has-error error-message="This field is required."
  table-headers='[{ "name": "column_1", "label": "Column 1" },{ "name": "column_2", "label": "Column 2" }]'>
</ins-input-table>

Read-only State

<ins-input-table
  label="Table"
  readonly
  table-headers='[{ "name": "column_1", "label": "Column 1" },{ "name": "column_2", "label": "Column 2" }]'>
</ins-input-table>

Disabled State

<ins-input-table
  label="Table"
  disabled
  table-headers='[{ "name": "column_1", "label": "Column 1" },{ "name": "column_2", "label": "Column 2" }]'>
</ins-input-table>

Customize add and remove buttons

<ins-input-table
  label="Table"
  table-headers='[{ "name": "column_1", "label": "Column 1" },{ "name": "column_2", "label": "Column 2" }]'
  add-button-icon="icon-plus-circle"
  remove-button-icon="icon-minus-circle"
  add-button-color="green"
  remove-button-color="red">
</ins-input-table>