Basic example
Add editable: true to column options to enable editing for a given column.
<div id="grid"></div>
import { DataDen } from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];
const options = {
columns: [
{
field: "car",
headerName: "Car",
sort: true,
editable: true
},
{
field: "model",
headerName: "Model",
sort: true,
editable: true
},
{
field: "year",
headerName: "Year",
sort: true,
editable: true
},
{
field: "price",
headerName: "Price",
sort: true,
editable: true
},
],
rows: rows,
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);
Row edit mode
It is possible to edit multiple columns at once. To activate row edit mode add the following option:
rowEditMode: true
<div id="grid"></div>
import {
DataDen,
} from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];
const options = {
columns: [
{
field: 'car',
headerName: 'Car',
sort: true,
editable: true
},
{
field: 'model',
headerName: 'Model',
sort: true,
editable: true
},
{
field: 'year',
headerName: 'Year',
sort: true,
editable: true
},
{
field: 'price',
headerName: 'Price',
sort: true,
editable: true
},
],
rows: rows,
rowHeight: 32,
rowEditMode: true,
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);
Custom editing cell
It is possible to define custom editing cell by setting a new class for the cellEditor.
In the following example we use custom cellEditor for Price column .
<div id="grid"></div>
import {
DataDen,
} from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];
function createHtmlElement(template, elementName = 'div') {
const placeholder = document.createElement(elementName);
placeholder.innerHTML = template;
return placeholder.firstElementChild;
}
class DataDenCustomEditor {
element;
input;
params;
#cssPrefix;
constructor(params) {
this.#cssPrefix = params.cssPrefix;
this.params = params;
const template = `<input
class="${this.#cssPrefix}cell-editor"
type="number"
step="1000"
value="${params.value}" />`; this.element = createHtmlElement(template); this.input = this.element;
this.attachUiEvents(); } attachUiEvents() { if (this.input) { this.input.addEventListener('keyup', (e) =>
this.params.onKeyUp(e)); } } afterUiRender() { this.input.select(); } getGui() { return this.element; }
getValue() { return this.input.value; } } const options = { columns: [ { field: 'car', headerName: 'Car',
sort: true }, { field: 'model', headerName: 'Model', sort: true }, { field: 'year', headerName: 'Year',
sort: true, editable: true, }, { field: 'price', headerName: 'Price', sort: true, editable: true,
cellEditor: DataDenCustomEditor }, ], rows: rows, }; const gridEl = document.getElementById('grid'); const
dataDen = new DataDen(gridEl, options);