canvas-datagrid
Version:
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
355 lines • 14.3 kB
JavaScript
/*jslint browser: true, unparam: true, evil: true*/
window.styleLibrary = {};
window.defaultStyleLibrary = {};
window.defaultStyleLibrary['sea wolf'] = {
"activeCellBackgroundColor": "#1e1e20",
"activeCellBorderColor": "#1e1e20",
"activeCellBorderWidth": 0.25,
"activeCellColor": "#d9cb9e",
"activeCellFont": "16px sans-serif",
"activeCellHoverBackgroundColor": "#374140",
"activeCellHoverColor": "#374140",
"activeCellOverlayBorderColor": "#dc3522",
"activeCellOverlayBorderWidth": 1.25,
"activeCellPaddingBottom": 5,
"activeCellPaddingLeft": 5,
"activeCellPaddingRight": 7,
"activeCellPaddingTop": 5,
"activeCellSelectedBackgroundColor": "#374140",
"activeCellSelectedColor": "#d9cb9e",
"activeColumnHeaderCellBackgroundColor": "#2a2c2b",
"activeColumnHeaderCellColor": "#d9cb9e",
"activeRowHeaderCellBackgroundColor": "#2a2c2b",
"activeRowHeaderCellColor": "#d9cb9e",
"autocompleteBottomMargin": 60,
"autosizeHeaderCellPadding": 8,
"autosizePadding": 5,
"gridBackgroundColor": "#1e1e20",
"cellAutoResizePadding": 13,
"cellBackgroundColor": "#1e1e20",
"cellBorderColor": "#2a2c2b",
"cellBorderWidth": 0.25,
"cellColor": "#d9cb9e",
"cellFont": "16px sans-serif",
"cellHeight": 24,
"cellHeightWithChildGrid": 150,
"cellHorizontalAlignment": "left",
"cellHoverBackgroundColor": "#2a2c2b",
"cellHoverColor": "#2a2c2b",
"cellPaddingBottom": 5,
"cellPaddingLeft": 5,
"cellPaddingRight": 7,
"cellPaddingTop": 5,
"cellSelectedBackgroundColor": "#374140",
"cellSelectedColor": "#d9cb9e",
"cellVerticalAlignment": "center",
"cellWidthWithChildGrid": 250,
"childContextMenuArrowColor": "rgba(43, 48, 43, 1)",
"childContextMenuArrowHTML": "►",
"childContextMenuMarginLeft": -5,
"childContextMenuMarginTop": 0,
"columnHeaderCellBackgroundColor": "#1e1e20",
"columnHeaderCellBorderColor": "#1e1e20",
"columnHeaderCellBorderWidth": 0.25,
"columnHeaderCellColor": "#d9cb9e",
"columnHeaderCellFont": "16px sans-serif",
"columnHeaderCellHeight": 25,
"columnHeaderCellHorizontalAlignment": "left",
"columnHeaderCellHoverBackgroundColor": "#2a2c2b",
"columnHeaderCellHoverColor": "#d9cb9e",
"columnHeaderCellPaddingBottom": 5,
"columnHeaderCellPaddingLeft": 5,
"columnHeaderCellPaddingRight": 7,
"columnHeaderCellPaddingTop": 5,
"columnHeaderCellVerticalAlignment": "center",
"cellWidth": 250,
"contextFilterButtonBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextFilterButtonBorderRadius": "3px",
"contextFilterButtonHTML": "▼",
"contextFilterInputBackground": "rgba(255,255,255,1)",
"contextFilterInputBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextFilterInputBorderRadius": "0",
"contextFilterInputColor": "rgba(0,0,0,1)",
"contextFilterInputFontFamily": "sans-serif",
"contextFilterInputFontSize": "14px",
"contextMenuArrowColor": "rgba(43, 48, 43, 1)",
"contextMenuArrowDownHTML": "▼",
"contextMenuArrowUpHTML": "▲",
"contextMenuBackground": "rgba(240, 240, 240, 1)",
"contextMenuBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextMenuBorderRadius": "3px",
"contextMenuChildArrowFontSize": "12px",
"contextMenuColor": "rgba(43, 48, 43, 1)",
"contextMenuFilterButtonFontFamily": "sans-serif",
"contextMenuFilterButtonFontSize": "10px",
"contextMenuFilterInvalidExpresion": "rgba(237, 155, 156, 1)",
"contextMenuFontFamily": "sans-serif",
"contextMenuFontSize": "16px",
"contextMenuHoverBackground": "rgba(182, 205, 250, 1)",
"contextMenuHoverColor": "rgba(43, 48, 153, 1)",
"contextMenuItemBorderRadius": "3px",
"contextMenuItemMargin": "2px",
"contextMenuLabelDisplay": "inline-block",
"contextMenuLabelMargin": "0 3px 0 0",
"contextMenuLabelMaxWidth": "700px",
"contextMenuLabelMinWidth": "75px",
"contextMenuMarginLeft": 3,
"contextMenuMarginTop": -3,
"contextMenuOpacity": "0.98",
"contextMenuPadding": "2px",
"contextMenuWindowMargin": 6,
"cornerCellBackgroundColor": "#2a2c2b",
"cornerCellBorderColor": "#1e1e20",
"editCellBackgroundColor": "white",
"editCellBorder": "solid 1px rgba(110, 168, 255, 1)",
"editCellBoxShadow": "0 2px 5px rgba(0,0,0,0.4)",
"editCellColor": "black",
"editCellFontFamily": "sans-serif",
"editCellFontSize": "16px",
"editCellPaddingLeft": 4,
"gridBorderColor": "#2a2c2b",
"gridBorderWidth": 1,
"columnHeaderOrderByArrowBorderColor": "rgba(195, 199, 202, 1)",
"columnHeaderOrderByArrowBorderWidth": 1,
"columnHeaderOrderByArrowColor": "rgba(155, 155, 155, 1)",
"columnHeaderOrderByArrowHeight": 8,
"columnHeaderOrderByArrowMarginLeft": 0,
"columnHeaderOrderByArrowMarginRight": 5,
"columnHeaderOrderByArrowMarginTop": 6,
"columnHeaderOrderByArrowWidth": 13,
"minColumnWidth": 45,
"minHeight": 24,
"minRowHeight": 24,
"name": "sea wolf",
"reorderMarkerBackgroundColor": "#dc3522",
"reorderMarkerBorderColor": "#dc3522",
"reorderMarkerBorderWidth": 1.25,
"reorderMarkerIndexBorderColor": "#dc3522",
"reorderMarkerIndexBorderWidth": 2.75,
"rowHeaderCellBackgroundColor": "#2a2c2b",
"rowHeaderCellBorderColor": "#1e1e20",
"rowHeaderCellBorderWidth": 0.25,
"rowHeaderCellColor": "#d9cb9e",
"rowHeaderCellFont": "16px sans-serif",
"rowHeaderCellHeight": 25,
"rowHeaderCellHorizontalAlignment": "left",
"rowHeaderCellHoverBackgroundColor": "#2a2c2b",
"rowHeaderCellHoverColor": "#d9cb9e",
"rowHeaderCellPaddingBottom": 5,
"rowHeaderCellPaddingLeft": 5,
"rowHeaderCellPaddingRight": 5,
"rowHeaderCellPaddingTop": 5,
"rowHeaderCellSelectedBackgroundColor": "#2a2c2b",
"rowHeaderCellSelectedColor": "#d9cb9e",
"rowHeaderCellVerticalAlignment": "center",
"rowHeaderCellWidth": 57,
"scrollBarActiveColor": "#374140",
"scrollBarBackgroundColor": "#1e1e20",
"scrollBarBorderColor": "#1e1e20",
"scrollBarBorderWidth": 0.5,
"scrollBarBoxBorderRadius": 3,
"scrollBarBoxColor": "#2a2c2b",
"scrollBarBoxMargin": 2,
"scrollBarBoxMinSize": 15,
"scrollBarBoxWidth": 8,
"scrollBarCornerBackgroundColor": "#2a2c29",
"scrollBarCornerBorderColor": "#364036",
"scrollBarWidth": 11,
"selectionOverlayBorderColor": "#dc3522",
"selectionOverlayBorderWidth": 1.25,
"treeArrowBorderColor": "#2a2c2b",
"treeArrowBorderWidth": 1,
"treeArrowClickRadius": 5,
"treeArrowColor": "#dc3522",
"treeArrowHeight": 8,
"treeArrowMarginLeft": 0,
"treeArrowMarginRight": 5,
"treeArrowMarginTop": 6,
"treeArrowWidth": 13,
"treeGridHeight": 250,
"activeCellFontHeight": 16,
"cellFontHeight": 16,
"columnHeaderCellFontHeight": 16,
"contextFilterInputFontSizeHeight": 14,
"contextMenuChildArrowFontSizeHeight": 12,
"contextMenuFilterButtonFontSizeHeight": 10,
"contextMenuFontSizeHeight": 16,
"editCellFontSizeHeight": 16,
"rowHeaderCellFontHeight": 16
};
window.defaultStyleLibrary.dark = {
"activeCellBackgroundColor": "#4d514c",
"activeCellBorderColor": "#515151",
"activeCellBorderWidth": 0.25,
"activeCellColor": "#cfd9ca",
"activeCellFont": "16px sans-serif",
"activeCellHoverBackgroundColor": "#2a2c29",
"activeCellHoverColor": "#ccd6c7",
"activeCellOverlayBorderColor": "#5d6059",
"activeCellOverlayBorderWidth": 2,
"activeCellPaddingBottom": 5,
"activeCellPaddingLeft": 5,
"activeCellPaddingRight": 7,
"activeCellPaddingTop": 5,
"activeCellSelectedBackgroundColor": "#4d514c",
"activeCellSelectedColor": "#c8c8c8",
"activeColumnHeaderCellBackgroundColor": "#5a5a5a",
"activeColumnHeaderCellColor": "#b8b8b8",
"activeRowHeaderCellBackgroundColor": "#5a5a5a",
"activeRowHeaderCellColor": "#b8b8b8",
"autocompleteBottomMargin": 60,
"autosizeHeaderCellPadding": 8,
"autosizePadding": 5,
"gridBackgroundColor": "#1d201d",
"cellAutoResizePadding": 13,
"cellBackgroundColor": "#2a2c29",
"cellBorderColor": "#060606",
"cellBorderWidth": 0.25,
"cellColor": "#b8b8b8",
"cellFont": "16px sans-serif",
"cellHeight": 24,
"cellHeightWithChildGrid": 150,
"cellHorizontalAlignment": "left",
"cellHoverBackgroundColor": "#2a2c29",
"cellHoverColor": "#b8b8b8",
"cellPaddingBottom": 5,
"cellPaddingLeft": 5,
"cellPaddingRight": 7,
"cellPaddingTop": 5,
"cellSelectedBackgroundColor": "#444649",
"cellSelectedColor": "#a9c3a9",
"cellVerticalAlignment": "center",
"cellWidthWithChildGrid": 250,
"childContextMenuArrowColor": "rgba(43, 48, 43, 1)",
"childContextMenuArrowHTML": "►",
"childContextMenuMarginLeft": -5,
"childContextMenuMarginTop": 0,
"columnHeaderCellBackgroundColor": "#1e1e20",
"columnHeaderCellBorderColor": "#1e1e20",
"columnHeaderCellBorderWidth": 0.25,
"columnHeaderCellColor": "#b8b8b8",
"columnHeaderCellFont": "16px sans-serif",
"columnHeaderCellHeight": 25,
"columnHeaderCellHorizontalAlignment": "left",
"columnHeaderCellHoverBackgroundColor": "#2a2c2b",
"columnHeaderCellHoverColor": "#b8b8b8",
"columnHeaderCellPaddingBottom": 5,
"columnHeaderCellPaddingLeft": 5,
"columnHeaderCellPaddingRight": 7,
"columnHeaderCellPaddingTop": 5,
"columnHeaderCellVerticalAlignment": "center",
"cellWidth": 250,
"contextFilterButtonBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextFilterButtonBorderRadius": "3px",
"contextFilterButtonHTML": "▼",
"contextFilterInputBackground": "rgba(255,255,255,1)",
"contextFilterInputBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextFilterInputBorderRadius": "0",
"contextFilterInputColor": "rgba(0,0,0,1)",
"contextFilterInputFontFamily": "sans-serif",
"contextFilterInputFontSize": "14px",
"contextMenuArrowColor": "rgba(43, 48, 43, 1)",
"contextMenuArrowDownHTML": "▼",
"contextMenuArrowUpHTML": "▲",
"contextMenuBackground": "rgba(240, 240, 240, 1)",
"contextMenuBorder": "solid 1px rgba(158, 163, 169, 1)",
"contextMenuBorderRadius": "3px",
"contextMenuChildArrowFontSize": "12px",
"contextMenuColor": "rgba(43, 48, 43, 1)",
"contextMenuFilterButtonFontFamily": "sans-serif",
"contextMenuFilterButtonFontSize": "10px",
"contextMenuFilterInvalidExpresion": "rgba(237, 155, 156, 1)",
"contextMenuFontFamily": "sans-serif",
"contextMenuFontSize": "16px",
"contextMenuHoverBackground": "rgba(182, 205, 250, 1)",
"contextMenuHoverColor": "rgba(43, 48, 153, 1)",
"contextMenuItemBorderRadius": "3px",
"contextMenuItemMargin": "2px",
"contextMenuLabelDisplay": "inline-block",
"contextMenuLabelMargin": "0 3px 0 0",
"contextMenuLabelMaxWidth": "700px",
"contextMenuLabelMinWidth": "75px",
"contextMenuMarginLeft": 3,
"contextMenuMarginTop": -3,
"contextMenuOpacity": "0.98",
"contextMenuPadding": "2px",
"contextMenuWindowMargin": 6,
"cornerCellBackgroundColor": "#61655e",
"cornerCellBorderColor": "rgba(202, 202, 202, 1)",
"editCellBackgroundColor": "white",
"editCellBorder": "solid 1px rgba(110, 168, 255, 1)",
"editCellBoxShadow": "0 2px 5px rgba(0,0,0,0.4)",
"editCellColor": "black",
"editCellFontFamily": "sans-serif",
"editCellFontSize": "16px",
"editCellPaddingLeft": 4,
"gridBorderColor": "#505050",
"gridBorderWidth": 1,
"columnHeaderOrderByArrowBorderColor": "rgba(195, 199, 202, 1)",
"columnHeaderOrderByArrowBorderWidth": 1,
"columnHeaderOrderByArrowColor": "rgba(155, 155, 155, 1)",
"columnHeaderOrderByArrowHeight": 8,
"columnHeaderOrderByArrowMarginLeft": 0,
"columnHeaderOrderByArrowMarginRight": 5,
"columnHeaderOrderByArrowMarginTop": 6,
"columnHeaderOrderByArrowWidth": 13,
"minColumnWidth": 45,
"minHeight": 24,
"minRowHeight": 24,
"name": "dark",
"reorderMarkerBackgroundColor": "rgba(0, 0, 0, 0.1)",
"reorderMarkerBorderColor": "rgba(0, 0, 0, 0.2)",
"reorderMarkerBorderWidth": 1.25,
"reorderMarkerIndexBorderColor": "rgba(66, 133, 244, 1)",
"reorderMarkerIndexBorderWidth": 2.75,
"rowHeaderCellBackgroundColor": "#454843",
"rowHeaderCellBorderColor": "#1c1c1c",
"rowHeaderCellBorderWidth": 0.25,
"rowHeaderCellColor": "#a7a7a7",
"rowHeaderCellFont": "16px sans-serif",
"rowHeaderCellHeight": 25,
"rowHeaderCellHorizontalAlignment": "left",
"rowHeaderCellHoverBackgroundColor": "#5a6258",
"rowHeaderCellHoverColor": "#aeaeae",
"rowHeaderCellPaddingBottom": 5,
"rowHeaderCellPaddingLeft": 5,
"rowHeaderCellPaddingRight": 5,
"rowHeaderCellPaddingTop": 5,
"rowHeaderCellSelectedBackgroundColor": "rgba(217, 217, 217, 1)",
"rowHeaderCellSelectedColor": "rgba(50, 50, 50, 1)",
"rowHeaderCellVerticalAlignment": "center",
"rowHeaderCellWidth": 57,
"scrollBarActiveColor": "rgba(125, 125, 125, 1)",
"scrollBarBackgroundColor": "#2a2b28",
"scrollBarBorderColor": "#191a18",
"scrollBarBorderWidth": 0.5,
"scrollBarBoxBorderRadius": 3,
"scrollBarBoxColor": "#393939",
"scrollBarBoxMargin": 2,
"scrollBarBoxMinSize": 15,
"scrollBarBoxWidth": 8,
"scrollBarCornerBackgroundColor": "#2a2c29",
"scrollBarCornerBorderColor": "#364036",
"scrollBarWidth": 11,
"selectionOverlayBorderColor": "#3e413d",
"selectionOverlayBorderWidth": 1.25,
"treeArrowBorderColor": "rgba(195, 199, 202, 1)",
"treeArrowBorderWidth": 1,
"treeArrowClickRadius": 5,
"treeArrowColor": "rgba(155, 155, 155, 1)",
"treeArrowHeight": 8,
"treeArrowMarginLeft": 0,
"treeArrowMarginRight": 5,
"treeArrowMarginTop": 6,
"treeArrowWidth": 13,
"treeGridHeight": 250,
"activeCellFontHeight": 16,
"cellFontHeight": 16,
"columnHeaderCellFontHeight": 16,
"contextFilterInputFontSizeHeight": 14,
"contextMenuChildArrowFontSizeHeight": 12,
"contextMenuFilterButtonFontSizeHeight": 10,
"contextMenuFontSizeHeight": 16,
"editCellFontSizeHeight": 16,
"rowHeaderCellFontHeight": 16
};