Glide Data Grid 3.0

3.0.0 Release Notes

This is a breaking release for the Glide Data Grid. Please be careful if you choose to upgrade.

New Features / Improvements

Uneven Rows

Uneven rows can be created by passing a callback to the rowHeight property. This callback takes the row as an input and returns a number as the output. Currently uneven rows can negatively impact performance for very large lists as there is no internal caching mechanism for this.

Better row marker selection support

rowMarkers is no longer a boolean and now can be configured to be none, checkbox, number, or both. In addition Row Markers now have significantly improved handling for Ctrl/Command, Shift clicking, and Ctrl/Command+Shift clicking. It's behavior now closely resembles how most operating systems handle these operations.

Better image handling

Images will now cancel requests when they fall out of the rendering area. This means that when scrolling rapidly through grids with large numbers of images they will no longer form a long queue which must be processed prior to downloading the displayed images.

Trailing row options

There is a new prop trailingRowOptions which can be used to theme the trailing row if onRowAppended is set.

readonly trailingRowOptions?: {
        readonly tint?: boolean;
        readonly hint?: string;
        readonly sticky?: boolean;
};

Simple animations

Data Grid now supports some simple animations. These are used for the trailing row, row markers, and boolean cells. As we continue to develop the Data Grid we will add more animations where they make sense.

Speed improvements

Data Grid 3.0 supports much larger numbers of columns and rows without experiencing major slowdowns. Provided the getCellContent callback is sufficiently fast, Data Grid can easily support over 10 million cells, 100k columns, and 1 million rows. Currently the number of rows is largely constrained by the max scrollable region support by browsers, which tends to be 33,554,400 pixels. In the future we will be investigating ways to extend beyond this limit.

Breaking changes

Theme support reworked

The theme for DataEditor has been flattened to make creating custom themes simpler and more intuitive. The new base theme is:

const dataEditorBaseTheme = {
    accentColor: "#4F5DFF",
    accentMedium: "rgba(79,118,255,0.5)",
    accentLight: "rgba(79, 93, 255, 0.1)",

    textDark: "#313139",
    textMedium: "#737383",
    textLight: "#B2B2C0",
    textHeader: "#737383",
    textHeaderSelected: "#FFFFFF",
    textBubble: "#313139",

    bgCell: "#FFFFFF",
    bgCellMedium: "#FAFAFB",
    bgHeader: "#EDEDF3",
    bgHeaderHasFocus: "#D8D8E3",

    bgBubble: "#EDEDF3",
    bgBubbleSelected: "#FFFFFF",

    bgSearchResult: "#fff9e3",

    borderColor: "rgba(45,45,45,0.16)",
    borderDark: "rgba(0, 0, 0, 0)",

    linkColor: "#4F5DFF",

    headerFontStyle: "bold 14px",
    baseFontStyle: "13px",
    fontFamily:
        "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
};

Trailing row off by default

Trailing rows must be explicitly requested. Trailing rows are added automatically when onRowAppended is set. The showTrailingBlankRow prop has been removed.

Removed allowResize prop

Resizing is controlled by passing a callback to onColumnResized or not. This prop was redundant and its removal simplifies the API.

Removed cellXOffset and cellYOffset props

These never did anything positive if not set to the correct values. The Data Grid now always sets these to the correct values.

Trailing row handling

When clicking on the first column in a trailing row if the trailingRowOptions.hint is set a blank row will automatically be created and onRowAppended called.

onRowAppended no longer has props

The Data grid always assumes you wish to add a completely blank row and enters the edit state for the newly added cell.