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>