Common Types

Name

Description

A column description. Passed to the columns property.

The basic interface for defining a cell

The most basic representation of the selected cells in the data grid.

The theme used by the data grid to get all color and font information

GridColumn

Grid columns are the basic horizontal building block of the data grid. At their most basic level a GridColumn is just an object which contains a title and a width or id. Their type looks like:

interface BaseGridColumn {
    readonly title: string;
    readonly group?: string;
    readonly icon?: GridColumnIcon | string;
    readonly overlayIcon?: GridColumnIcon | string;
    readonly hasMenu?: boolean;
    readonly style?: "normal" | "highlight";
    readonly grow?: number;
    readonly themeOverride?: Partial<Theme>;
    readonly trailingRowOptions?: {
        readonly hint?: string;
        readonly addIcon?: string;
        readonly targetColumn?: number | GridColumn;
        readonly themeOverride?: Partial<Theme>;
        readonly disabled?: boolean;
    };
}

interface SizedGridColumn extends BaseGridColumn {
    readonly width: number;
    readonly id?: string;
}

interface AutoGridColumn extends BaseGridColumn {
    readonly id: string;
}

export type GridColumn = SizedGridColumn | AutoGridColumn;

Property

Description

title

The title of the column

group

The name of the group the column belongs to

icon

The icon the column belongs to. The icon must be either one of the predefined icons or an icon passed to the headerIcons prop

overlayIcon

An icon which is painted on top offset bottom right of the icon. Must be a predefined icon or an icon passed to the headerIcons prop

hasMenu

Enables/disables the menu dropdown indicator. If not enabled, onHeaderMenuClick will not be emitted.

style

Makes the column use the highlighted theming from the Theme. themeOverride can be used to perform the same effect.

grow

When set to a number > 0 the column will grow to consume extra available space according to the weight of its grow property.

themeOverride

A Partial<Theme> which can be used to override the theming of the header as well as all cells within the column.

trailingRowOptions

Overrides the DataEditor level prop for trailingRowOptions for this column

GridCell

GridCell is the basic content building block of a data grid. There are many types of cells available out of the box and more available in additional packages.

Cell Kind

Description

Uri

Displays uris. Can be edited.

Text

Displays arbitrary text.

Image

Displays one or more images.

RowID

Designed to show primary keys in data sources.

Number

Displays numbers with formatting options and better editing support.

Bubble

Displays lists of data in little bubbles.

Boolean

Displays a checkbox which can be directly edited if desired.

Useful for when data is loading. Rendering is basically free.

Markdown

Displays markdown when opened.

Drilldown

Similar to a bubble cell, but allows embedding text and images with each cell.

Protected

Displays stars instead of data. Useful for indicating that hidden data is present but unavailable to the user.

Custom

Has no rendering by default and must be provided via a custom renderer

All grid cells support the following properties

interface BaseGridCell {
    readonly allowOverlay: boolean;
    readonly lastUpdated?: number;
    readonly style?: "normal" | "faded";
    readonly themeOverride?: Partial<Theme>;
    readonly span?: readonly [number, number];
    readonly contentAlign?: "left" | "right" | "center";
    readonly cursor?: CSSProperties["cursor"];
}

Property

Description

allowOverlay

Determins if an overlay editor or previewer should be shown when activating this cell.

lastUpdated

If set, the grid will render this cell with a highlighted background which fades out. Uses performance.now() instead of Date.now().

style

If set to faded the cell will draw with a transparent appearance.

themeOverride

A partial theme override to use when drawing this cell.

span

If set the span controls which horizontal span a cell belongs to. Spans are inclusive and must be correctly reported for all cells in the span range.

contentAlign

Changes the default text alignment for the cell.

cursor

An override for the cell cursor when hovered.

GridSelection

GridSelection is the most basic representation of the selected cells, rows, and columns in the data grid. The current property accounts for the selected cell and the range of cells selected as well. It is the selection which is modified by keyboard and mouse interaction when clicking on the cells themselves.

