Common Types
Name | Description |
---|---|
A column description. Passed to the | |
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:
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 |
overlayIcon | An icon which is painted on top offset bottom right of the |
hasMenu | Enables/disables the menu dropdown indicator. If not enabled, |
style | Makes the column use the highlighted theming from the |
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 |
trailingRowOptions | Overrides the |
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. |
Loading | 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
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 |
themeOverride | A partial theme override to use when drawing this cell. |
span | If set the |
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.
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 |
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. |
baseFontStyle | string | --gdg-base-font-style | The font style used for cells by default, e.g. |
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. |
Last updated