[DevExtreme] Customize cells

customize the value and text

 

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Price"
            :customize-text="priceColumn_customizeText"
        />
    </DxDataGrid>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';
 
export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    methods: {
        priceColumn_customizeText(cellInfo) {
            return cellInfo.value + '$';
        }
    }
}
</script>

 

<template>
    <DxDataGrid ... >
        <DxColumn
            caption="Full Name"
            :calculate-cell-value="fullNameColumn_calculateCellValue"
        />
    </DxDataGrid>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';
 
export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    methods: {
        fullNameColumn_calculateCellValue(rowData) {
            return rowData.firstName + ' ' + rowData.lastName;
        }
    }
}
</script>

---

Customize the Appearance

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Title"
            cell-template="grid-cell"
        />
        <template #grid-cell="{ data }">
            <div style="color:blue">{{ data.text }}</div>
        </template>
    </DxDataGrid>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';
 
export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    // ...
}
</script>

 

• https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/#Customize_the_Value_and_Text 

Customize Cells: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress

 

---

실무 적용

  <DxDataGrid
    id="mainTable"
    :data-source="table.data"
    :on-initialized="initGrid"
    :selection="{ mode: 'multiple', showCheckBoxesMode: 'none' }"
    :show-row-lines="true"
    :show-borders="true"
    :column-auto-width="true"
    :pager="{ visible: false }"
    :paging="{ pageSize: 100 }"
    key-expr="userId"
    class="ow-de-grid"
    :onCellPrepared="onCellPrepared"
  >
    <DxScrolling row-rendering-mode="virtual" />
    <DxPaging :page-size="10" />
    <DxColumn caption="주소" :width="200" alignment="left" :calculate-cell-value="roadAddress" />
  </DxDataGrid>

const roadAddress = (rowData) => {
  	return rowData.roadAddr1 + rowData.roadAddr2;
};