Common Types
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:
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.
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
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.
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.
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.
Last updated