# Table - Record Editing

##### Back to Table Component Documentation

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"
    >
      <k-tc-edit slot="after"></k-tc-edit>
    </k-table>
    <script type="module" src="../kempo/components/tableControls/Edit.js"></script>
    <script type="module">
      import Table from '../kempo/components/Table.js';
      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>