The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.

You can also define a custom editor by adding a generator function to the Table.editors object that will generate an input (or select). This will be global to all tables on the page.

You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.

<k-table
  id="recordEditingExample"
>
  <kc-tc-edit slot="after"></kc-tc-edit>
</k-table>
<script type="module">
  import Table from '/src/components/Table.js';
  await window.customElements.whenDefined('k-table');
  Table.editors.tel = (v) => {
    const $input = document.createElement("input");
    $input.value = v;
    $input.addEventListener('change', () => {
      $input.value = $input.value.replace(/\D/g, ''); // Remove all non-digit characters
      if ($input.value.length === 7) {
        $input.value = $input.value.replace(/(\d{3})(\d{4})/, '$1-$2');
      } else if ($input.value.length === 10) {
        $input.value = $input.value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
      } else {
        $input.value = v; // Reset to default value if not 7 or 10 digits
      }
    });
    return $input;
  };
  document.getElementById('recordEditingExample').setData({
    records: contacts,
    fields: [
      {
        name: "name",
        label: "Name"
      },
      {
        name: "email",
        label: "Email"
      },
      {
        name: "birthday",
        label: "Birthday",
        type: "date",
      },
      {
        name: "phoneNumber",
        label: "Phone Number",
        type: "tel"
      },
      {
        name: "age",
        label: "Age",
        calculator: (record) => {
          const today = new Date();
          const birthDate = new Date(record.birthday);
          let age = today.getFullYear() - birthDate.getFullYear();
          const monthDifference = today.getMonth() - birthDate.getMonth();
          if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
            age--;
          }
          return age;
        }
      },
      {
        name: "gender",
        label: "Gender",
        formatter: (v) => v === "m" ? "Male" : "Female",
        editor: (v) => {
          const $select = document.createElement("select");
          $select.innerHTML = `
            <option value="m">Male</option>
            <option value="f">Female</option>
          `;
          $select.value = v;
          return $select;
        }
      }
    ]
  });
</script>

Non-Editable Fields

Set editable: false on a field definition to make it read-only during record editing. The cell will display its value normally while the row is in edit mode. This is useful for fields like IDs or calculated values that should not be changed directly.

document.getElementById('nonEditableFieldExample').setData({
  records: contacts,
  fields: [{
    name: 'name',
    label: 'Name',
    editable: false
  }, {
    name: 'email',
    label: 'Email'
  }, {
    name: 'birthday',
    label: 'Birthday',
    type: 'date'
  }]
});