DxGrid Reference
The DxGrid is a root container component designed to process and display data specified via the rows
property. You can configure columns using the columns
property. The Grid’s functionality (data visualization and data processing) is implemented in several plugins specified as child components. See the plugins concept for details.
Import
Use the following statement to import a plugin with embedded theme components:
import { DxGrid } from '@devexpress/dx-vue-grid-bootstrap4';
If you want to use custom components, you can import the themeless plugin:
import { DxGrid } from '@devexpress/dx-vue-grid';
User reference
Properties
Name |
Type |
Default |
Description |
rows |
Array<any> |
|
An array containing custom data. A user defines the access to this data. Refer to Data Accessors for details. |
columns |
Array<Column> |
|
Specifies for which row fields columns are created. |
getRowId? |
(row: any) => number | string |
|
Specifies the function used to get a unique row identifier. |
getCellValue? |
(row: any, columnName: string) => any |
|
Specifies the function used to get a cell’s value. |
rootComponent |
DxGrid.DxRoot |
|
A component that renders the grid root layout. |
Interfaces
Column
Defines the column configuration object. Used to display data stored in a row.
Field |
Type |
Description |
name |
string |
Specifies the column name or the name of a row field whose value the column displays. If the column name does not match any field name, specify the getCellValue function. |
title? |
string |
Specifies the column title. |
getCellValue? |
(row: any, columnName: string) => any |
Specifies the function used to get the column value for a given row. |
Component Types
DxGrid.DxRoot
Slots
Field |
Description |
default |
The default Vue slot. |
Plugin Components
Name |
Type |
Description |
DxGrid.components.DxRoot |
DxGrid.DxRoot |
A component that renders the grid root layout. |
Plugin Developer Reference
Exports
Name |
Plugin |
Type |
Description |
rows |
Getter |
Array<any> |
Grid rows. |
getRowId |
Getter |
(row: any) => number | string |
A function used to get a unique row identifier. |
columns |
Getter |
Array<Column> |
Grid columns. |
getCellValue |
Getter |
(row: any, columnName: string) => any |
A function used to get a given row’s column value. |
root |
Template |
object? |
A template that renders the grid root layout. |
header |
Template |
object? |
A template that renders the grid header. |
body |
Template |
object? |
A template that renders the grid body. |
footer |
Template |
object? |
A template that renders the grid footer. |