API Reference

Excel to Data Grid

Integrated Charts

Theme Colors

Alternate Row Colors

Block Cell Editing

Toggle Row Numbers

Default Grid Height

Default Row Height

Drop-down Filter Rules

Advanced Filters

Sort Multiple Columns

Cell Edit Hook

Column Symbols

Links & Images

Mouse Event Breakpoint

Performance Gains

Javascript Data Grid Documentation

Quick Start

The Javascript Data Grid from DeeboData offers everything in the demo out of the box with little effort to get started. We recommend Javascript if you consider yourself a beginner or not a programmer at all. Follow the initialization instructions below to get up and running. Use the side navigation to explore the various features and customization options.

HTML: Community & Enterprise

Admittedly, our data grids are opinionated. So in your html file, in the spot where you want the data grid to appear, copy and paste all the html code below for either Enterprise or Community:

* This code should become nicely indented when you copy the code into an html file.

Enterprise

<div class="hidden-cols"></div>

<div class="controls">

    <input type="text" id="topLevelDataFilter" name="topLevelDataFilter" placeholder="Filter any column..." autocomplete="off" />

    <button type="button" class="hide no-btn btn-clear-grp">

        <i class="material-icons error-message heavy v-mid" aria-hidden="false">close</i> <span class="md-text v-mid">Grouping</span>

    </button>

    <button type="button" id="btnCharts" class="no-btn btn-chart" disabled>

        <i class="material-icons v-mid" aria-hidden="false">bar_chart</i> <span class="v-mid">Insights</span>

    </button>

    <button type="button" id="btnXSelRows" disabled class="btn-ctrl-sel-rows hide">Deselect Rows</button>

    <button type="button" id="btnTogSelRows" disabled class="btn-ctrl-sel-rows hide">

        <i class="material-icons" aria-hidden="false">check_box_outline_blank</i> <span>Selected Rows</span>

    </button>

    <button id="btnReset" class="btn-reset" >Reset</button>

</div>

<div id="dataTableChecks" class="relly"></div>

<div id="selFilContainer" class="relly"></div>

<div id="validatedEdit" class="relly invisible"></div>

<div class="relly" style="z-index: 10;"><div tabindex="0" id="fCellDragger" class="hide" ></div></div>

<div class="row-numbers" >

        <div id="rowNumHeader" class="row-num-header flex-center"><div class="semi-heavy">No.</div></div>

        <div style="overflow: hidden"><div id="rowNumBody" style="overflow: auto"></div></div>

    </div><div id="dataTable" class="data-table">

    <div id="dataTableHeaders" class="data-table-headers"></div>

    <div id="dataTableBody"><div id="aboveArea"></div><div id="belowArea"></div></div>

    </div>

<div id="tableFooter" class="hide">

    <div class="paginator">

        <div class="three-qtr-wid">

            <div id="totalRows" class="inline v-mid semi-heavy lg-text"></div> <div class="inline v-mid">rows</div>

        </div><div class="qtr-wid right">

            <label class="skip-lbl" for="skipTo">Jump To Row</label>  <div class="skip-to-contain"><input type="number" min="1"

            name="skipTo" id="skipTo" placeholder="Jump to..." />

            <div id="skipToOptions" class="skip-to-options-hide"></div></div>

        </div>

    </div>

</div>

<div id="selectedRowsInsights" class="hide"></div>

<div class="right pad-top-thirty">

    <div id="canGroupByContain" class="inline-b deebo-dd-contain-div"></div><div 

        id="exportContain" class="inline-b deebo-dd-contain-div">

    <div class="relly">

        <div id="ddSelect" class="deebo-dd-select-hide deebo-dd-export">

            <div class="deebo-dd-opt deebo-dd-export">

                <button type="button" id="btnExportCsv" class="btn-export no-btn">CSV</button>

            </div>

            <div class="deebo-dd-opt deebo-dd-export">

                <button type="button" id="btnExportJson" class="btn-export no-btn">JSON</button>

            </div>

            <div class="deebo-dd-opt deebo-dd-export">

                <button type="button" id="btnExportPsv" class="btn-export no-btn">PSV</button>

            </div>

            <div class="deebo-dd-opt deebo-dd-export">

                <button type="button" id="btnExportTsv" class="btn-export no-btn">TSV</button>

            </div>

        </div>

    </div>

    <div class="deebo-dd-contain deebo-dd-export flex-center">

        <button class="btn-deebo-dd deebo-dd-export no-btn">

            <span>Export</span>

            <i class="material-icons" aria-hidden="false">keyboard_arrow_down</i>

        </button>

    </div>

    </div>

</div>

Community

<div class="hidden-cols"></div>

<div class="controls">

    <input type="text" id="topLevelDataFilter" name="topLevelDataFilter" placeholder="Filter any column..." />

    <button type="button" id="btnXSelRows" disabled class="btn-ctrl-sel-rows hide">Deselect Rows</button>

    <button type="button" id="btnTogSelRows" disabled class="btn-ctrl-sel-rows hide">

        <i class="material-icons" aria-hidden="false">check_box_outline_blank</i> <span>Selected Rows</span>

    </button>

    <button id="btnReset" class="btn-reset" >Reset</button>

</div>

<div id="dataTableChecks" class="relly"></div>

<div id="selFilContainer" class="relly"></div>

<div id="validatedEdit" class="relly invisible"></div>

