Data Grid Styles
JavaScript Data Grid
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
