Themes

NOTE DataGridXL requires a commercial license.

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:

const my_theme = {
  "component"  : "#15202b",
  "button"     : "#2f3b47",
  "button-icon": "#8899a6"
}

const 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

{

  // 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.