Quick Start

API Reference

HTML Code

CSS Code

Initialize a Sample

Initialize after API request

Theme Colors

Integrated Charts

Alternate Row Colors

Block Cell Editing

Drop-down Filter Rules

Toggle Row Numbers

Default Grid Height

Default Row Height

Advanced Filters

Sort Multiple Columns

Cell Edit Hook

Column Symbols

Links & Images

Mouse Event Breakpoint

Performance Gains

Convert Excel to in Minutes

JavaScript Data Grid

To Do: Quickly create an app that lets you use an HTML file picker to display your Excel worksheets as the DeeboData JavaScript Data Grid, complete with charts. You'll achieve this using only normal desktop tools. You don't need a domain name or web server. Get up and running in 5 minutes or less.

Requirements

A license for the enterprise JavaScript data grid file
Internet connection
Your favorite plain text editor, like Notepad
Excel file(s) with tabular data. Uniform rows of data work best.
A web browser, like Chrome, Firefox, Edge, or Safari

Create the Excel to Data Grid App

1) Open a new file in your favorite text editor, like Notepad.
2) Save the blank, would be .txt file as whatever name you like with a .html extension
3) Copy and paste the code below into the newly named HTML file and follow the next steps described below the html code:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>My Excel To Data Grid App</title>
                      
        <link rel="stylesheet" href="https://d2ffvluimla00s.cloudfront.net/data-grid-enterprise.css">

    </head>

    <body>

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

        <div class="relly file-select-div">

            <button type="button" class="btn-file-select btn-theme">CHOOSE FILE</button>

            <input type="file" name="dataFile" id="dataFile" accept="text/csv,application/json,application/vnd.ms-excel,

            application/xml,text/tab-separated-values,text/plain,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

        </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">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="worksheetsList"></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>

        <script src="https://d2ffvluimla00s.cloudfront.net/jszip.js"></script>

        <script src="https://d2ffvluimla00s.cloudfront.net/xlsx.js"></script>

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

        <script src="https://d2ffvluimla00s.cloudfront.net/excel-helper.js"></script>

    </body>

</html>

4) Find the line near the bottom in the html above and change C:/Users/Your Name/Downloads/deebo-js-grid-enterprise.js to the correct file path where the enterprise JavaScript data grid file is located on your computer. Make sure you paste it in between the quotation marks.
5) Save the file and open it in your browser. On Windows, an html file should open in the browser by default when double-clicked.