DevExtreme DataGrid 컬럼 정렬 (vue.js)

개발환경

vue.js 3.2.13

 

DevExtreme DataGrid 컬럼 정렬

 

기능 

1. 컬럼 정렬(center, left, right)

2.header에 icon 추가

3.데이터 컬럼 값 합치기(employee) calculate-cell-value

 

 

 

 

헤더 가운데 하기 위해서 :allow-sorting="false" 필수

스타일도 별도로 추가 해야됨
.dx-header-row > td > .dx-datagrid-text-content {
  white-space: normal;
  vertical-align: top;
  text-align: center;
}

 

컬럼에 아이콘도 넣을 수 있음. 

 

 

 

 

코드

 

<template>

    <div >

        <DxDataGrid

            id="gridContainer"

            :data-source="dataList"

            :allow-column-reordering="true"

            :allow-column-resizing="true"

            :column-auto-width="false"

            :show-borders="false"

            :row-alternation-enabled="true"

            key-expr="ID"

            ref="grid"

            >

            <DxColumnChooser :enabled="true"/><!-- 컬럼 감추기, 선택해서 보이게 우상단에 아이콘 하나 생김 -->

            <DxColumnFixing :enabled="true"/> <!--행고정시 다음 옵션 필수   :column-auto-width="false"  :fixed="true"  --->

            <!-- <DxScrolling mode="infinite"/> -->

            <DxColumn caption="Employee" :width="230" :fixed="true"  :calculate-cell-value="calculateCellValue"   /><!-- calculate-cell-value으로 컬럼의 내용을 합침  --->

            <DxColumn data-field="BirthDate" caption="생일" :width="100" data-type="date" :allow-sorting="false" header-cell-template="title-header" />

            <DxColumn data-field="HireDate" caption="고용일" :width="100" data-type="date" :allow-sorting="false" />

            <DxColumn data-field="Position" caption="지위" :width="100" alignment="right" :allow-sorting="false" />

            <DxColumn data-field="Address" caption="주소" :width="100" :allow-sorting="false" header-cell-template="address-header" />

            <DxColumn data-field="City" caption="도시" :width="100" :allow-sorting="false"/>

            <DxColumn data-field="State" caption="구" :width="100" :allow-sorting="false"/>

            <DxColumn data-field="Zipcode" caption="우편번호" :width="100" :allow-sorting="false" :visible="false" />

            <DxColumn data-field="HomePhone" caption="자택전화" :width="100" :allow-sorting="false" />

            <DxColumn data-field="MobilePhone" caption="휴대폰" :width="100" :allow-sorting="false" />

            <DxColumn data-field="Skype" caption="스카이프" :width="100" :allow-sorting="false" />

            <DxColumn data-field="Email" caption="메일" :width="100" :allow-sorting="false" />

            <template #title-header>

                <img src="../../images/ico_airmap_b.svg" />

            </template>

            <template #address-header>

                <i style="color: black; text-align: center;">Mailing Address</i>

            </template>

        </DxDataGrid>

    </div>

<pre>

</pre>

</template>

