Select a row, then click Edit or Delete. Or click New to add a record.
ArtistTitleLabel YearGenreFormatRating
How It Works
Client — DataTables Editor

Editor is initialized with field definitions and wired to the table via buttons: [{ extend: 'create', editor }, { extend: 'edit', editor }, { extend: 'remove', editor }]. It sends action: create|edit|remove with the row data as JSON. Field types include text, select (with server-driven options), textarea, and more. select: true on the table enables row selection for edit/delete.

var editor = new $.fn.dataTable.Editor({
  ajax: { url: '/api/editor/records', type: 'POST' },
  table: '#table',
  fields: [
    { label: 'Artist', name: 'artist' },
    { label: 'Genre',  name: 'genre',
      type: 'select', multiple: true },
    { label: 'Rating', name: 'rating',
      type: 'select' }
  ]
});
Server — mongo-datatables Editor

In production, Editor(db, 'records', data, doc_id, data_fields=fields).process() handles create/edit/remove and returns the updated row data. Supports options for select fields, validators for field validation, hooks for pre-processing, and dependent_handlers for cascading fields.

# Production endpoint:
@app.route('/api/editor', methods=['POST'])
def editor():
    result = Editor(
        db, 'records', request.get_json(),
        doc_id=request.args.get('id'),
        data_fields=FIELDS,
        options=OPTIONS,
        validators=VALIDATORS
    ).process()
    return jsonify(result)