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.