Use the fields property of the options object in setData to define custom fields. This is useful for hiding fields, reordering fields, changing labels, formatting output, creating calculated fields, or marking fields as non-editable.

<k-table id="customFieldsExample"></k-table>
<script type="module">
  await window.customElements.whenDefined('k-table');
  document.getElementById('customFieldsExample').setData({
    records: contacts,
    fields: [
      {
        name: "name",
        label: "Name",
        size: 300
      },
      {
        name: 'phoneNumber',
        label: 'Phone Number'
      },
      {
        name: 'email',
        label: 'Email Address'
      },
      {
        name: 'birthday',
        label: 'Birthday'
      },
      {
        name: 'age',
        label: 'Age',
        calculator: (record) => {
          // record.birthday is a string in the format "YYYY-MM-DD"
          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' // original value is "m" or "f"
      }
    ]
  });
</script>

Non-Editable Fields

Set editable: false on a field definition to make it read-only when a row is in edit mode. The cell displays its value normally — no input is rendered. This is useful for fields like IDs that should never be changed by the user.

<k-table id=editableFieldExample>
  <kc-tc-edit slot=after></kc-tc-edit>
</k-table>
<script type=module>
  await window.customElements.whenDefined('k-table');
  document.getElementById('editableFieldExample').setData({
    records: [{
      id: 1,
      name: 'Alice',
      city: 'New York'
    }, {
      id: 2,
      name: 'Bob',
      city: 'Los Angeles'
    }, {
      id: 3,
      name: 'Charlie',
      city: 'Chicago'
    }],
    fields: [{
      name: 'id',
      label: 'ID',
      editable: false
    }, {
      name: 'name',
      label: 'Name'
    }, {
      name: 'city',
      label: 'City'
    }]
  });
</script>