# Table - Custom Fields

##### Back to Table Component Documentation

Use the `fields` property of the options object in `setData` to define custom fields. This is useful for hiding fields, reordering fields, changing the labels, formatting the output, or creating a calculated field.

    <k-table id="customFieldsExample"></k-table>
    <script type="module">
      document.getElementById('customFieldsExample').setData({
        records: contacts,
        fields: [
          {
            name: "name",
            label: "Name"
          },
          {
            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>