SimpleTableCellEditor requires JQuery
Allow table content to be edited clientside, with a click inside editable cell or by keyboard navigation. A 'cell:edited' event is triggered if the cell content has been edited and the content changed.
Quick example : https://codepen.io/HugRob/pen/WNbKNZP
<table id="myTableId">
<tr>
<td class="editMe">Editable text</td>
<td>Uneditable text</td>
<td class="feedMeNumbers">Numbers only</td>
</tr>
</table> <script>
editor = new SimpleTableCellEditor("myTableId");
editor.SetEditableClass("editMe");
editor.SetEditableClass("feedMeNumbers", { validation: $.isNumeric }); //If validation return false, value is not updated
$('#myTableId').on("cell:edited", function (event) {
console.log(`Cell edited : ${event.oldValue} => ${event.newValue}`);
});
</script>Use tab or [shift + arrow] to navigate around editable cells.
Thanks jaysin586 for you work !
- "cell:edited" : Cell has been edited with new value
- evt.element (JQuery node object)
- evt.oldValue
- evt.newValue
- "cell:onEditEnter" : Before edition mode is entered
- evt.element (JQuery node object)
- "cell:onEditEntered" : After edition mode has been entered
- evt.element (JQuery node object)
- evt.oldValue
- "cell:onEditExit" : Before edition mode is exited
- evt.element (JQuery node object)
- evt.oldValue
- "cell:onEditExited" : After edition mode has been exited
- evt.element (JQuery node object)
- evt.oldValue
- evt.newValue
- evt.applied (boolean, will the edition be applied)
- SimpleTableCellEditor : constructor(tableId, tableCellEditorParams)
- SimpleTableCellEditor : SetEditable(element, cellEditorParams)
- SimpleTableCellEditor : SetEditableClass(className, cellEditorParams)
- SimpleTableCellEditor : Toggle(toggled)
- tableCellEditorParams
- inEditClass : class used to flag td in edit mode
- navigation : true|false enables/disables navigation with arrows and tab
- cellEditorParams
- validation : method used to validate new value
- formatter : method to format new value
- keys : keys handling validation and cancellation. Default value : { validation : [13], cancellation : [37] }
Full parameters exemple :
<table id="myTableId">
<tr>
<td class="editMe">editable numbers</td>
</tr>
</table> <script>
editor = new SimpleTableCellEditor("myTableId", { inEditClass: "busy" } );
editor.SetEditableClass("editMe", { //tds with .editMe class will be editable
validation: $.isNumeric, //value entered must be numeric
formatter: (val) => { return val * 10; }, //value entered will be multiplied by 10
keys: {
validation: [13, 107, 35], //these keys will trigger validation (evt.which)
cancellation: [27, 109] //these keys will trigger cancellation (evt.which)
}
});
</script>- DataTable table redrawn is supported, active cell editor will reappear after a table reload
Default value for cellParams.behaviour :
behaviour: {
tabKeyCauseCursorMove: true, //Allow user to move through editable fields using tab key. Circular rotation
arrowKeyCauseCursorMove: true, //Allow user to move through editable fields using arrow key. Circular rotation
outsideTableClickCauseCancellation: false, //if user end edition by clicking outside the table, cancel edition or save the value ?
anotherCellClickCauseCancellation: false //if user end edition by clicking another cell, cancel edition or save the value ?
}
By default, outsideTableClick and anotherCellClick are set to "false", the values are saved
cellParams.internals can be overridden.
Default value for cellParams.internals :
{
renderValue: (elem, formattedNewVal) => { $(elem).text(formattedNewVal); },
renderEditor: (elem, oldVal) => {
$(elem).html(`<input type='text' style="width:100%; max-width:none">`);
var input = $(elem).find('input');
input.focus();
input.val(oldVal);
},
extractEditorValue: (elem) => { return $(elem).find('input').val(); },
extractValue: (elem) => { return $(elem).text(); }
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent