canvas-datagrid 0.25.3 → 0.26.0

package/lib/defaults.js

@@ -6,6 +6,7 @@ export default function (self) {
   self.defaults = {
     attributes: [
       ['allowColumnReordering', true],
+      ['allowColumnSelection', true],
       ['allowColumnResize', true],
       ['allowColumnResizeFromCell', false],
       ['allowFreezingRows', false],
@@ -16,12 +17,22 @@ export default function (self) {
       ['allowRowResize', true],
       ['allowRowResizeFromCell', false],
       ['allowSorting', true],
+      ['allowGroupingRows', true],
+      ['allowGroupingColumns', true],
+      ['allowGridExpandOnPaste', false],
+      ['animationDurationShowContextMenu', 50],
+      ['animationDurationHideContextMenu', 50],
       ['autoGenerateSchema', false],
+      ['fillLastColumn', false],
       ['autoResizeColumns', false],
       ['autoResizeRows', false],
+      ['autoScrollOnMousemove', false],
+      ['autoScrollMargin', 5],
+      ['allowShrinkingSelection', false],
       ['blanksText', '(Blanks)'],
       ['borderDragBehavior', 'none'],
       ['borderResizeZone', 10],
+      ['clearCellsWhenShrinkingSelection', false],
       ['clearSettingsOptionText', 'Clear saved settings'],
       ['columnHeaderClickBehavior', 'sort'],
       ['columnSelectorHiddenText', '   '],
@@ -36,8 +47,15 @@ export default function (self) {
       ['ellipsisText', '...'],
       ['filterOptionText', 'Filter %s'],
       ['filterTextPrefix', '(filtered) '],
+      ['filterFrozenRows', true],
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
+      ['showUnhideColumnsIndicator', false],
+      ['showUnhideRowsIndicator', false],
+      ['showHideRow', 'Hide row %s'],
+      ['showHideRows', 'Hide rows %s'],
+      ['hoverMode', 'cell'],
+      ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
       ['multiLine', false],
       ['name', ''],
@@ -46,8 +64,10 @@ export default function (self) {
       ['persistantSelectionMode', false],
       ['removeFilterOptionText', 'Remove filter on %s'],
       ['reorderDeadZone', 3],
+      ['resizeAfterDragged', false],
       ['resizeScrollZone', 20],
       ['rowGrabZoneSize', 5],
+      ['columnGrabZoneSize', 30],
       ['saveAppearance', true],
       ['scrollAnimationPPSThreshold', 0.75],
       ['scrollPointerLock', false],
@@ -62,16 +82,33 @@ export default function (self) {
       ['showColumnSelector', true],
       ['showCopy', false],
       ['showFilter', true],
+      ['showFilterInCell', false],
       ['showNewRow', false],
       ['showOrderByOption', true],
       ['showOrderByOptionTextAsc', 'Order by %s ascending'],
       ['showOrderByOptionTextDesc', 'Order by %s descending'],
+      //#region grouping
+      ['showGroupColumns', 'Group columns %s'],
+      ['showGroupRows', 'Group rows %s'],
+      ['showRemoveGroupColumns', 'Remove group %s'],
+      ['showRemoveGroupRows', 'Remove group %s'],
+      ['showRemoveAllGroupColumns', 'Remove all column groups'],
+      ['showRemoveAllGroupRows', 'Remove all row groups'],
+      ['showExpandAllGroupColumns', 'Expand all column groups'],
+      ['showExpandAllGroupRows', 'Expand all row groups'],
+      ['showCollapseAllGroupColumns', 'Collapse all column groups'],
+      ['showCollapseAllGroupRows', 'Collapse all row groups'],
+      ['columnGroupIndicatorPosition', 'right'],
+      ['rowGroupIndicatorPosition', 'bottom'],
+      //#endregion grouping
       ['showPaste', false],
       ['showPerformance', false],
       ['showRowHeaders', true],
       ['showRowNumbers', true],
+      ['showRowNumberGaps', true],
       ['singleSelectionMode', false],
       ['snapToRow', false],
+      ['sortFrozenRows', true],
       ['touchContextMenuTimeMs', 800],
       ['touchDeadZone', 3],
       ['touchEasingMethod', 'easeOutQuad'],
@@ -83,8 +120,14 @@ export default function (self) {
       ['touchZoomMin', 0.5],
       ['touchZoomMax', 1.75],
       ['maxPixelRatio', 2],
+      ['maxCanvasSize', 16384],
       ['tree', false],
       ['treeHorizontalScroll', false],
+      ['rowTree', []],
+      ['rowTreeColIndex', 0],
+      ['columnTree', []],
+      ['columnTreeRowStartIndex', 0],
+      ['columnTreeRowEndIndex', 0],
     ],
     styles: [
       ['activeCellBackgroundColor', 'rgba(255, 255, 255, 1)'],
@@ -111,6 +154,16 @@ export default function (self) {
       ['autocompleteBottomMargin', 60],
       ['autosizeHeaderCellPadding', 8],
       ['autosizePadding', 5],
+      ['buttonActiveBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['buttonActiveBorderColor', 'rgba(110, 168, 255, 1)'],
+      ['buttonArrowColor', 'rgba(50, 50, 50, 1)'],
+      ['buttonArrowDownHTML', '▼'],
+      ['buttonZIndex', 10000],
+      ['buttonBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['buttonBorderColor', 'rgba(172, 172, 172, 1)'],
+      ['buttonHoverBackgroundColor', 'rgba(240, 240, 240, 1)'],
+      ['buttonMenuWindowMargin', 30],
+      ['buttonPadding', '3px'],
       ['cellAutoResizePadding', 13],
       ['cellBackgroundColor', 'rgba(255, 255, 255, 1)'],
       ['cellBorderColor', 'rgba(195, 199, 202, 1)'],
@@ -129,6 +182,15 @@ export default function (self) {
       ['cellPaddingTop', 5],
       ['cellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'],
       ['cellSelectedColor', 'rgba(0, 0, 0, 1)'],
+      ['cellTreeIconBorderColor', 'rgba(162, 174, 207, 1)'],
+      ['cellTreeIconFillColor', 'rgba(240, 240, 240, 1)'],
+      ['cellTreeIconHoverFillColor', 'rgba(198, 217, 233, 1)'],
+      ['cellTreeIconLineColor', 'rgba(43, 53, 81, 1)'],
+      ['cellTreeIconLineWidth', 1.5],
+      ['cellTreeIconMarginLeft', 0],
+      ['cellTreeIconMarginRight', 5],
+      ['cellTreeIconMarginTop', 6],
+      ['cellTreeIconWidth', 13],
       ['cellVerticalAlignment', 'center'],
       ['cellWidth', 250],
       ['cellWidthWithChildGrid', 250],
@@ -139,6 +201,7 @@ export default function (self) {
       ['childContextMenuArrowHTML', '►'],
       ['childContextMenuMarginLeft', -11],
       ['childContextMenuMarginTop', -6],
+      ['columnGroupRowHeight', 25],
       ['columnHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['columnHeaderCellBorderColor', 'rgba(172, 172, 172, 1)'],
       ['columnHeaderCellBorderWidth', 1],
@@ -225,18 +288,37 @@ export default function (self) {
       ['editCellFontSize', '16px'],
       ['editCellPaddingLeft', 4],
       ['editCellZIndex', 10000],
-      ['frozenMarkerHoverColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerHoverBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerActiveColor', 'rgba(236, 243, 255, 1)'],
-      ['frozenMarkerActiveBorderColor', 'rgba(110, 168, 255, 1)'],
-      ['frozenMarkerColor', 'rgba(222, 222, 222, 1)'],
-      ['frozenMarkerBorderColor', 'rgba(168, 168, 168, 1)'],
+      ['filterButtonActiveBackgroundColor', 'rgba(225, 225, 225, 1)'],
+      ['filterButtonArrowBorderColor', 'rgba(195, 199, 202, 1)'],
+      ['filterButtonArrowBorderWidth', 1],
+      ['filterButtonArrowClickRadius', 5],
+      ['filterButtonArrowColor', 'rgba(50, 50, 50, 1)'],
+      ['filterButtonArrowHeight', 5],
+      ['filterButtonArrowWidth', 8],
+      ['filterButtonBackgroundColor', 'rgba(240, 240, 240, 1)'],
+      ['filterButtonBorderColor', 'rgba(172, 172, 172, 1)'],
+      ['filterButtonBorderRadius', 3],
+      ['filterButtonHeight', 20],
+      ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'],
+      ['filterButtonMenuOffsetTop', 10],
+      ['filterButtonWidth', 20],
+      ['frozenMarkerHoverColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerHoverBorderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerActiveColor', 'rgba(165, 198, 254, 0.2)'],
+      ['frozenMarkerActiveBorderColor', 'rgba(165, 198, 254, 0.5)'],
+      ['frozenMarkerActiveHeaderColor', 'rgba(165, 198, 254, 1)'],
+      ['frozenMarkerColor', 'rgba(221, 221, 221, 1)'],
+      ['frozenMarkerBorderColor', 'rgba(221, 221, 221, 1)'],
       ['frozenMarkerBorderWidth', 1],
-      ['frozenMarkerWidth', 2],
+      ['frozenMarkerHeaderColor', 'rgba(188, 188, 188, 1)'],
+      ['frozenMarkerWidth', 4],
+      ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['gridBorderCollapse', 'collapse'],
       ['gridBorderColor', 'rgba(202, 202, 202, 1)'],
       ['gridBorderWidth', 1],
+      ['groupIndicatorColor', 'rgba(155, 155, 155, 1)'],
+      ['groupIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
       ['height', 'auto'],
       ['maxHeight', 'inherit'],
       ['maxWidth', 'inherit'],
@@ -259,6 +341,9 @@ export default function (self) {
       ['reorderMarkerBorderWidth', 1.25],
       ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'],
       ['reorderMarkerIndexBorderWidth', 2.75],
+      ['resizeMarkerColor', 'rgba(0, 0, 0, 0.2)'],
+      ['resizeMarkerSize', 2],
+      ['rowGroupColumnWidth', 25],
       ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'],
       ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'],
       ['rowHeaderCellBorderWidth', 1],
@@ -272,6 +357,8 @@ export default function (self) {
       ['rowHeaderCellPaddingLeft', 5],
       ['rowHeaderCellPaddingRight', 5],
       ['rowHeaderCellPaddingTop', 5],
+      ['rowHeaderCellRowNumberGapHeight', 5],
+      ['rowHeaderCellRowNumberGapColor', 'rgba(50, 50, 50, 1)'],
       ['rowHeaderCellSelectedBackgroundColor', 'rgba(217, 217, 217, 1)'],
       ['rowHeaderCellSelectedColor', 'rgba(50, 50, 50, 1)'],
       ['rowHeaderCellVerticalAlignment', 'center'],
@@ -293,6 +380,8 @@ export default function (self) {
       ['selectionHandleColor', 'rgba(66, 133, 244, 1)'],
       ['selectionHandleSize', 8],
       ['selectionHandleType', 'square'],
+      ['fillOverlayBorderColor', 'rgba(127, 127, 127, 1)'],
+      ['fillOverlayBorderWidth', 2],
       ['selectionOverlayBorderColor', 'rgba(66, 133, 244, 1)'],
       ['selectionOverlayBorderWidth', 1],
       ['treeArrowBorderColor', 'rgba(195, 199, 202, 1)'],
@@ -305,6 +394,10 @@ export default function (self) {
       ['treeArrowMarginTop', 6],
       ['treeArrowWidth', 13],
       ['treeGridHeight', 250],
+      ['unhideIndicatorColor', 'rgba(0, 0, 0, 1)'],
+      ['unhideIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['unhideIndicatorBorderColor', 'rgba(174, 193, 232, 1)'],
+      ['unhideIndicatorSize', 16],
       ['width', 'auto'],
     ],
   };

package/lib/docs.js

@@ -14,7 +14,7 @@
  * @param {HTMLElement} args.parentNode HTML element that will hold the grid.  This block element must have a height, canvas-datagrid will add a canvas itself and will match itself to this element's dimensions.  It will resize itself on window.resize events, and DOM mutation.  But you may need to invoke canvas-datagrid.resize() manually if you find it does not maintain size in your use case.  When using the non web component the parentNode can be a canvas.
  * @param {string} [args.name] Optional value that will allow the saving of column height, row width, etc. to the browser's local store. This name should be unique to this grid.
  * @param {boolean} [args.tree=false] - When true, an arrow will be drawn on each row that when clicked raises the See {@link canvasDatagrid#event:expandtree} event for that row and creates an inner grid.  See {@link tutorial--Allow-users-to-open-trees}.
- * @param {boolean} [args.treeHorizontalScroll=false] - When true, expanded child grids will scroll horizontally with the parent columns. When false, when scrolling horizontally child grids will remain stationary. This does not impact vertical scrolling behavior.
+ * @param {boolean} [args.treeHorizontalScroll=false] - Reserved. Intended to make expanded child grids scroll horizontally with the parent columns; the option is accepted but not implemented yet (see issue #314), child grids always stay stationary.
  * @param {object} [args.cellGridAttributes] - Attributes used for cell grids. These child grids are different than the tree grids. See the {@link canvasDatagrid.data} property for more information about cell grids.
  * @param {object} [args.treeGridAttributes] - Attributes used for tree grids. These child grids are different than the cell grids. See the {@link canvasDatagrid.data} property for more information about tree grids.
  * @param {boolean} [args.showNewRow=true] - When true, a row will appear at the bottom of the data set. schema[].defaultValue will define a default value for each cell. defaultValue can be a string or a function. When a function is used, the arguments header and index will be passed to the function. The value returned by the function will be the value in the new cell.  See {@link canvasDatagrid.header.defaultValue}
@@ -25,20 +25,33 @@
  * @param {boolean} [args.editable=true] - When true, cells can be edited. When false, grid is read only to the user.
  * @param {string} [args.borderDragBehavior='none'] - Can be set to 'resize', 'move', or 'none'.  If set to 'move', `allowMovingSelection` should also be set true.  If set to 'resize', `allowRowResizeFromCell` and/or `allowColumnResizeFromCell` should be set true.
  * @param {boolean} [args.autoGenerateSchema=false] - When true, every time data is set the schema will be automatically generated from the data overwriting any existing schema.
+ * @param {boolean} [args.autoScrollOnMousemove=false] - Only trigger auto scrolling when mouse moves in horizontal or vertical direction.
+ * @param {number} [args.autoScrollMargin=5] - Number of pixels of mouse movement to trigger auto scroll.
  * @param {boolean} [args.allowFreezingRows=false] - When true, the UI provides a drag-able cutter to freeze rows.
  * @param {boolean} [args.allowFreezingColumns=false] - When true, the UI provides a drag-able cutter to freeze columns.
+ * @param {boolean} [args.allowShrinkingSelection=false] - When true, this allows users to shrink the selection by dragging and dropping the handle inwards, similar to Excel. (Not supported yet.)
+ * @param {boolean} [args.clearCellsWhenShrinkingSelection=false] - When true, this allows the clearing of the previously selected cells after the handle is moved inwards. (Not supported yet.)
+ * @param {boolean} [args.filterFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by filters when {@link canvasDatagrid#param:allowFreezingRows} is true.
+ * @param {boolean} [args.sortFrozenRows=true] - When false, rows on and above {@link canvasDatagrid#property:frozenRow}` will be ignored by sorters when {@link canvasDatagrid#param:allowSorting} is true.
  * @param {boolean} [args.allowColumnReordering=true] - When true columns can be reordered.
  * @param {boolean} [args.allowMovingSelection=false] - When true selected data can be moved by clicking and dragging on the border of the selection.
  * @param {boolean} [args.allowRowReordering=false] - When true rows can be reordered.
  * @param {string} [args.blanksText=(Blanks)] - The text that appears on the context menu for filtering blank values (i.e. `undefined`, `null`, `''`).
  * @param {string} [args.ellipsisText=...] - The text used as ellipsis text on truncated values.
  * @param {boolean} [args.allowSorting=true] - Allow user to sort rows by clicking on column headers.
+ * @param {boolean} [args.allowColumnSelection=true] - When false, clicking or touching a column header never selects (highlights) the column, so with `columnHeaderClickBehavior: 'sort'` an existing row selection survives sorting. Columns can still be selected through the API.
+ * @param {boolean} [args.allowGridExpandOnPaste=false] - Allow adding new rows and columns if pasted data dimensions are bigger than existing grid dimensions.
+ * @param {boolean} [args.allowGroupingColumns=true] - Allow user to group columns by clicking on column headers.
+ * @param {boolean} [args.allowGroupingRows=true] - Allow user to group rows by clicking on rows headers.
  * @param {boolean} [args.showFilter=true] - When true, filter will be an option in the context menu.
  * @param {number} [args.pageUpDownOverlap=1] - Amount of rows to overlap when pageup/pagedown is used.
  * @param {boolean} [args.persistantSelectionMode=false] - When true, selections will behave as if the command/control key is held down at all times. Conflicts with singleSelectionMode.
  * @param {boolean} [args.singleSelectionMode=false] - When true, selections will ignore the command/control key. Conflicts with persistantSelectionMode.
+ * @param {boolean} [args.keepFocusOnMouseOut=false] - When true, grid will continue to handle keydown events when mouse is outside of the grid.
  * @param {string} [args.selectionMode='cell'] - Can be 'cell', or 'row'.  This setting dictates what will be selected when the user clicks a cell.  The cell, or the entire row respectively.
+ * @param {string} [args.hoverMode='cell'] - Can be 'cell', or 'row'. This setting dictates whether to highlight either the individual cell, or the entire row when hovering over a cell.
  * @param {boolean} [args.autoResizeColumns=false] - When true, all columns will be automatically resized to fit the data in them. Warning! Expensive for large (>100k ~2 seconds) datasets.
+ * @param {boolean} [args.fillLastColumn=false] - When true, the last visible column expands to the right edge of the grid when the columns do not fill its width. The outer edge of that column cannot be resized.
  * @param {boolean} [args.autoResizeRows=false] - When true, rows will be automatically resized to fit the data in them if text-wrapping is enabled.
  * @param {boolean} [args.allowRowHeaderResize=true] - When true, the user can resize the width of the row headers.
  * @param {boolean} [args.allowColumnResize=true] - When true, the user can resize the width of the columns.
@@ -50,14 +63,29 @@
  * @param {number} [args.borderResizeZone=10] - Number of pixels in total around a border that count as resize zones.
  * @param {boolean} [args.showColumnHeaders=true] - When true, headers are shown.
  * @param {boolean} [args.showRowNumbers=true] - When true, row numbers are shown in the row headers.
+ * @param {boolean} [args.showRowNumberGaps=true] - When true, gaps between row numbers due to filtering are shown in the row headers using a colored bar.
  * @param {boolean} [args.showRowHeaders=true] - When true, row headers are shown.
  * @param {number} [args.reorderDeadZone=3] - Number of pixels needed to move before column reordering occurs.
+ * @param {number} [args.selectionScrollZone=20] - Number of pixels to auto scroll in in horizontal or vertical direction.
  * @param {boolean} [args.showClearSettingsOption=true] - Show an option on the context menu to clear saved settings.
  * @param {string} [args.clearSettingsOptionText='Clear saved settings'] - Text that appears on the clear settings option.
  * @param {string} [args.showOrderByOptionTextDesc='Order by %s ascending'] - Text that appears on the order by descending option.
  * @param {string} [args.showOrderByOptionTextAsc='Order by %s desc'] - Text that appears on the order by ascending option.
+ * @param {string} [args.showGroupColumns='Group columns %s'] - Text that appears on the group columns option.
+ * @param {string} [args.showGroupRows='Group row %s'] - Text that appears on the group rows option.
+ * @param {string} [args.showRemoveGroupColumns='Remove group %s'] - Text that appears on the remove columns group option.
+ * @param {string} [args.showRemoveGroupRows='Remove group %s'] - Text that appears on the remove rows group option.
+ * @param {string} [args.showRemoveAllGroupColumns='Remove all column groups'] - Text that appears on the remove all column groups option.
+ * @param {string} [args.showRemoveAllGroupRows='Remove all row groups'] - Text that appears on the remove all row groups option.
+ * @param {string} [args.showExpandAllGroupColumns='Expand all column groups'] - Text that appears on the expand all column groups option.
+ * @param {string} [args.showExpandAllGroupRows='Expand all row groups'] - Text that appears on the expand all row groups option.
+ * @param {string} [args.showCollapseAllGroupColumns='Collapse all column groups'] - Text that appears on the collapsed all column groups option.
+ * @param {string} [args.showCollapseAllGroupRows='Collapse all row groups'] - Text that appears on the collapsed all row groups option.
+ * @param {string} [args.columnGroupIndicatorPosition='right'] - The position of the column group inidcator(icon), available values: 'left' and 'right'.
+ * @param {string} [args.rowGroupIndicatorPosition='bottom'] - Ths position of the row group indicator(icon), available values: 'top' and 'bottom'.
  * @param {boolean} [args.showOrderByOption=true] - Show an option on the context menu sort rows.
  * @param {boolean} [args.showPaste=false] - Show the paste option in the context menu when applicable.
+ * @param {boolean} [args.resizeAfterDragged] - Resize after the handle is dropped, similar to Excel.
  * @param {array} [args.schema=[]] - Sets the schema. See {@link canvasDatagrid.schema}.
  * @param {array} [args.data=[]] - Sets the data. See {@link canvasDatagrid.data}.
  * @param {number} [args.touchReleaseAnimationDurationMs=2000] - How long the ease animation runs after touch release.
@@ -69,7 +97,7 @@
  * @param {string} [args.copyText=Copy] - The text that appears on the context menu when copy is available.
  * @param {string} [args.columnHeaderClickBehavior=sort] - Can be any of sort, select, none.  When sort is selected, left clicking a column header will result in sorting ascending, then sorting descending if already sorted by this column.  If select is selected then clicking a column header will result in the column becoming selected.  Holding control/command or shift will select multiple columns in this mode.
  * @param {boolean} [args.scrollPointerLock=false] - When true, clicking on the scroll box to scroll will cause the mouse cursor to disappear to prevent it from exiting the area observable to the grid.
- * @param {string} [args.selectionHandleBehavior='none'] - When set to a value other than none a handle will appear in the lower right corner of the desktop version of the grid.  It does nothing but will be used in a future version of the grid.
+ * @param {string} [args.selectionHandleBehavior='none'] - When set to a value other than none, a handle will appear in the lower right corner of the desktop version of the grid.
  * @param {string} [args.columnSelectorVisibleText='  &nbsp '] - When a column is hidden, this is the value to the left of the title in the column selector content menu.
  * @param {string} [args.columnSelectorHiddenText='\u2713'] - When a column is visible, this is the value to the left of the title in the column selector content menu.
  * @param {string} [args.columnSelectorText='Add/remove columns'] - The text of the column selector context menu.
@@ -84,6 +112,8 @@
  * @param {number} [args.touchZoomMin=0.5] - The minimum zoom scale.
  * @param {number} [args.touchZoomMax=1.75] - The maximum zoom scale.
  * @param {number} [args.maxPixelRatio=1.5] - The maximum pixel ratio for high DPI displays.  High DPI displays can cause sluggish performance, this caps resolution the grid is rendered at.  Standard resolution (e.g.: 1920x1080) have a pixel ratio of 1:1 while higher resolution displays can be higher (e.g.: Retina display 2:1).  Higher numbers are sharper (higher resolution) up to the max of your display (usually 2), lower numbers are lower resolution, down to 1.  It might be fun to set a value lower than 1, I've never done it.
+ * @param {number} [args.maxCanvasSize=16384] - Largest width or height, in CSS pixels, an auto-sized grid (`style.width`/`style.height` set to `auto`) may grow to. Browsers cannot paint larger canvases. Past this size the grid stops growing and shows a scroll bar for the rest of the data.
+ * @param {object} [args.fillCellCallback] - The callback function that is called when a cell is filled.
  * @param {canvasDatagrid.style} [args.style={}] - Sets selected values in style.
  * @param {canvasDatagrid.filter} [args.filters={}] - Sets selected values in filters.  See {@link canvasDatagrid.filters}.
  * @param {canvasDatagrid.sorter} [args.sorters={}] - Sets selected values in sorters.  See {@link canvasDatagrid.sorters}.
@@ -108,6 +138,7 @@
  * @property {canvasDatagrid.formatter} formatters - Object that contains formatting functions for displaying text.  The properties in this object match the `schema[].type` property.  For example, if the schema for a given column was of the type `date` the grid would look for a formatter called `formatters.date` if a formatter cannot be found for a given data type a warning will be logged and the string formatter will be used. Formatters must return a string value to be displayed in the cell.  See {@link canvasDatagrid.formatters}.
  * @property {canvasDatagrid.sorter} sorters - Object that contains a list of sorting functions for sorting columns.   See {@tutorial sorters}.
  * @property {canvasDatagrid.filter} filters - Object that contains a list of filters for filtering data.  The properties in this object match the `schema[].type` property.  For example, if the schema for a given column was of the type `date` the grid would look for a filter called `filters.date` if a filter cannot be found for a given data type a warning will be logged and the string/RegExp filter will be used.   See {@link canvasDatagrid.filters}.
+ * @property {boolean} hasActiveFilters - When true, grid data is being filtered.
  * @property {canvasDatagrid.data} data - This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  However if a cell value is another data array, an inner grid will be rendered into the cell.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link canvasDatagrid.data}.
  * @property {canvasDatagrid.schema} schema - Schema is optional.  Schema is an array of {canvasDatagrid.header} objects.  If no schema is provided one will be generated from the data, in that case all data will be assumed to be string data. See {@link canvasDatagrid.schema}.
  * @property {number} scrollHeight - The total number of pixels that can be scrolled down.
@@ -124,7 +155,7 @@
  * @property {HTMLElement} shadowRoot - The shadow root element.
  * @property {array} rowOrder - Gets or sets the order of the rows.  This allows you to modify the appearance of the data without modifying the data itself. The order of the array dictates the order of the rows, e.g.: [0, 1, 2] is normal order, [2, 1, 0] is reverse.  The array length must be equal to or greater than the number of rows.
  * @property {array} columnOrder - Gets or sets the order of the columns.  This allows you to modify the appearance of the schema without modifying the data itself. The order of the array dictates the order of the columns, e.g.: [0, 1, 2] is normal order, [2, 1, 0] is reverse.  The array length must be equal to or greater than the number of columns.
- * @property {object} activeCell - Gets the active cell.  Consists of the properties rowIndex and columnIndex.
+ * @property {object} activeCell - Gets the active cell as `{rowIndex, columnIndex}` (view indexes). The active cell is the one that receives keyboard input and edits and is drawn with the `activeCell*` styles. It is independent of the selection: keyboard navigation moves it, `selectNone()` keeps it, and a range selection has exactly one active cell (the one the drag started from). Move it with `setActiveCell(columnIndex, rowIndex)` and listen to `activecellchanged` to follow it.
  * @property {boolean} hasFocus - When true, the grid is has focus.
  * @property {array} visibleRowHeights - The heights of the visible rows.
  * @property {boolean} isChildGrid - When true, this grid is within another grid.
@@ -233,6 +264,32 @@
  * @property {object} text.width - The width of the text, including truncation and ellipsis.
  * @property {object} text.value - The value of the text, including truncation and ellipsis.
  */
+/**
+ * The additional function to invoke when a cell is filled. The return value of this
+ * function sets the new data of the cell.
+ * @function
+ * @name canvasDataGrid.fillCellCallback
+ * @param {object} args - Arguments that are passed to the function.
+ * @param {array} args.rows - Data that is being filled into all the cells, including this one.
+ * @param {string} args.direction - Direction of the fill operation, which can be 'horizontal' for x axis, 'vertical' for y axis, or 'both' when it goes both ways, e.g., when pasting unevenly.
+ * @param {object} args.newRowData - New row data that is going to replace 'existingRowData'. The result of this function will be kept in this object.
+ * @param {object} args.existingRowData - Existing data of the row. This will be replaced with 'newRowData'.
+ * @param {number} args.rowIndex - Index of the row on the grid.
+ * @param {number} args.rowOffset - Position/offset of 'cells' in 'rows'. Starts with '0'.
+ * @param {array} args.cells - New data for all the cells, including this one, for the current row. This is the same as accessing 'rows' using 'rowOffset'.
+ * @param {boolean} args.reversed - Whether the fill operation is applied in the reverse order, meaning if horizontal, we are going from right to left, and if vertical, we are going from bottom to top.
+ * @param {boolean} args.isFillingRow - Whether the current row is being filled. If the 'direction' is 'vertical', this will always be true, or sometimes true if the 'direction' is 'both'.
+ * @param {number} args.fillingRowPosition - Increase in position since the first filling of the rows. This will be '-1' if 'isFillingRow' is false. Starts with '0'.
+ * @param {number} args.fillingRowLength - Total length that 'fillingRowPosition' will go. This will be '-1' if 'isFillingRow' is false.
+ * @param {object} args.column - Column that this cell is on.
+ * @param {number} args.columnIndex - The index of the column on the grid.
+ * @param {string} args.newCellData - Data from 'cells' to be set for this cell. You can modify this and return the result to set the new data for this cell.
+ * @param {string} args.existingCellData - Existing data on this cell that is about to be replaced with the data you will return.
+ * @param {number} args.columnOffset - Position/offset of the 'newCellData' in 'cells'. Starts with '0'.
+ * @param {boolean} args.isFillingColumn - Whether the current column is being filled. If the 'direction' is 'horizontal', this will always be true, or sometimes true if the 'direction' is 'both'.
+ * @param {number} args.fillingColumnPosition - Increase in position since the first filling of the columns. This will be '-1' if 'isFillingColumn' is false. Starts with '0'.
+ * @param {number} args.fillingColumnLength - Total length that 'fillingColumnPosition' will go. This will be '-1' if 'isFillingColumn' is false.
+ */
 /**
  * Styles for the canvas data grid.  Standard CSS styles still apply but are not listed here.
  * @class
@@ -254,8 +311,8 @@
  * @property {string} [activeCellSelectedBackgroundColor=rgba(236, 243, 255, 1)] - Style of activeCellSelectedBackgroundColor.
  * @property {string} [activeCellSelectedColor=rgba(0, 0, 0, 1)] - Style of activeCellSelectedColor.
  * @property {string} [activeCellVerticalAlignment=center] - Style of activeCellVerticalAlignment.
- * @property {string} [activeHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeHeaderCellBackgroundColor.
- * @property {string} [activeHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeHeaderCellColor.
+ * @property {string} [activeColumnHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeColumnHeaderCellBackgroundColor.
+ * @property {string} [activeColumnHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeColumnHeaderCellColor.
  * @property {string} [activeRowHeaderCellBackgroundColor=rgba(225, 225, 225, 1)] - Style of activeRowHeaderCellBackgroundColor.
  * @property {string} [activeRowHeaderCellColor=rgba(0, 0, 0, 1)] - Style of activeRowHeaderCellColor.
  * @property {number} [autocompleteBottomMargin=60] - Style of autocompleteBottomMargin.
@@ -289,6 +346,7 @@
  * @property {number} [childContextMenuMarginTop=0] - Style of childContextMenuMarginTop.
  * @property {string} [childContextMenuArrowHTML=►] - Style of childContextMenuArrowHTML.
  * @property {string} [childContextMenuArrowColor=rgba(43, 48, 43, 1)] - Style of childContextMenuArrowColor.
+ * @property {number} [columnGroupRowHeight=25] - Style of columnGroupRowHeight.
  * @property {string} [contextMenuChildArrowFontSize=12px] - Style of contextMenuChildArrowFontSize.
  * @property {number} [cellWidth=250] - Style of cellWidth.
  * @property {string} [contextMenuBackground=rgba(240, 240, 240, 1)] - Style of contextMenuBackground.
@@ -340,12 +398,19 @@
  * @property {string} [editCellColor=black] - Style of editCellColor.
  * @property {string} [editCellBackgroundColor=white] - Style of editCellBackgroundColor.
  * @property {number} [editCellZIndex=10000] - Style of editCellZIndex.
+ * @property {string} [fillOverlayBorderColor=rgba(127, 127, 127, 1)] - Style of fillOverlayBorderColor.
+ * @property {number} [fillOverlayBorderWidth=2] - Style of fillOverlayBorderWidth.
  * @property {string} [gridBackgroundColor=rgba(240, 240, 240, 1)] - Style of gridBackgroundColor.
  * @property {string} [gridBorderColor=rgba(202, 202, 202, 1)] - Style of gridBorderColor.
  * @property {number} [gridBorderWidth=1] - Style of gridBorderWidth.
- * @property {string} [columnHeaderCellCapBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
- * @property {string} [columnHeaderCellCapBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
- * @property {number} [columnHeaderCellCapBorderWidth=1] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [groupIndicatorColor=rgba(155, 155, 155, 1)'] - Foreground color of the group indicator(icon).
+ * @property {string} [groupIndicatorBackgroundColor=rgba(255, 255, 255, 1)'] - Background color of the group indicator(icon).
+ * @property {string} [columnHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [columnHeaderCellBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellBackgroundColor.
+ * @property {number} [columnHeaderCellBorderWidth=1] - Style of columnHeaderCellBackgroundColor.
+ * @property {string} [columnHeaderCellCapBackgroundColor=rgba(240, 240, 240, 1)] - Style of columnHeaderCellCapBackgroundColor.
+ * @property {string} [columnHeaderCellCapBorderColor=rgba(172, 172, 172, 1)] - Style of columnHeaderCellCapBackgroundColor.
+ * @property {number} [columnHeaderCellCapBorderWidth=1] - Style of columnHeaderCellCapBackgroundColor.
  * @property {string} [columnHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of columnHeaderCellBorderColor.
  * @property {number} [columnHeaderCellBorderWidth=0.25] - Style of columnHeaderCellBorderWidth.
  * @property {string} [columnHeaderCellColor=rgba(50, 50, 50, 1)] - Style of columnHeaderCellColor.
@@ -369,6 +434,7 @@
  * @property {number} [columnHeaderOrderByArrowWidth=13] - Style of columnHeaderOrderByArrowWidth.
  * @property {number} [rowHeaderCellWidth=57] - Style of rowHeaderCellWidth.
  * @property {number} [minColumnWidth=45] - Style of minColumnWidth.
+ * @property {(number|string)} [height=auto] - Style of height.
  * @property {number} [minHeight=24] - Style of minHeight.
  * @property {number} [minRowHeight=24] - Style of minRowHeight.
  * @property {string} [name=default] - Style of name.
@@ -377,6 +443,9 @@
  * @property {number} [reorderMarkerBorderWidth=1.25] - Style of reorderMarkerBorderWidth.
  * @property {string} [reorderMarkerIndexBorderColor=rgba(66, 133, 244, 1)] - Style of reorderMarkerIndexBorderColor.
  * @property {number} [reorderMarkerIndexBorderWidth=2.75] - Style of reorderMarkerIndexBorderWidth.
+ * @property {string} [resizeMarkerColor=rgba(0, 0, 0, 0.2)] - Style of resizeMarkerColor.
+ * @property {number} [resizeMarkerSize=2] - Style of resizeMarkerSize.
+ * @property {number} [rowGroupColumnWidth=25] - Style of rowGroupColumnWidth.
  * @property {string} [rowHeaderCellBackgroundColor=rgba(240, 240, 240, 1)] - Style of rowHeaderCellBackgroundColor.
  * @property {string} [rowHeaderCellBorderColor=rgba(152, 152, 152, 1)] - Style of rowHeaderCellBorderColor.
  * @property {number} [rowHeaderCellBorderWidth=0.25] - Style of rowHeaderCellBorderWidth.
@@ -390,6 +459,8 @@
  * @property {number} [rowHeaderCellPaddingLeft=5] - Style of rowHeaderCellPaddingLeft.
  * @property {number} [rowHeaderCellPaddingRight=5] - Style of rowHeaderCellPaddingRight.
  * @property {number} [rowHeaderCellPaddingTop=5] - Style of rowHeaderCellPaddingTop.
+ * @property {number} [rowHeaderCellRowNumberGapHeight=5] - Style of rowHeaderCellRowNumberGapHeight.
+ * @property {number} [rowHeaderCellRowNumberGapColor=rgba(50, 50, 50, 1)] - Style of rowHeaderCellRowNumberGapColor.
  * @property {string} [rowHeaderCellSelectedBackgroundColor=rgba(217, 217, 217, 1)] - Style of rowHeaderCellSelectedBackgroundColor.
  * @property {string} [rowHeaderCellSelectedColor=rgba(50, 50, 50, 1)] - Style of rowHeaderCellSelectedColor.
  * @property {string} [rowHeaderCellVerticalAlignment=center] - Style of rowHeaderCellVerticalAlignment.
@@ -433,10 +504,18 @@
  * @property {number} [frozenMarkerWidth=1] - Style of frozenMarkerWidth.
  * @property {string} [overflowY=auto] - When set to hidden, vertical scroll bar will be hidden.  When set to auto vertical scroll bar will appear when data overflows the height.  When set to scroll the vertical scrollbar will always be visible.
  * @property {string} [overflowX=auto] - When set to hidden, horizontal scroll bar will be hidden.  When set to auto horizontal scroll bar will appear when data overflows the width.  When set to scroll the horizontal scrollbar will always be visible.
+ * @property {(number|string)} [width=auto] - Style of width.
 
  ['', 'normal'],
  */
 // event docs go here
+/**
+ * Fires when the active cell changes, e.g. by clicking a cell or moving with the keyboard.
+ * @event
+ * @name canvasDatagrid#activecellchanged
+ * @param {object} e Event object.
+ * @param {object} e.cell The new active cell as `{rowIndex, columnIndex}`.
+ */
 /**
  * Fires when the selection changes.
  * @event
@@ -446,6 +525,16 @@
  * @param {object} e.selectedData Selected data.
  * @param {array} e.selections Selections object. 2D matrix of selections.
  * @param {rectangle} e.selectionBounds rectangle object describing the selection bounds.
+ * @param {object} e.boundRowIndexMap Mapping of view data row to bound data row index.
+ * @param {object} e.boundColumnIndexMap Mapping of view column order to bound column order.
+ */
+/**
+ * Fires when the selected is deleted by pressing backspace or delete key.
+ * @event
+ * @name canvasDatagrid#afterdelete
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {array} e.cells Cells affected by the delete action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex].
  */
 /**
  * Fires when the user clicks on the "drill in" arrow.  When the arrow is clicked a new
@@ -480,12 +569,17 @@
  * @param {number} e.left The new scroll left.
  */
 /**
- * Fires when the data setter is set.
+ * Fires when the data changes: when the data setter is set and after every
+ * user or API mutation of the underlying data.
  * @event
  * @name canvasDatagrid#datachanged
  * @param {object} e Event object.
  * @param {object} e.ctx Canvas context.
- * @param {object} e.data Data.
+ * @param {object} e.data The bound (unfiltered, unsorted) data.
+ * @param {string} e.source What changed the data. One of `data` (the setter), `edit`, `paste`, `cut`, `delete`, `fill`, `addrow`, `insertrow`, `deleterow`, `addcolumn`, `insertcolumn`, `deletecolumn`.
+ * @param {array} [e.cells] For `paste`, `cut` and `delete`: the affected cells as `[rowIndex, columnIndex, boundRowIndex, boundColumnIndex(, value)]` tuples.
+ * @param {object} [e.cell] For `edit`: the edited cell.
+ * @param {*} [e.value] For `edit`: the new value.
  */
 /**
  * Fires when the schema setter is set.
@@ -539,7 +633,7 @@
  * @name canvasDatagrid#afterpaste
  * @param {object} e Event object
  * @param {object} e.ctx Canvas context.
- * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex].
+ * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex, value], where `value` is the pasted value.
  */
 /**
  * Fired just before a cell is drawn onto the canvas.  `e.preventDefault();` prevents the cell from being drawn.
@@ -934,6 +1028,22 @@
  * @param {object} e.ctx Canvas context.
  * @param {canvasDatagrid.cell} e.cell The cell being moved out of.
  */
+/**
+ * Fires column(s) are being hidden
+ * @event
+ * @name canvasDatagrid#columnhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being hidden.
+ */
+/**
+ * Fires column(s) are being unhidden
+ * @event
+ * @name canvasDatagrid#columnunhide
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {columnIndex} e.columnIndex Index of column being unhidden.
+ */
 /**
  * Fires when the mouse enters a row.
  * @event