<script>

    import {

        DxDataGrid,

        DxColumn,

        DxColumnChooser,

        DxColumnFixing,

        //DxScrolling

    } from 'devextreme-vue/data-grid';

    export default {

        name: 'DataGrid01'

        , components: {

            DxDataGrid

            , DxColumn

            , DxColumnChooser

            , DxColumnFixing

            //, DxScrolling

        }

        , data() {

            return {

                dataList: undefined

            }

        }

        , mounted() {

            this.init()

        }

        , methods: {

            init(){

                 //데이터 주석처리시 '데이터 없습니다.'표시

                this.dataList = this.dataInit()

            }

            ,calculateCellValue(data) {

                return [data.Title, data.FirstName, data.LastName].join(' ');//Employee column 합치기

            }

            , dataInit(){

                return [{

                        'ID': 1,

                        'FirstName': 'John',

                        'LastName': 'Heart',

                        'Position': 'CEO',

                        'BirthDate': '1964/03/16',

                        'HireDate': '1995/01/15',

                        'Title': 'Mr.',

                        'Address': '351 S Hill St.',

                        'City': 'Los Angeles',

                        'State': 'California',

                        'Zipcode': 90013,

                        'Email': 'jheart@dx-email.com',

                        'Skype': 'jheartDXskype',

                        'HomePhone': '(213) 555-9208',

                        'DepartmentID': 6,

                        'MobilePhone': '(213) 555-9392'

                        }, {

                        'ID': 2,

                        'FirstName': 'Olivia',

                        'LastName': 'Peyton',

                        'Position': 'Sales Assistant',

                        'BirthDate': '1981/06/03',

                        'HireDate': '2012/05/14',

                        'Title': 'Mrs.',

                        'Address': '807 W Paseo Del Mar',

                        'City': 'Los Angeles',

                        'State': 'California',

                        'Zipcode': 90036,

                        'Email': 'oliviap@dx-email.com',

                        'Skype': 'oliviapDXskype',

                        'HomePhone': '(310) 555-2728',

                        'DepartmentID': 5,

                        'MobilePhone': '(818) 555-2387'

                        }, {

                        'ID': 3,

                        'FirstName': 'Robert',

                        'LastName': 'Reagan',

                        'Position': 'CMO',

                        'BirthDate': '1974/09/07',

                        'HireDate': '2002/11/08',

                        'Title': 'Mr.',

                        'Address': '4 Westmoreland Pl.',

                        'City': 'Bentonville',

                        'State': 'Arkansas',

                        'Zipcode': 91103,

                        'Email': 'robertr@dx-email.com',

                        'Skype': 'robertrDXskype',

                        'HomePhone': '(818) 555-2438',

                        'DepartmentID': 6,

                        'MobilePhone': '(818) 555-2387'

                        }, {

                        'ID': 4,

                        'FirstName': 'Greta',

                        'LastName': 'Sims',

                        'Position': 'HR Manager',

                        'BirthDate': '1977/11/22',

                        'HireDate': '1998/04/23',

                        'Title': 'Ms.',

                        'Address': '1700 S Grandview Dr.',

                        'State': 'Georgia',

                        'City': 'Atlanta',

                        'Zipcode': 91803,

                        'Email': 'gretas@dx-email.com',

                        'Skype': 'gretasDXskype',

                        'HomePhone': '(818) 555-0976',

                        'DepartmentID': 5,

                        'MobilePhone': '(818) 555-6546'

                        }, {

                        'ID': 5,

                        'FirstName': 'Brett',

                        'LastName': 'Wade',

                        'Position': 'IT Manager',

                        'BirthDate': '1968/12/01',

                        'HireDate': '2009/03/06',

                        'Title': 'Mr.',

                        'Address': '1120 Old Mill Rd.',

                        'State': 'Idaho',

                        'City': 'Boise',

                        'Zipcode': 91108,

                        'Email': 'brettw@dx-email.com',

                        'Skype': 'brettwDXskype',

                        'HomePhone': '(626) 555-5985',

                        'DepartmentID': 7,

                        'MobilePhone': '(626) 555-0358'

                        }, {

                        'ID': 6,

                        'FirstName': 'Sandra',

                        'LastName': 'Johnson',

                        'Position': 'Controller',

                        'BirthDate': '1974/11/15',

                        'HireDate': '2005/05/11',

                        'Title': 'Mrs.',

                        'Address': '4600 N Virginia Rd.',

                        'State': 'Utah',

                        'City': 'Beaver',

                        'Zipcode': 90807,

                        'Email': 'sandraj@dx-email.com',

                        'Skype': 'sandrajDXskype',

                        'HomePhone': '(562) 555-8272',

                        'DepartmentID': 5,

                        'MobilePhone': '(562) 555-2082'

                        }, {

                        'ID': 7,

                        'FirstName': 'Kevin',

                        'LastName': 'Carter',

                        'Position': 'Shipping Manager',

                        'BirthDate': '1978/01/09',

                        'HireDate': '2009/08/11',

                        'Title': 'Mr.',

                        'Address': '424 N Main St.',

                        'State': 'California',

                        'City': 'San Diego',

                        'Zipcode': 90012,

                        'Email': 'kevinc@dx-email.com',

                        'Skype': 'kevincDXskype',

                        'HomePhone': '(213) 555-8038',

                        'DepartmentID': 3,

                        'MobilePhone': '(213) 555-2840'

                        }, {

                        'ID': 8,

                        'FirstName': 'Cynthia',

                        'LastName': 'Stanwick',

                        'Position': 'HR Assistant',

                        'BirthDate': '1985/06/05',

                        'HireDate': '2008/03/24',

                        'Title': 'Ms.',

                        'Address': '2211 Bonita Dr.',

                        'City': 'Little Rock',

                        'State': 'Arkansas',

                        'Zipcode': 90265,

                        'Email': 'cindys@dx-email.com',

                        'Skype': 'cindysDXskype',

                        'HomePhone': '(818) 555-6808',

                        'DepartmentID': 4,

                        'MobilePhone': '(818) 555-6655'

                        }, {

                        'ID': 9,

                        'FirstName': 'Kent',

                        'LastName': 'Samuelson',

                        'Position': 'Ombudsman',

                        'BirthDate': '1972/09/11',

                        'HireDate': '2009/04/22',

                        'Title': 'Dr.',

                        'Address': '12100 Mora Dr',

                        'City': 'St. Louis',

                        'State': 'Missouri',

                        'Zipcode': 90272,

                        'Email': 'kents@dx-email.com',

                        'Skype': 'kentsDXskype',

                        'HomePhone': '(562) 555-1328',

                        'DepartmentID': 26,

                        'MobilePhone': '(562) 555-9282'

                        }, {

                        'ID': 10,

                        'FirstName': 'Taylor',

                        'LastName': 'Riley',

                        'Position': 'Network Admin',

                        'BirthDate': '1982/08/14',

                        'HireDate': '2012/04/14',

                        'Title': 'Mr.',

                        'Address': '7776 Torreyson Dr',

                        'City': 'San Jose',

                        'State': 'California',

                        'Zipcode': 90012,

                        'Email': 'taylorr@dx-email.com',

                        'Skype': 'taylorrDXskype',

                        'HomePhone': '(310) 555-9712',

                        'DepartmentID': 5,

                        'MobilePhone': '(310) 555-7276'

                        }]

            }

        }

    }

</script>

<style scoped>

#gridContainer {

  height: 400px;

  width:900px;

}

/* .dx-header-row > td > .dx-datagrid-text-content {

  white-space: normal;

  vertical-align: top;

  text-align: center;

} */

</style>