Themes
You might have noticed that DataGridXL doesn't require a CSS file. We have a number of reasons for that:
- Our goal was to create a plug & play component: easy to include & style for anyone, including (grumpy) 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:
var my_theme = {
cellCursorColor: "orange",
colHeaderBackgroundColor: "#200",
rowHeaderBackgroundColor: "#00ff00"
};
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
{
// sheet
sheetColor: "lightyellow",//"#f4f4f4",
// colHeader
colHeaderBackgroundColor: "#eaecee",
colHeaderHighlightBackgroundColor: "#cad1d6",
colHeaderSelectedBackgroundColor: "orange",
// rowHeader
rowHeaderBackgroundColor: "#eaecee",
rowHeaderHighlightBackgroundColor: "#cad1d6",
rowHeaderSelectedBackgroundColor: "orange",
// gridLines
gridLineOpacity: 0.1,
// cellSelection
cellSelectionBackgroundColor: "rgba(0,120,255,.1)",
cellSelectionBorderColor: "#0078ff",
// cellCursor
cellCursorColor: "#0078ff",
// fillHandle
fillHandleColor: "red",
// ranges
copyRangeBorderColor: "#0078ff",
cutRangeBorderColor: "#0078ff",
fillRangeBorderColor: "#555",
// contextMenu
contextMenuBackgroundColor: "#fff",
contextMenuWidth: 240,
contextMenuBorderRadius: 4,
contextMenuItemBackgroundColor: "transparent",
contextMenuItemHighlightBackgroundColor: "#e5d6c0", // "#eee"
contextMenuItemDisabledFontColor: "#ccc",
// scrollbars
scrollbarBorderColor: "orange", // #ddd;
scrollbarBackgroundColor: "pink", // "white"
scrollbarThumbColor: "green", // "#cad1d6"
scrollbarThumbHighlightColor: "lightblue",
// guides
colResizeGuideLineColor: "orange", // "#0078ff"
colResizeGuideHandleColor: "green", // "#0078ff"
// editor
editorBorderColor: "#0078ff",
fullEditorBorderColor: "red"
}
We have created a theme editor (in beta) to help you create your DataGridXL themes.
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.