Input Table

<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>

<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>

<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>

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

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

<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>