<div class="relly" style="z-index: 10;"><div tabindex="0" id="fCellDragger" class="hide" ></div></div>

<div class="row-numbers" >

        <div id="rowNumHeader" class="row-num-header flex-center"><div class="semi-heavy">No.</div></div>

        <div style="overflow: hidden"><div id="rowNumBody" style="overflow: auto"></div></div>

    </div><div id="dataTable" class="data-table">

    <div id="dataTableHeaders" class="data-table-headers"></div>

    <div id="dataTableBody"><div id="aboveArea"></div><div id="belowArea"></div></div>

    </div>

<div id="tableFooter" class="hide">

    <div class="paginator">

        <div class="paginator-half-wid">

            <div id="totalRows" class="inline v-mid semi-heavy lg-text"></div> <div class="inline v-mid">rows</div>

        </div>

    </div>

</div>

CSS

Copy the link tag below and paste it before the closing </head> tag in your html document to apply the css. Just place it on it's own line before the HTML code if you don't have a head tag:

<link rel="stylesheet" href="https://d2ffvluimla00s.cloudfront.net/data-grid-enterprise.css">

Initialize the Data Grid with Javascript

You need to insert the following javascript code after the html above, preferably just before the closing </body> tag of your html document.

Reference the file path of the javascript file that downloaded after you purchased the license(s) as the src in a script tag. You need to switch the file name to community if you're using it:

<script src="C:/Users/Your Name/Downloads/deebo-js-grid-enterprise.js"></script>

Apply the next short inline script after the script tag above. You simply need to replace the data variable assignment with your own list of data you want to display.

Continue on for code that executes this same initialization code, but only after successful completion of an api request to fetch your data, a very common use case for a data grid.

<script>

   function initialize() {

      <!-- where data is an array of objects e.g. [ { name: "dave" }, {name: "amy" } ] -->


      var data = [ { name: "Dave", salary: 200000, title: "CEO" }, {name: "Amy", salary: 164000, title: "CIO" },
 
      {name: "Ted", salary: 60000, title: "QA Engineer" }, {name: "Sarah", salary: 95000, title: "Engineer" },
 
      {name: "Adam", salary: 164000, title: "CFO" }, {name: "Krishna", salary: 105000, title: "Architect" }];

      data = deebo.methods.convertNeededCols(data)

      dataTableService.methods.mainData = data.filter( function(d) { return true })

      dataTableService.methods.currFilData = data.filter( function(d) { return true })

      dataTableService.methods.mainDataLen = dataTableService.methods.mainData.length

      deebo.methods.buildInitUiDataTable(data, "#000035", "#e9e9e9")//any 2 css colors

      //deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true)//true in 4th arg blocks edits

      //deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true, true)//true in 5th arg hides row nums

   }

   license.methods.validateLicense('YOUR_LICENSE_KEY', initialize)//2nd arg is your function handler

</script>

* For community, replace the license.methods.validateLicense('YOUR_LICENSE_KEY', initialize) with initialize()

What this code does • What's vital to know is that dataTableService.methods.mainData is assigned your entire dataset and never gets reassigned in the deebo-js-grid-enterprise.js file you purchased. dataTableService.methods.currFilData is assigned the same dataset initially, but will be changed by the built in filtering functionality as you use it. Virtual scrolling allows you to stuff tons of data into the mainData variable and not worry about performance issues. You are only limited by the max allowable element height in a given browser. Why? Because only the rows visible in the viewport get rendered at any given time, and 2 placeholder divs reside above and below the visible rows, respectively. Each of these divs takes up the appropriate height for the unrendered rows above and below the viewport.

deebo.methods.buildInitUiDataTable this initialization function accepts up to 5 arguments. Only the first one is required. That's your data, which should be an array of objects. The 2nd and 3rd args are for 2 CSS compatible theme colors. Passing a boolean true to the 4th arg blocks editing. Passing a boolean true to the 5th arg removes row number functionality.

Apply the Same Initialization Code on Success of an XHR Request

Make sure you've read the initialization code above first before just applying this code. But as for the code below, simply replace http://yourdomain.com/api/your-data-endpoint with your api endpoint and make sure the xhrdata variable is assigned the correct data coming from your api. Make sure you place this code after the script tag mentioned above that references the enterprise js file.


<script>

   function initialize() {

     var xhr = new XMLHttpRequest()

     xhr.onreadystatechange = function() {

      if(xhr.readyState === 4){

         try{

            let xhrdata = JSON.parse(xhr.responseText)

            if(xhr.status === 200){

               xhrdata = deebo.methods.convertNeededCols(xhrdata)

               dataTableService.methods.mainData = xhrdata.filter( function(d) { return true })

               dataTableService.methods.currFilData = xhrdata.filter( function(d) { return true })

               dataTableService.methods.mainDataLen = dataTableService.methods.mainData.length

               deebo.methods.buildInitUiDataTable(xhrdata, "#000035", "#e9e9e9")

            }

         }catch(e){ deebo.methods.setLoading(e.message) }

      }

      }

     xhr.open("GET", "http://yourdomain.com/api/your-data-endpoint", true)

     xhr.send()

     deebo.methods.setLoading()

   }

   license.methods.validateLicense('YOUR_LICENSE_KEY', initialize)//2nd arg is your function handler

</script>

* For community, replace the license.methods.validateLicense('YOUR_LICENSE_KEY', initialize) with initialize()