Data Den custom CSS examples.
Scroll
<div id="dd"></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",
},
{
field: "model",
headerName: "Model",
},
{
field: "year",
headerName: "Year",
},
{
field: "price",
headerName: "Price",
},
],
rows: rows,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);
.dd-scroll {
height: 200px;
overflow-y: auto;
}
Fixed header example
<div id="dd"></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",
},
{
field: "model",
headerName: "Model",
},
{
field: "year",
headerName: "Year",
},
{
field: "price",
headerName: "Price",
},
],
rows: rows,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);
.data-den-grid-main {
overflow: scroll;
height: 200px;
}
.data-den-header {
position: sticky;
top: 0;
z-index: 1;
}
Without borders
<div id="dd"></div>
import { DataDen, DataDenDefaultCellRenderer } 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",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "model",
headerName: "Model",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "year",
headerName: "Year",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "price",
headerName: "Price",
cellRenderer: DataDenDefaultCellRenderer,
},
],
rows: rows,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);
.data-den-grid {
--data-den-cell-border: none;
}
.data-den-cell,
.data-den-header-cell {
border-right: none;
}
Small text
<div id="dd"></div>
import { DataDen, DataDenDefaultCellRenderer } 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",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "model",
headerName: "Model",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "year",
headerName: "Year",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "price",
headerName: "Price",
cellRenderer: DataDenDefaultCellRenderer,
},
],
rows: rows,
rowHeight: 26,
headerHeight: 26,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);
.data-den-grid {
--data-den-grid-font-size: 12px;
}
Row spacing
Use the rowHeight prop to set row height.
<div id="dd"></div>
import { DataDen, DataDenDefaultCellRenderer } 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",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "model",
headerName: "Model",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "year",
headerName: "Year",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "price",
headerName: "Price",
cellRenderer: DataDenDefaultCellRenderer,
},
],
rows: rows,
rowHeight: 60,
headerHeight: 60,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);
Cell formatting
Use cell formatting to color individual cells.
<div id="dd"></div>
import { DataDen, DataDenDefaultCellRenderer } from "data-den-core";
class ExampleCellRenderer {
constructor(data) {
this.value = data.value;
}
getGui() {
const el = document.createElement("span");
el.innerText = this.value;
const wrapper = document.createElement("div");
if (+this.value > 25000 && +this.value < 50000) {
wrapper.classList.add("bg-warning");
} else if (+this.value > 50000) {
wrapper.classList.add("bg-danger");
} else {
wrapper.classList.add("bg-success");
}
wrapper.appendChild(el);
return wrapper;
}
}
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",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "model",
headerName: "Model",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "year",
headerName: "Year",
cellRenderer: DataDenDefaultCellRenderer,
},
{
field: "price",
headerName: "Price",
cellRenderer: ExampleCellRenderer,
},
],
rows: rows,
};
const ddEl = document.getElementById("dd");
const dataDen = new DataDen(ddEl, options);