Basic example
The search field is not a part of the DataDen - place an input field on your page and use
quickFilter method to filter entries.
<div class="flex flex-col justify-center items-center">
<div>
<div class="data-den-quick-filter">
<input id="inputSearch" type="text" placeholder="Search..." class="data-den-quick-filter-input" />
</div>
<div id="grid"></div>
</div>
</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,
quickFilter: true,
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);
const searchInput = document.querySelector('.data-den-quick-filter-input');
searchInput.addEventListener('keyup', () => {
dataDen.quickFilter(searchInput.value);
});
.data-den-quick-filter-input {
border: 1px solid #525252;
border-radius: 0.25rem;
padding: 0 4px;
background: transparent;
margin-bottom: 10px;
}
.data-den-quick-filter-input:focus {
outline: 1px solid #525252;
}