JavaScript Data Grid API Reference
Overview
Use the list of functions outlined below in the "Programmable API" to do quick customizations before initialization.
Programmable API for Customization
* Call the functions listed below as needed just BEFORE you invoke initDeeboData
Loading Data
From a Local Data Set
-
To load your own local data set. Keep in mind, you can do your own api call then call this function with the data it responds with.
deebo.methods.setLocalDataSet(data: array<object>)
If you have local data you want to display in the grid, simply call this function and pass that data as an argument. It must be an array of objects. From a Back End API
-
To set the http method for your api
deebo.methods.setInitMethod(method: string)
To set the http method for your backend api, call this function and pass GET, POST, PUT, etc. It defaults to GET. -
To set the url of your api
deebo.methods.setInitApiUrl(url: string)
To set your api endpoint url, call this method and pass the url as a string. -
To set the property name from your api response where the array of objects is
deebo.methods.setInitResProp(prop: string)
When your api returns, the code checks if the response is just an array, or if it's some object and your array is a property of that object. If your response is indeed just an array, call setInitResProp and pass an empty string. If your array of objects is part of a larger response object, pass the attribute name of the array. The default is result since that's the property where the array is within the response of the sample api. Styling
-
To set up to 2 theme colors
deebo.methods.setThemeColors(color1: string|null, color2: string|null)
Pass any 2 css colors or hex colors as strings. -
To set alternating row background color
deebo.methods.setAltRows(color: string)
Pass any hex, rgb, or css color -
To hide row numbers
deebo.methods.setShowRowNums(show: boolean)
Call this function with false to hide row numbers. They display by default. -
To set the default row height
deebo.methods.setDfltRowHgt(rowHght: string)
Set the default row height. Pass a "string" with some css units like "150px". The default is "50px" -
To set the default grid height
deebo.methods.setDfltGridHgt(gridHght: number)
Set the default grid height. Pass a number like 600. The default is 500 -
Add column symbols to numeric columns
deebo.methods.setColumnSymbols(colSymbols)
colSymbols param is an array of objects where each object in the array needs to conform to the structure like the objects in the array below. symbol should be limited to 2 characters or less
[ { column: "width", symbol: "px" }, { column: "height", symbol: "px" }, ]
-
Add styles to specific values in a column (Enterprise)
deebo.methods.setColumnStyles(colStyles)
colStyles param is an array of objects where each object in the array needs to conform to the structure like the object in the array below. Pass css properties as property names except sub _ for -
[
{
column: "party",
css: [
{ value: "Republican", color: "red", font_size: "18px" },
{ value: "Democrat", color: "blue", font_size: "18px" },
{ value: "Independent", color: "green", font_size: "18px" },
]
},
]
Yields below result
-
Set Chart Colors for Specific values
deebo.methods.setColumnValueColors(colValColors)
colValColors param is an array of objects where each object in the array needs to conform to the structure like the 2 objects in the array below. Hex or RGB values work better than CSS named colors
[
{
column: "party",
valueColors: [
{ value: "Republican", color: "rgb(255, 0, 0)" },
{ value: "Democrat", color: "rgb(0, 0, 255)" },
{ value: "Independent", color: "rgb(0, 255, 0)" }
]
},
{
column: "gender",
valueColors: [
{ value: "male", color: "rgb(0, 0, 255)" },
{ value: "female", color: "#FFC0CB" },
]
}
]
The column value colors configuration above yields graphs like below for all graphs (line, bar, pie) where party is the independent variable
-
To selectively uncover pie graphs
deebo.methods.setPieUncovered(boolean|string[ ])
You can pass true to uncover all pie graphs or pass an array of string column names that should have pie graphs uncovered. -
To force a column to be grouped - Lots of features are triggered by a grouped column, including dropdown filters,
a group by option, and more charts like pie and bar graphs. These charts can then receive customizable colors. Some columns of your
data may get grouped automatically, but maybe other columns you were expecting it for won't, so you can try to force it here. It's not guaranteed to work.
deebo.methods.setForcedGroups(bstring[ ])
Pass an array of string column names that you want to force grouping of Performance
-
To set a primary key for better virtual scroll performance
deebo.methods.setPrimaryKeyInit(key: string)
Pass a true primary key attribute from your array of objects -
To use a web worker to improve performance
deebo.methods.setWorkerUrl(url: string)
Download the web worker script, place it in the root of your projects, and then pass that url to the setWorkerUrl function before initiating the data grid. -
To raise 5k data point limit for Number Distribution Heatmap
deebo.methods.setNumDistLimit(limit: number)
Be careful raising this limit higher. A new DOM element is created for each data point. Editing
-
To block cell editing
deebo.methods.setEditable(canEdit: boolean)
Call this function with false to block cell editing. Cell edits are allowed by default. Initialize
-
To initialize the data grid
Enterprise:deebo.methods.initDeeboData("YOUR_LICENSE_KEY", local: boolean)
Community:deebo.methods.initDeeboData(local: boolean)
By default, the initialization function passes a boolean true, which tells deebodata to load a local dataset. You can either set a new local data using setLocalDataSet described above, or remove the boolean true altogether and call setInitApiUrl to set your api endpoint and load that data.
