Javascript Data Grid Documentation

Our Javascript Data Grid offers everything in the demo out of the box with little effort to get started. Follow the short instructions below to get up and running. A license comes with 1 Yr of full support and updates if you stay opted in.

In your html file, in the spot where you want the table to appear, add the html code below:


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

<div class="controls" >

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

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

        <i class="material-icons v-mid" aria-hidden="false">pie_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="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>

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

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

    <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>

Download the following css file or reference the url in a link tag inside the head of the html:

https://d2ffvluimla00s.cloudfront.net/data-grid-enterprise.css

To initialize the grid, apply the short piece of code after the enterprise js file reference in your project's appropriate javascript or html file in a script tag. You simply need to replace the data variable assignment with your own list of data you want to display:


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


                                    var data = [ { name: "Dave", salary: 80000, title: "CEO" }, {name: "Amy", salary: 75000, title: "CIO" }, 
                                    {name: "Ted", salary: 60000, title: "QA Engineer" }, {name: "Sarah", salary: 75000, title: "Engineer" } ];

                                    deebo.methods.setLoading()//add an overlay while your backend api is responding

                                    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, "black", "skyblue")//any 2 css colors

                                    //deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true)//pass true in 4th arg to block editing

                                    //deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true, true)//pass true in 5th arg to hide row numbers

To Hook Edits To Your Back End

The function pictured above executes every time you edit a cell. To hook to your back end on cell edits, simply declare the deeboCellEditHook function in a top level script on the window and give it your own implementation, similar to the start up code mentioned further above. The function accepts 3 parameters. First is either a user-provided primary key or the fixed, 0-based index of the edited cell in the entire dataset, not it's index in your currently filtered data. You can add the primary key yourself by doing a ctrl + F for uProvidedPrimKey in the minified script that downloads, and updating the null value with your arbitrary primary key as a string. The 2nd parameter will be whatever attribute/column name is being currently edited. Finally, the raw, typed resulting value of your edit is always the final argument. It will either be a javascript string, Date, or Number.

To Add Column Symbols (Numeric Columns)

To add symbols to numeric columns, do a ctrl + F in the newly downloaded/purchased javascript file for columnSymbols: on the downloaded script. Then update the code with the appropriate column names and symbols for your data. You can also create a separate script to update the column symbols since the downloaded script is minified and more difficult to read. To reference the columnSymbols object from your separate script, simply say dataTableService.methods.columnSymbols = [{column: ${yourproperty}, symbol: ${yoursymbol}}].

To Bolster Performance with Web Workers

Download the following javascript web worker file, then place it in the root of your website:

https://d2ffvluimla00s.cloudfront.net/worker.js

This file will boost the performance of the data grid. Do a ctrl + F in the newly downloaded/purchased javascript file for workerUrl: and replace the value "http://127.0.0.1:8080/worker.js" with the new location of the file at your website root e.g. "https://example.com/worker.js". That's all you need to do.