Docs
Getting Started
Working with Data
How Tos
Frameworks
How it's Made
Themes
DataGridXL doesn't require a CSS file. We have a number of reasons for that:
- DataGridXL is a plug & play component: easy to include & style for anyone, including back-end developers.
- DataGridXL is all about virtual scrolling & rendering. CSS cannot target an :nth row that does not actually exist in the DOM.
- There are so many trends in CSS-land that we decided to skip CSS altogether. We don't want to break anyone's existing workflow.
Passing styles
"Well, if I can't use CSS, how do I create a theme for my grid?" Good question! Pass your styles to the grid's theme option:
Javascript
var my_theme = {
"component" : "#15202b",
"button" : "#2f3b47",
"button-icon": "#8899a6"
}
var grid = new DataGridXL("grid", {
data: [ ... ],
theme: my_theme
});The properties you include in your theme object override the values of DataGridXL's default theme.
All theming options
Javascript
{
// component
"component" : "#ffffff",
// bottombar & topbar
"button" : "#e8eaed",
"button-icon" : "#5f6368",
"input" : "#ffffff",
"input|text" : "#000000",
"input|border" : "#5f6368",
"input:focus|border" : "#0078ff",
"input-info" : "#5f6368",
// contextmenu
"contextmenu" : "#ffffff",
"contextmenu|text" : "#000000",
"contextmenu-item:highlight": "#eeeeee",
"contextmenu-item-shortcut" : "#aaaaaa",
// sheet
"blanksheet" : "#f3f3f3",
"sheet" : "#ffffff",
"sheet|text" : "#000000",
// scrollbar
"scrollbar" : "#ffffff",
"scrollbar|border" : "#999999",
// grid lines
"gridline" : "#555555",
"gridline-tip" : "#000000",
"gridline|opacity" : 0.20,
// headers
"header" : "#f8f9fa",
"header|text" : "#000000",
"header:highlight" : "#e8eaed",
"header:selected" : "#5f6368",
"header:selected|text" : "#ffffff",
"header-icon" : "#000000",
// action ranges
"cellrange:cut" : "#0078ff",
"cellrange:copy" : "#0078ff",
"cellrange:fill" : "#000000",
// selection
"cellcursor" : "#0078ff",
"cellrange:selected" : "#0078ff",
"cellrange:selected|border" : "#0078ff",
"cellrange:selected|opacity": 0.10,
// fill handle
"fillhandle" : "#0078ff",
// cell editor
"celleditor" : "#0078ff",
// search
"searchcursor" : "#000000",
"cell+found" : "#89bf71",
"cell+found|opacity" : 0.25,
// freezeline
"freezeline" : "#dadfe8",
"freezeline-tip" : "#bcbcbc",
"freezelineplaceholder" : "#bcbcbc",
// move action
"move?ghost" : "#000000",
"move?ghost|opacity" : 0.15,
"move?guide" : "#5f6368",
"move?guide|opacity" : 1,
// freeze action
"freeze?hint" : "#a5c6fe",
"freeze?ghost" : "#000000",
"freeze?ghost|opacity" : 0.15,
"freeze?guide" : "#000000",
"freeze?guide|opacity" : 0.30,
// resize action
"resize?hint" : "#0078ff",
"resize?guide" : "#0078ff",
"resize?guide|opacity" : 1,
// show action
"show?hint" : "#ffffff",
"show?hint-icon" : "#000000",
"show?hint|border" : "#0078ff"
}CSS Classnames
If these options do not cover your style demands, open up your browser's DOM inspector. You'll see that nearly every DOM node inside your DataGridXL component has a CSS class name.
Perhaps you want to add a box-shadow to the grid's fillHandle. Impossible using the theme option, but still possible using CSS. Just target .dgxl-fillHandle and apply your CSS styles.
