Data Grid
A web component for data grids with typed columns, sorting, selection, pagination, row details and inline editing.
A table that shows an array of objects as rows, with selection, sorting, pagination, details, editing and CSV export.
The grid is as tall as its rows, and scrolls them within a height, a max-height or a share of a container of a definite size.
Installation
npm install @3mo/data-grid
import '@3mo/data-grid'
Usage
<mo-data-grid .data=${twentyPeople} editability='never'>
<mo-data-grid-column-image heading='Avatar' dataSelector='avatar' tooltipSelector='name'></mo-data-grid-column-image>
<mo-data-grid-column-text heading='Name' dataSelector='name'></mo-data-grid-column-text>
<mo-data-grid-column-number heading='Age' dataSelector='age'></mo-data-grid-column-number>
<mo-data-grid-column-text heading='Address' dataSelector='address'></mo-data-grid-column-text>
<mo-data-grid-column-date heading='Birth Date' dataSelector='birthDate'></mo-data-grid-column-date>
</mo-data-grid>
Examples
- Bound Columns —
DataGridColumnBinder.for(Person).bind(keyPath) takes a column's data selector from the key path, its heading from @label and its description from @description.
- Sticky Columns —
sticky pins a column to the start, to the end or to both while the others scroll by; the selection and menu columns stick as well.
- Custom Cell Style —
contentStyle styles a cell by its value: negative balances in red, positive ones in green.
- Column Menu Items — A column element of your own adds items to the menu under its heading - click the heading of the colored Address column.
- Sums —
sumHeading totals a number column in the footer, over the selected rows while there are any; the sum slot takes totals of your own.
- Selection —
isDataSelectable decides which rows can be selected, here only adults.
- Details —
getRowDetailsTemplate renders what a row opens into, and hasDataDetail decides which rows have details, here only adults.
- Sub Data Grid — The details can hold any template, such as a grid of the row's children.
- Sub Rows —
subDataGridDataSelector names the key path of a row's children, which open as sub rows under the same columns, level by level.
- Editing — Here every editable cell edits at once, and
nonEditable takes a predicate that keeps the ages over 30 read-only.
- Sorting —
sorting sets the order to start with, by name and then by age; the arrow of a heading sorts by its column, and Shift+click adds it to the order.
- Reordering —
reorderability adds a grip to drag rows by, and each drop fires reorder, which the Actions panel logs.
- Filters — Elements in the
filter slot open with the toolbar's filter button; they continue its row while they fit and wrap into rows of their own otherwise.
- Primary Action — The
primary-action slot places an element at the very end of the toolbar, after its icon buttons.
- Primary Action With Split Button — Composite actions fit the slot as well, such as a split button with more options.
- Context Menu —
getRowContextMenuTemplate gives each row a menu, opened by a right click or its ⋮ button; primaryContextMenuItemOnDoubleClick runs the bold item on a double click.
- Virtualization — A thousand rows on one page: scroll through them, select them all or export them.
- Virtualized Sub Rows — 25 rows open into 40 sub rows each, like a products page with every variant expanded through
detailsOpen; scroll through it and watch the scrollbar hold still.
- Constrained Height — A
height, a max-height or a share of a flex or grid container of a definite size gives the grid a height, which it takes and scrolls its rows in.
- Export —
exportable adds a button to the footer that downloads the rows as CSV, sub rows included.
- Empty State — Without data, the grid shows an empty state, which the
error-no-content slot replaces.
- In A Card — In a
mo-card, the grid spans the card's full width under its heading.
- Custom Data Grid — Arrow keys move between cells, Space selects, Enter or a double click edits and Ctrl+C copies; a heading sorts when clicked, moves when dragged and resizes by its edge.
Accessibility
A grid, or a treegrid with sub rows, with aria-multiselectable while multiple. The header is a row of columnheaders,
where the column sorted first says aria-sort='ascending' or 'descending' and every other sortable one 'none'. Rows are
rows with aria-level, aria-setsize and aria-posinset, aria-selected while rows can be selected and aria-expanded
where they have details or sub rows; cells are gridcells.
One cell is in the tab order and takes real focus. The column headers are not part of the arrow navigation; their buttons are
ordinary tab stops.
| Key | Does |
|---|
| The arrows | The cell in that direction, wrapping at the edges. |
Home End | The first or last cell of the row. |
Ctrl Home / End | The first cell of the grid, or the last. |
PageUp PageDown | A page of rows up or down. |
Enter | Edits an editable cell; otherwise clicks it, which selects the row with selectOnClick and opens its details with detailsOnClick. |
Enter Escape | While editing: ends it and returns to the cell; Enter commits, except in a text area. |
Ctrl or ⌘ C | Copies the cell's text. |
With selectOnClick, moving to a cell selects its row, and Shift extends the selection. Where it differs from the ARIA
practices: the arrows wrap, Space does not select a row, and in a tree grid ArrowRight and ArrowLeft move between cells
rather than opening and closing rows.
API
mo-data-grid
Properties
| Name | Attribute | Type | Default | Description |
|---|
rows | | DataGridRow<TData, TDetailsElement>[] | | The rendered rows, sub rows included, in the order of their records. |
resolvedPagination | | { readonly strategy: DataGridPaginationStrategy; readonly size: DataGridPaginationSize; } | undefined | | Resolves effective pagination configuration from property, static default, and fallback. |
data | data | TData[] | "new Array<TData>()" | The data to be displayed in the DataGrid. It is an array of objects, where each object represents a row. |
columns | columns | DataGridColumn<TData, any>[] | | The columns of the DataGrid, composed of their definitions and modifications. Assigning it gives the definitions in code, which column elements override. |
headerHidden | headerHidden | boolean | false | Whether the header should be hidden. |
page | page | number | 1 | The current page. |
pagination | pagination | DataGridPagination | undefined | | How the rows are paged: a strategy, pages or scroll, and a size, a number or auto, e.g. pages, pages 50 or 50. auto pages as many rows as fit the grid's height, or |
sorting | sorting | DataGridSorting<TData> | undefined | | The sorting mode. It is an object with selector and strategy properties. |
selectability | selectability | Selectability | undefined | | The selection mode. Defaults to 'single' if context menus available, 'undefined' otherwise. |
isDataSelectable | isDataSelectable | ((data: TData) => boolean) | undefined | | Whether data of a given row is selectable. |
selectedData | selectedData | TData[] | "new Array<TData>()" | The selected data. |
selectOnClick | selectOnClick | boolean | false | Whether the row should be selected on click. |
selectionBehaviorOnDataChange | selectionBehaviorOnDataChange | SelectabilityBehaviorOnItemsChange | "reset" | The behavior of the selection when the data changes. |
reorderability | reorderability | boolean | undefined | | Whether rows can be dragged into another order, which works while nothing is sorted and no row has details or sub rows. |
multipleDetails | multipleDetails | boolean | false | Whether multiple details can be opened at the same time. |
detailsOpen | detailsOpen | boolean | false | Opens the details of rows as they arrive, until it is turned off. The user may still close them. Requires "multipleDetails". |
subDataGridDataSelector | subDataGridDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The key path of the sub data grid data. |
hasDataDetail | hasDataDetail | ((data: TData) => boolean) | undefined | | Whether the data has a detail. |
detailsOnClick | detailsOnClick | boolean | false | Whether the details should be opened on click. |
primaryContextMenuItemOnDoubleClick | primaryContextMenuItemOnDoubleClick | boolean | false | Whether a double or middle click on a row clicks the mo-data-grid-primary-context-menu-item of its context menu. |
editability | editability | DataGridEditability | "never" | The editability mode. |
getRowDetailsTemplate | getRowDetailsTemplate | ((data: TData) => HTMLTemplateResult) | undefined | | A function which returns a template for the details of a given row. |
getRowContextMenuTemplate | getRowContextMenuTemplate | ((data: TData[]) => HTMLTemplateResult) | undefined | | A function which returns a template for the context menu of a given row. |
filtersOpen | filtersOpen | boolean | false | Whether the elements of the filter slot are shown. The filter button of the toolbar toggles it. |
hasAlternatingBackground | hasAlternatingBackground | boolean | | Whether the rows should have alternating background. |
cellFontSize | cellFontSize | number | "value" | The font size of the cells in rem, between 0.8 and 1.2. Defaults to DataGrid.cellRelativeFontSize, 0.8. |
rowHeight | rowHeight | number | "DataGrid.rowHeight.value" | The height of the rows in pixels, between 30 and 60. Defaults to DataGrid.rowHeight, 35. |
exportable | exportable | boolean | false | Whether the DataGrid is exportable. This will show an export button in the footer. |
Events
| Name | Detail |
|---|
dataChange | TData[] |
selectionChange | TData[] |
pageChange | number |
paginationChange | DataGridPagination | undefined |
columnsChange | DataGridColumn<TData, any>[] |
sortingChange | DataGridRankedSortDefinition<TData>[] |
reorder | DataGridReorderChange<TData>[] |
rowDetailsOpen | DataGridRow<TData, TDetailsElement> |
rowDetailsClose | DataGridRow<TData, TDetailsElement> |
rowClick | DataGridRow<TData, TDetailsElement> |
rowDoubleClick | DataGridRow<TData, TDetailsElement> |
rowMiddleClick | DataGridRow<TData, TDetailsElement> |
cellEdit | DataGridCell<any, TData, TDetailsElement> |
Slots
| Name | Description |
|---|
column | The column elements, which assign themselves to it when placed in the grid. It is hidden. |
toolbar | The horizontal bar above DataGrid's contents. |
toolbar-action | A slot for action icon-buttons in the toolbar which are displayed on the end. |
filter | Elements which filter DataGrid's data. When expanded, they continue the toolbar's row if they all fit into its remaining space, otherwise they wrap into rows of their own. It is toggled through an icon-button in the toolbar. |
sum | A horizontal bar in the DataGrid's footer for showing sums. Calculated sums are also placed here by default. |
primary-action | A slot at the very end of the toolbar expecting primary action elements (e.g. an "add" button) to be placed in. Slotted elements replace the slot's default content, but complement primary actions generated outside of it e.g. EntityDataGrid's create button, which is suppressed via "primaryActionHidden" instead. |
error-no-content | A slot for displaying an error message when no data is available. |
CSS custom properties
| Name | Description |
|---|
--mo-data-grid-footer-background | The background of the footer. |
--mo-data-grid-cell-padding | The inline padding of the cells. Defaults to 0.5rem. |
--mo-data-grid-column-sub-row-indentation | The indentation of the first column in the sub row. Defaults to 20px. |
mo-data-grid-cell
Properties
| Name | Attribute | Type | Default |
|---|
value | value | TValue | |
column | column | DataGridColumn<TData, TValue> | |
row | row | DataGridRow<TData, TDetailsElement> | |
mo-data-grid-column-header
Properties
| Name | Attribute | Type | Default | Description |
|---|
column | column | DataGridColumn<unknown, any> | | |
menuOpen | menuOpen | boolean | false | |
template | | HTMLTemplateResult | | The template rendered into renderRoot. Invoked on each update to perform rendering tasks. |
Properties
| Name | Attribute | Type | Default |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | |
page | page | number | 1 |
Properties
| Name | Attribute | Type | Default |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | |
overlayOpen | overlayOpen | boolean | false |
The handle resizing a column, drawing a line where the pointer is while it drags.
Properties
| Name | Attribute | Type | Default |
|---|
column | column | DataGridColumn<unknown, any> | |
Properties
| Name | Attribute | Type | Default | Description |
|---|
open | open | boolean | false | Whether the submenu is open. |
disabled | disabled | boolean | false | Whether the list item is disabled |
icon | icon | MaterialIcon | undefined | | Icon to be displayed in the list item |
preventClickOnSpace | preventClickOnSpace | boolean | false | Whether the list item should prevent click on space |
Slots
| Name | Description |
|---|
submenu | The items of the submenu. |
| (default) | Default slot for content |
CSS parts
| Name | Description |
|---|
icon | The icon before the content. |
mo-data-grid-column-boolean
A column showing a boolean as a dot, colored for true and for false, and nothing for undefined.
Properties
| Name | Attribute | Type | Default | Description |
|---|
trueColor | trueColor | string | "var(--mo-color-green)" | The color of the dot for true values |
falseColor | falseColor | string | "var(--mo-color-red)" | The color of the dot for false values |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "center" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column
Properties
| Name | Attribute | Type | Default | Description |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-deletion
Properties
| Name | Attribute | Type | Default | Description |
|---|
prevent | prevent | boolean | false | Prevents the deletion button from being displayed |
icon | icon | MaterialIcon | "delete" | The icon to display. Defaults to 'delete' |
tooltip | tooltip | string | undefined | | The tooltip of the buttons |
disabled | disabled | ((data: TData) => boolean) | undefined | | Whether the button of a row is disabled |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | true | Whether the column is sortable |
nonEditable | nonEditable | boolean | true | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
getEditContentTemplate | getEditContentTemplate | (_: unknown, data?: TData | undefined) => HTMLTemplateResult | "getContentTemplate" | The edit content template of the column. |
| getContentTemplate | | | The content template of the column. |
Events
| Name | Detail | Description |
|---|
delete | TData | |
iconClick | TData | Dispatched with the row's data when its button is clicked |
A column with an icon button per row, which stays clickable while the row is edited.
Properties
| Name | Attribute | Type | Default | Description |
|---|
icon | icon | MaterialIcon | | The icon of the buttons |
tooltip | tooltip | string | undefined | | The tooltip of the buttons |
disabled | disabled | ((data: TData) => boolean) | undefined | | Whether the button of a row is disabled |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | true | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
getEditContentTemplate | getEditContentTemplate | (_: unknown, data?: TData | undefined) => HTMLTemplateResult | "getContentTemplate" | The edit content template of the column. |
| getContentTemplate | | | The content template of the column. |
Events
| Name | Detail | Description |
|---|
iconClick | TData | Dispatched with the row's data when its button is clicked |
mo-data-grid-column-image
Properties
| Name | Attribute | Type | Default | Description |
|---|
tooltipSelector | tooltipSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined | | The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument. |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | true | Whether the column is sortable |
nonEditable | nonEditable | boolean | true | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-text
Properties
| Name | Attribute | Type | Default | Description |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-date
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | Options to pass to DateTime.prototype.format() |
precision | precision | FieldDateTimePrecision | "Day" | The precision of the date/time. |
pickerHidden | pickerHidden | boolean | false | Hides the date/time picker |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-date-range
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | Options to pass to DateTime.prototype.format() |
precision | precision | FieldDateTimePrecision | "Day" | The precision of the date/time. |
pickerHidden | pickerHidden | boolean | false | Hides the date/time picker |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-date-time
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | Options to pass to DateTime.prototype.format() |
precision | precision | FieldDateTimePrecision | "Minute" | The precision of the date/time. |
pickerHidden | pickerHidden | boolean | false | Hides the date/time picker |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-date-time-range
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | Options to pass to DateTime.prototype.format() |
precision | precision | FieldDateTimePrecision | "Minute" | The precision of the date/time. |
pickerHidden | pickerHidden | boolean | false | Hides the date/time picker |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-image-preview
A column with a button per row which previews the row's image in a popover.
Its value is the image source unless getSource resolves it, e.g. from a file ID.
Properties
| Name | Attribute | Type | Default | Description |
|---|
getSource | | (value: TValue) => DataGridImagePreviewSource | | Resolves a value to its image source, possibly asynchronously, when its preview opens. |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "start" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | true | Whether the column is sortable |
nonEditable | nonEditable | boolean | true | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-image-preview
Properties
| Name | Attribute | Type | Default | Description |
|---|
value | value | unknown | | The value whose image is previewed, resolved to an image source by getSource. |
getSource | getSource | ((value: unknown) => DataGridImagePreviewSource) | undefined | | Resolves the value to an image source, which is the value itself by default. |
imageHidden | imageHidden | boolean | false | Whether to show only the slotted content without the image. |
Slots
| Name | Description |
|---|
| (default) | Content shown above the image. |
close | An action to close the preview, shown next to the content. |
Properties
| Name | Attribute | Type | Default | Description |
|---|
value | value | unknown | | The value whose image is previewed. |
getSource | getSource | ((value: unknown) => DataGridImagePreviewSource) | undefined | | Resolves the value to an image source. |
Slots
| Name | Description |
|---|
| (default) | Content shown above the image in the preview. |
mo-data-grid-column-currency
Properties
| Name | Attribute | Type | Default | Description |
|---|
currency | currency | Currency | undefined | | The currency of the values. |
currencyDataSelector | currencyDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The key path to the currency of the values. |
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "end" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-number
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "end" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
mo-data-grid-column-percent
Properties
| Name | Attribute | Type | Default | Description |
|---|
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | The width of the column |
hidden | hidden | boolean | false | Whether the column is hidden. The column can be made visible by the user in the settings panel if available. |
heading | heading | string | "" | The heading of the column |
textAlign | textAlign | DataGridColumnAlignment | "end" | The text alignment of the column |
description | description | string | undefined | | The description of the column. It will be displayed as a tooltip on the heading. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | The data selector of the column |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | The data selector of the column |
nonSortable | nonSortable | boolean | false | Whether the column is sortable |
nonEditable | nonEditable | boolean | Predicate<TData> | false | Whether the column is editable |
sticky | sticky | DataGridColumnSticky | undefined | | The sticky position of the column, either 'start', 'end', or 'both' |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | The content style of the column. It can be a string, CSSResult, or a function that returns either based on the cell value and data. |
| getContentTemplate | | | The content template of the column. |
| getEditContentTemplate | | | The edit content template of the column. |
Properties
| Name | Attribute | Type | Default |
|---|
heading | heading | string | "" |
Slots
| Name | Description |
|---|
| (default) | Sum of values |
mo-data-grid-default-row
Properties
| Name | Attribute | Type | Default |
|---|
dataRecord | dataRecord | DataRecord<TData> | |
Events
Links
License
MIT © 3MO GmbH