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, rgb value, or hex colors as strings. color1 is for the text color in the header, footer, and group by panels, while color2 is for the background color of the same components. -
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 -
For numeric columns, to color positive values green and negative values red (Enterprise only)
deebo.methods.setColoredNumbersColumns(columns: string [])
Pass an array of string column names that are to be colored green for positive numbers and red for negative numbers. This works great for percentage and financial related data. -
Add styles to specific values in a column (Enterprise only)
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
