Starter
In order to quickly install Data Den simply download our .ZIP starter.
Step 1
Purchase Data Den plan best suited to your needs.
Step 2
Download the package from Your Orders.
Step 3
Unzip downloaded package and open it in the code editor.
Step 4
Explore our documentation (menu on the left).
Vite
Node.js version 16.17.0 + / 18.1.0 + installed.
Please update if your package manager asks for it. If you are expecting issues with
vite.config.js and you don't want to update the npm, try using the 4.3.9 version of
vite.
Vite (French word for "fast", pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. Data Den can be imported in Vite applications according to the following procedure:
Step 1
Create a new vite project and enter the newly created directory. Pick
Vanilla framework and JavaScript variant. You can skip this step if you already have it
installed.
npm create vite@latest my-project
cd my-project
npm install
Step 2
Download the Data Den package from Your Orders and unpack it in the created project
Step 3
Import the Data Den JS file in main.js and add the basic config for Data Den. You can use the example
below.
import './style.css'
import { DataDen } from './data-den/js/data-den.es.min.js'
document.querySelector('#app').innerHTML = `
<div style="margin-top: 100px; display: flex; justify-content: center;">
<div id="dd"></div>
</div>
`
const rows = [
{ car: 'Honda', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', year: '09/02/2020', price: 31000 }
];
(() => {
const options = {
columns: [
{
field: 'car',
headerName: 'Car',
},
{
field: 'year',
headerName: 'Year',
},
{
field: 'price',
headerName: 'Price',
},
],
rows: rows,
};
const dd = document.getElementById('dd');
const dataDenBasicSorting = new DataDen(dd, options);
})();
Step 4
Remove the default content of the style.css file and import Data Den stylesheets.
@import 'data-den/css/data-den.min.css';
Step 5
Data Den should be connected properly to the vite app. Type the code bellow to run dev server and see the result.
npm run dev