torrobinson/jquery-editable-table

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table's Issues

allow user to add configurable header & footer

Here is an example for the extended header & footer configuration:

{
            index: 2,
            header: 'Share (EUR)',
            headerClasses: ['editable-table-header', 'text-center'],
            footer: '0',
            footerClasses: ['editable-table-footer', 'text-center', 'no-editor', 'sum-result'],
            name: 'share_eur',
            classes: flatten(['text-center', 'sum-col', 'percent-partial-value-row', additionalClasses]),
            isValid: isValidFloat,
            afterAdd: (value, cell) => updateSums(table, tableElement, tableDataFieldId, value, cell),
            afterChange: (value, cell) => updateSums(table, tableElement, tableDataFieldId, value, cell),
            convertOut: convertToFloat,
}

I've added header, headerClasses, footer, footerClasses to be able to use a such dynamic configuration for header & footer.

Fix the demo fiddle: source code accidentally exists in the JS source and overrides the remote minified resource

Add `validationErrorHandler(message)` to global config

1. Make isValid assume that the result is === true to be considered valid
2. Assume isValid returns a validation error message if validation failed
3. Add validationErrorHandler(message) to the global config. This callback should be called with the results of isValid when it isValid() !== true explicitly.

This allows the user to A) return custom validation messages per column, and B) display the exception in their own way (via toasts, custom labels, etc)

Provide rowData in callbacks for `afterChange` and `isValid`

This would allow validation to look at other attributes of a row being edited.
Example: allow a user to validate that a Start Date column is before the current End Date value

Ill-formed markup in case of XHTML

The line element.find('thead tr').append($('<th actions></th>')); tries to insert markup which is ill-formed XML and causes an error if in an XHTML document. Should be actions="".

allow user to disable the editor per cell

allow user to disable the editor per cell

afterLoad: allow user to execute some action after data is loaded

allow user to execute some action after data is loaded
e.g.

setData: function(data, afterLoad) {
            if (data) {
                this.clear();
                data.forEach(entry => {
                    this.addRow(entry);
                });
                if (typeof afterLoad == 'function') afterLoad();
            }
        }

allow user to update cell value in afterChange

allow user to update cell value in updatedValue
e.g.

        // Bind user-specified events if they exist
        if (typeof columnDef.afterChange == 'function') {
            let updatedValue = columnDef.afterChange(newValue, td);
            if (updatedValue) td.text(updatedValue);
        }