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>