• + D
  • Light
  • Dark
  • System
logoData Den
  • Overview
    • Installation
    • License
    • Support
    • Options
  • Layout
    • Theme
    • Custom CSS
    • CSS Variables
  • Features
    • Column pinning
    • Data Loader
    • Drag And Drop
    • Filtering
      • Header filters
      • Quick filter
    • Pagination
    • Resizing
    • Sorting
    • Editing
  • Api
    • Data Loader
    • Filter renderer

Quick Start


Starter

In order to quickly install Data Den simply download our .ZIP starter.

Step 1

Download the package.

Step 2

Unzip downloaded package and open it in the code editor.

Step 3

Explore our documentation (menu on the left).


Scripts

Note: Make sure that you have Node.js version 16.17.0 + / 18.1.0 + installed.

NPM

Use the following commands to start, build, and test packages:

  • terminal
        
            
      npm run start:[package] // start package
      npm run start:all // start all packages
      npm run build:[package] // build package
      npm run build:all // build all packages
      npm run test:[package] // test package
      npm run test:all // test all packages
    
        
    

NX Commands

Run, build, and test packages using NX commands:

  • terminal
        
            
      npx nx run [package] // start package
      npx nx build [package] // build package
      npx nx run-many -t [script] // start/build/test multiple packages

      npx nx graph // show project dependencies
    
        
    

Publishing

Manage version updates and publishing:

  • terminal
        
            
      npx nx release version --projects=[name1,name2] --dry-run // version update dry run for testing
      npx nx release version --projects=[name1,name2] // version update
      npx nx release publish --projects=[name1,name2] --dry-run // publish dry run for testing
      npx nx release publish --projects=[name1,name2]  // publish
    
        
    

Vite

Note: Make sure that you have 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.

  • terminal
        
            
      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.

  • main.js
        
            
      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.

  • style.css
        
            
      @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.

  • terminal
        
            
      npm run dev
    
        
    

Empower anyone in your team to instantly get rid of their tasks, with no technical knowledge, using AI

  • Starter (.zip)
  • NPM
  • Vite
Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
Join our mailing list now
© 2024 Copyright: MDBootstrap.com

Access restricted

To view this section you must have an active PRO account

Log in to your account or purchase an Data Den subscription if you don't have one.

Buy Data Den PRO