DevExtreme Vue Data Grid is a a client-side grid component that includes all the features needed for use in a modern business application: powerful data binding, editing, and validation capabilities, versatile searching and filtering, flexible layout, and many more. You can use Vue syntax and techniques to instantiate and configure the Data Grid or handle its events. In addition, the Data Grid supports
prop validation
and templates that use
named slots
.
Find out more about DevExtreme Vue components
.
To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions:
Getting Started with DataGrid
.
Feel free to share demo-related thoughts here.
If you have technical questions, please
create a support ticket
in the DevExpress Support Center.
Thank you for the feedback!
<DxPaging :page-size="10"/>
<template #discountCellTemplate="{ data: cellData }">
<DiscountCell :cell-data="cellData"/>
</template>
</DxDataGrid>
</template>
<script setup lang="ts">
import {
DxDataGrid,
DxColumn,
DxGrouping,
DxGroupPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxDataGridTypes,
} from 'devextreme-vue/data-grid';
import DataSource from 'devextreme/data/data_source';
import 'devextreme/data/odata/store';
import DiscountCell from './DiscountCell.vue';
const dataSource = new DataSource({
store: {
type: 'odata',
version: 2,
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
key: 'Id',
beforeSend(request) {
const year = new Date().getFullYear() - 1;
request.params.startDate = `${year}-05-10`;
request.params.endDate = `${year}-5-15`;
const pageSizes = [10, 25, 50, 100];
let collapsed = false;
const onContentReady = (e: DxDataGridTypes.ContentReadyEvent) => {
if (!collapsed) {
e.component.expandRow(['EnviroCare']);
collapsed = true;
</script>