The rows and columns properties both account for the columns or rows which have been explicitly selected by the user. Selecting a range which encompases the entire set of cells within a column/row does not implicitly set it into this part of the collection. This allows for distinguishing between cases when the user wishes to delete all contents of a row/column and delete the row/column itself.

interface GridSelection {
    readonly current?: {
        readonly cell: Item;
        readonly range: Readonly<Rectangle>;
        readonly rangeStack: readonly Readonly<Rectangle>[];
    };
    readonly columns: CompactSelection;
    readonly rows: CompactSelection;
}

The cell is the [col, row] formatted cell which will have the focus ring drawn around it. The range should always include the cell and represents additional cells which can be edited via copy, delete and other events. The range may or may not include partial spans depending on the spanRangeBehavior set.

Theme

The data grid uses the Theme provided to the DataEditer in the theme prop. This is used to style editors as well as the grid itself. The theme interface is flat. The data grid comes with a built in theme which it will use to fill in any missing values.

Property

Type

CSS Variable

Description

accentColor

string

--gdg-accent-color

The primary accent color of the grid. This will show up in focus rings and selected rows/headers.

accentFg

string

--gdg-accent-fg

A foreground color which works well on top of the accent color.

accentLight

string

--gdg-accent-light

A lighter version of the accent color used to hint selection.

textDark

string

--gdg-text-dark

The standard text color.

textMedium

string

--gdg-text-medium

A lighter text color used for non-editable data in some cases.

textLight

string

--gdg-text-light

An even lighter text color

textBubble

string

--gdg-text-bubble

The text color used in bubbles

bgIconHeader

string

--gdg-bg-icon-header

The background color for header icons

fgIconHeader

string

--gdg-fg-icon-header

The foreground color for header icons

textHeader

string

--gdg-text-header

The header text color

textGroupHeader

string | undefined

--gdg-text-group-header

The group header text color, if none provided the textHeader is used instead.

textHeaderSelected

string

--gdg-text-header-selected

The text color used for selected headers

bgCell

string

--gdg-bg-cell

The primary background color of the data grid.

bgCellMedium

string

--gdg-bg-cell-medium

Used for disabled or otherwise off colored cells.

bgHeader

string

--gdg-bg-header

The header background color

bgHeaderHasFocus

string

--gdg-bg-header-has

The header background color when its column contains the selected cell

bgHeaderHovered

string

--gdg-bg-header-hovered

The header background color when it is hovered

bgBubble

string

--gdg-bg-bubble

The background color used in bubbles

bgBubbleSelected

string

--gdg-bg-bubble-selected

The background color used in bubbles when the cell is selected

bgSearchResult

string

--gdg-bg-search-result

The background color used for cells which match the search string

borderColor

string

--gdg-border-color

The color of all vertical borders and horizontal borders if a horizontal override is not provided

horizontalBorderColor

string | undefined

--gdg-horizontal-border-color

The horizontal border color override

drilldownBorder

string

--gdg-drilldown-border

The ring color of a drilldown cell

linkColor

string

--gdg-link-color

What color to render links

cellHorizontalPadding

number

--gdg-cell-horizontal-padding

The internal horizontal padding size of a cell.

cellVerticalPadding

number

--gdg-cell-vertical-padding

The internal vertical padding size of a cell.

headerFontStyle

string

--gdg-header-font-style

The font style of the header. e.g. bold 15px

baseFontStyle

string

--gdg-base-font-style

The font style used for cells by default, e.g. 13px

fontFamily

string

--gdg-font-family

The font family used by the data grid.

editorFontSize

string

--gdg-editor-font-size

The font size used by overlay editors.

lineHeight

number

None

A unitless scaler which defines the height of a line of text relative to the ink size.

PreviousDrilldownCell NextDataEditorRef

Last updated 1 year ago