DataGrid 테이블
행과 열로 구성된 데이터를 깔끔하게 보여 주는 테이블 컴포넌트예요.
출처: 문서
본문
기본 사용법
:::demo data 파라미터에는 표시할 데이터를, columns 파라미터에는 열 데이터를 넘겨요. 열 데이터에서 field는 해당 열 내용의 필드명이고, header는 해당 열의 제목이에요.
<template>
<d-data-grid :data="tableData" :columns="columnData" fix-header style="max-height: 300px"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender' },
{ field: 'date', header: 'Date of birth' },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
테이블 스타일
:::demo striped 파라미터는 줄무늬 배경 표시 여부를, header-bg는 헤더 배경색 표시 여부를, border-type은 테두리 타입을, shadow-type은 그림자 타입을, show-header는 헤더 표시 여부를 정해요. 열 설정의 align 파라미터로 내용 정렬 방식을 정할 수 있어요.
<template>
<div class="data-grid-btn-groups">
<div class="data-grid-btn">
斑马纹：
<d-switch v-model="striped" />
</div>
<div class="data-grid-btn">
表头背景色：
<d-switch v-model="headerBg" />
</div>
<div class="data-grid-btn">
表头显隐：
<d-switch v-model="showHeader" />
</div>
<div class="data-grid-btn">
表格边框：
<d-tabs v-model="borderType" type="options" :show-content="false">
<d-tab v-for="item in borderTypeList" :key="item.label" :id="item.value" :title="item.label"></d-tab>
</d-tabs>
</div>
<div class="data-grid-btn">
表格阴影：
<d-tabs v-model="shadowType" type="options" :show-content="false">
<d-tab v-for="item in shadowTypeList" :key="item.label" :id="item.value" :title="item.label"></d-tab>
</d-tabs>
</div>
<div class="data-grid-btn">
表格行高：
<d-tabs v-model="size" type="options" :show-content="false">
<d-tab v-for="item in sizeList" :key="item.label" :id="item.value" :title="item.label"></d-tab>
</d-tabs>
</div>
</div>
<d-data-grid
:data="tableData"
:columns="columnData"
:striped="striped"
:header-bg="headerBg"
:border-type="borderType"
:shadow-type="shadowType"
:show-header="showHeader"
:size="size"
></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const striped = ref(false);
const headerBg = ref(false);
const showHeader = ref(true);
const borderType = ref('');
const shadowType = ref('');
const size = ref('sm');
const borderTypeList = [
{ label: 'Normal', value: '' },
{ label: 'Bordered', value: 'bordered' },
{ label: 'Borderless', value: 'borderless' },
];
const shadowTypeList = [
{ label: '默认', value: '' },
{ label: '阴影', value: 'shadowed' },
];
const sizeList = [
{ label: 'Mini', value: 'mini' },
{ label: 'Small', value: 'xs' },
{ label: 'Normal', value: 'sm' },
{ label: 'Middle', value: 'md' },
{ label: 'large', value: 'lg' },
];
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250, align: 'center' },
{ field: 'gender', header: 'Gender', width: 250, align: 'center' },
{ field: 'date', header: 'Date of birth', width: 250, align: 'right' },
]);
const tableData = ref([
{ firstName: 'Mark', lastName: 'Otto', date: '1990/01/11', gender: 'Male' },
{ firstName: 'Jacob', lastName: 'Thornton', gender: 'Female', date: '1990/01/12' },
{ firstName: 'Danni', lastName: 'Chen', gender: 'Male', date: '1990/01/13' },
{ firstName: 'green', lastName: 'gerong', gender: 'Male', date: '1990/01/14' },
]);
return { tableData, columnData, striped, headerBg, borderType, borderTypeList, shadowType, shadowTypeList, size, sizeList, showHeader };
},
});
</script>
<style>
.data-grid-btn-groups {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
}
.data-grid-btn {
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 16px;
}
</style>
:::
동적 데이터
:::demo loading은 비즈니스 쪽에서 직접 추가해요.
<template>
<d-button @click="loadData">加载数据</d-button>
<d-data-grid :data="tableData" :columns="columnData" v-loading="showLoading" style="height:220px">
<template #empty>
<div class="empty-content">暂无数据</div>
</template>
</d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const showLoading = ref(false);
const tableData = ref([]);
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250 },
]);
const loadData = () => {
showLoading.value = true;
setTimeout(() => {
showLoading.value = false;
tableData.value = [
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
];
}, 500);
};
return { tableData, showLoading, columnData, loadData };
},
});
</script>
<style>
.empty-content {
padding: 8px;
text-align: center;
}
</style>
:::
동적 열
:::demo
<template>
<d-button @click="addColumn" style="margin-right:8px">增加列</d-button>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const addColumn = () => {
columnData.value.push({ field: 'firstName', header: 'First Name', width: 250 });
};
onMounted(() => {
columnData.value = [
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250 },
];
});
return { tableData, columnData, addColumn };
},
});
</script>
:::
지연 로딩
:::demo lazy 파라미터를 true로 설정하면 지연 로딩이 켜져요. load-more 이벤트 콜백에서 데이터를 동적으로 추가할 수 있어요.
<template>
<d-data-grid
:data="tableData"
:columns="columnData"
v-loading="showLoading"
lazy
style="height:300px"
@load-more="onLoadMore"
></d-data-grid>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const showLoading = ref(false);
const total = 100;
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250 },
]);
const tableData = ref([
{
firstName: 'diy0',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'diy1',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'diy2',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'diy3',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'diy4',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'diy5',
lastName: 'lang',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'diy6',
lastName: 'li',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'diy7',
lastName: 'li',
gender: 'Female',
date: '1990/01/14',
},
{
firstName: 'diy8',
lastName: 'Yu',
gender: 'Female',
date: '1990/01/14',
},
{
firstName: 'diy9',
lastName: 'Yu',
gender: 'Female',
date: '1990/01/14',
},
]);
const onLoadMore = () => {
if (tableData.value.length >= total || showLoading.value) {
return;
}
showLoading.value = true;
setTimeout(() => {
const size = tableData.value.length;
showLoading.value = false;
for (let i = 0; i < 10; i++) {
tableData.value.push({
firstName: 'diy' + (i + size),
lastName: 'more data',
gender: 'Female',
date: '2022/07/20',
});
}
}, 300);
};
return { showLoading, tableData, columnData, onLoadMore };
},
});
</script>
:::
행 스타일 커스터마이즈
:::demo row-class 파라미터로 행 스타일을 커스터마이즈해요. 문자열을 넘기면 모든 행의 스타일을 정할 수 있고, 함수를 넘기면 특정 행이나 일부 행의 스타일을 따로 정할 수도 있어요. 이때 함수 파라미터는 행 데이터와 행 인덱스예요.
<template>
<d-data-grid :data="tableData" :columns="columnData" :row-class="rowClass"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender' },
{ field: 'date', header: 'Date of birth' },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const rowClass = (rowData, rowIndex) => {
return rowIndex === 1 ? 'custom-row' : '';
};
return { tableData, columnData, rowClass };
},
});
</script>
<style>
.custom-row {
background-color: var(--devui-list-item-selected-bg, #e9edfa) !important;
}
</style>
:::
셀 스타일 커스터마이즈
:::demo cell-class 파라미터로 셀 스타일을 커스터마이즈해요. 문자열을 넘기면 셀 스타일을 일괄 정할 수 있고, 함수를 넘기면 특정 셀이나 일부 셀의 스타일을 따로 정할 수도 있어요. 이때 함수 파라미터는 행 데이터, 행 인덱스, 열 데이터, 열 인덱스예요.
<template>
<d-data-grid :data="tableData" :columns="columnData" :cell-class="cellClass"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender' },
{ field: 'date', header: 'Date of birth' },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const cellClass = (rowData, rowIndex, columnData, columnIndex) => {
return rowData[columnData.field] === 'Male' ? 'custom-cell' : '';
};
return { tableData, columnData, cellClass };
},
});
</script>
<style>
.custom-cell {
background-color: var(--devui-list-item-selected-bg, #e9edfa);
}
</style>
:::
열 너비 커스터마이즈
:::demo width 파라미터로 열 너비를 설정해요. 타입은 string | number | undefined인데, number는 고정 너비예요. string은 픽셀이나 백분율로 설정할 수 있고, 백분율이면 테이블이 들어 있는 컨테이너 전체 너비를 기준으로 그 열의 실제 너비를 계산해요. undefined, 즉 열 너비를 설정하지 않으면 역시 너비를 설정하지 않은 다른 열들과 남은 너비(컨테이너 전체 너비에서 이미 정한 열 너비를 뺀 값)를 똑같이 나눠 가져요.minWidth 파라미터로 최소 열 너비를 설정해요. 타입은 width와 같고, 그 열에 width를 설정하지 않았을 때 할당되는 너비가 minWidth보다 작으면 minWidth 값으로 열 너비를 정해요. minWidth를 설정하지 않으면 열이 화면에 보이도록 기본 80px 너비를 적용해요.maxWidth 파라미터로 최대 열 너비를 설정해요. 타입은 width와 같고, 그 열에 width를 설정하지 않았을 때 할당되는 너비가 maxWidth보다 크면 maxWidth 값으로 열 너비를 정해요.
<template>
<d-data-grid :data="tableData" :columns="columnData"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 300 },
{ field: 'lastName', header: 'Last Name', width: '20%' },
{ field: 'gender', header: 'Gender', maxWidth: 150 },
{ field: 'date', header: 'Date of birth', minWidth: '300px' },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
셀 내용 커스터마이즈
:::demo 열 데이터의 cellRender 파라미터로 셀 내용을 커스터마이즈해요. 함수 파라미터는 순서대로 행 데이터, 행 인덱스, 열 데이터, 열 인덱스예요. cellRender 함수는 h 함수로 만든 가상 DOM 노드를 반환할 수 있어요.
<template>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref, h } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 200 },
{ field: 'lastName', header: 'Last Name', width: 200 },
{ field: 'gender', header: 'Gender', width: 200 },
{ field: 'date', header: 'Date of birth', width: 200 },
{
field: 'operate',
header: 'Operation',
width: 200,
cellRender: (rowData, rowIndex, cellData, cellIndex) =>
h('i', { class: 'icon icon-delete', onClick: () => onDelete(rowData, rowIndex, cellData, cellIndex) }),
},
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const onDelete = (rowData, rowIndex, cellData, cellIndex) => {
console.log('row data', rowData);
console.log('row index', rowIndex);
console.log('cell data', cellData);
console.log('cell index', cellIndex);
};
return { tableData, columnData };
},
});
</script>
:::
테이블 헤더 커스터마이즈
:::demo 열 데이터의 headRender 파라미터로 테이블 헤더를 커스터마이즈해요. 함수 파라미터는 현재 열 데이터예요. headRender 함수는 h 함수로 만든 가상 DOM 노드를 반환할 수 있어요.
<template>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref, h } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{
field: 'date',
header: 'Date of birth',
width: 250,
headRender: (rowData, rowIndex, cellData, cellIndex) => h('span', 'Birthday'),
},
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
툴팁 내용 커스터마이즈
:::demo showOverflowTooltip 파라미터는 내용이 넘칠 때 마우스를 올리면 툴팁을 보여 줄지 정해요. true로 설정하면 이 기능이 켜지고, TooltipConfig 타입 파라미터로 툴팁 내용을 세부 설정할 수도 있어요.showHeadOverflowTooltip은 헤더에 쓰는 파라미터로, 역할과 파라미터 값이 showOverflowTooltip과 같아요.
<template>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref, h } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender' },
{ field: 'date', header: 'Date of birth' },
{
field: 'info',
header: 'Personal Information',
width: 100,
showOverflowTooltip: { position: ['bottom-end'] },
showHeadOverflowTooltip: true,
},
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
info: '一段很长的个人介绍一段很长的个人介绍一段很长的个人介绍',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
info: '一段很长的个人介绍一段很长的个人介绍一段很长的个人介绍',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
info: '一段很长的个人介绍一段很长的个人介绍一段很长的个人介绍',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
info: '一段很长的个人介绍一段很长的个人介绍一段很长的个人介绍',
},
]);
return { tableData, columnData };
},
});
</script>
:::
빈 데이터 템플릿
:::demo empty 슬롯으로 데이터가 비었을 때 표시할 내용을 커스터마이즈할 수 있어요.
<template>
<d-button @click="loadData">加载数据</d-button>
<d-data-grid :data="tableData" :columns="columnData" v-loading="showLoading" style="height:220px">
<template #empty>
<div class="empty-content">暂无数据</div>
</template>
</d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const showLoading = ref(false);
const tableData = ref([]);
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 300 },
{ field: 'lastName', header: 'Last Name', width: 300 },
{ field: 'gender', header: 'Gender', width: 300 },
{ field: 'date', header: 'Date of birth', width: 300 },
]);
const loadData = () => {
showLoading.value = true;
setTimeout(() => {
showLoading.value = false;
tableData.value = [
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
];
}, 500);
};
return { tableData, showLoading, columnData, loadData };
},
});
</script>
<style>
.empty-content {
padding: 8px;
text-align: center;
}
</style>
:::
헤더 고정
:::demo fix-header 파라미터를 true로 설정하면 헤더가 고정돼요.
<template>
<d-data-grid :data="tableData" :columns="columnData" fix-header style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250 },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
열 고정
:::demo 열 데이터의 fixed 파라미터로 해당 열을 고정할 수 있어요. 값은 left와 right고, 각각 왼쪽과 오른쪽에 고정해요.
<template>
<d-data-grid :data="tableData" :columns="columnData" fix-header style="max-height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 150, fixed: 'left' },
{ field: 'lastName', header: 'Last Name', width: 150, fixed: 'left' },
{ field: 'gender', header: 'Gender', width: 200 },
{ field: 'date', header: 'Date of birth', width: 200 },
{ field: 'firstName', header: 'First Name', width: 200 },
{ field: 'lastName', header: 'Last Name', width: 200 },
{ field: 'gender', header: 'Gender', width: 200 },
{ field: 'date', header: 'Date of birth', width: 200, fixed: 'right' },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
정렬
:::demo 열 데이터의 sortable 파라미터를 true로 설정하면 정렬 기능이 켜져요. sortMethod 파라미터로 정렬 방식을 직접 정의할 수 있고, 정렬 후에는 sort-change 이벤트가 발생해서 정렬을 만든 열 필드와 현재 정렬 방식을 넘겨 줘요.
<template>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px" @sortChange="onSortChange"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250, sortable: true, sortMethod: (a, b) => a.date > b.date },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/12',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/13',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/11',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const onSortChange = (res) => {
console.log('列排序字段', res.field);
console.log('排序方式', res.direction);
};
return { tableData, columnData, onSortChange };
},
});
</script>
:::
필터링
:::demo 열 데이터의 filterable 파라미터를 true로 설정하면 필터 기능이 켜져요. 내장 필터는 기본이 다중 선택이고, filterMultiple: false로 단일 선택 필터를 사용할 수 있어요. filterList 파라미터는 필터 목록을, filterChange 파라미터는 필터 조건이 바뀐 뒤 호출되는 콜백을, filterMenu 파라미터는 필터를 커스터마이즈하는 함수를 담아요. 이 함수는 h 함수로 만든 가상 DOM 노드를 반환할 수 있어요.
<template>
<d-data-grid :data="tableData" :columns="columnData" style="height:220px"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const originData = [
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
];
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{
field: 'lastName',
header: 'Last Name',
width: 250,
filterable: true,
filterList: [
{ name: 'Otto', value: 'Otto' },
{ name: 'Thornton', value: 'Thornton' },
{ name: 'Chen', value: 'Chen' },
{ name: 'gerong', value: 'gerong' },
],
filterChange: (selected) => {
console.log('multiple filter change', selected);
const filterList = selected.map((item) => item.value);
tableData.value = originData.filter((item) => filterList.includes(item.lastName));
},
},
{
field: 'gender',
header: 'Gender',
width: 250,
filterable: true,
filterMultiple: false,
filterList: [
{ name: 'Clear', value: 'Clear' },
{ name: 'Female', value: 'Female' },
{ name: 'Male', value: 'Male' },
],
filterChange: (selected) => {
console.log('single filter change', selected);
if (selected.value === 'Clear') {
tableData.value = originData;
return;
}
tableData.value = originData.filter((item) => item.gender === selected.value);
},
},
{ field: 'date', header: 'Date of birth', width: 250 },
]);
const tableData = ref([...originData]);
return { tableData, columnData };
},
});
</script>
:::
트리 테이블
행 데이터에 children 필드가 있으면 기본으로 트리 테이블로 보여 줘요. 특정 행을 펼칠 때 데이터를 비동기로 불러 오고 싶다면 그 행의 isLeaf를 false로 설정하세요. 그 행을 펼치면 expand-load-more 이벤트가 발생하고, 이벤트는 현재 펼친 행의 데이터와 콜백 함수를 넘겨 줘요. 로딩이 끝나면 콜백 함수를 실행해 데이터를 테이블에 다시 채워 넣으면 돼요. toggleRowExpansion으로 특정 행의 펼침 상태를 바꿀 수 있는데, 첫 번째 파라미터는 행 데이터이고 두 번째 파라미터는 선택 사항으로 펼침 상태를 정할 수 있어요.
:::demo
<template>
<d-button @click="toggleRowExpansion">改变第1条数据展开状态</d-button>
<d-data-grid
ref="dataGridRef"
:data="tableData"
:columns="columnData"
row-key="firstName"
style="height:300px"
@expand-load-more="onExpandLoadMore"
></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const dataGridRef = ref();
const columnData = ref([
{ field: 'firstName', header: 'First Name', width: 250 },
{ field: 'lastName', header: 'Last Name', width: 250 },
{ field: 'gender', header: 'Gender', width: 250 },
{ field: 'date', header: 'Date of birth', width: 250 },
]);
const tableData = ref([
{
firstName: 'Mark1',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male1',
children: [
{
firstName: 'Mark2',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
children: [
{
firstName: 'Mark21',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Mark22',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
{
firstName: 'Mark3',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
{
firstName: 'Jacob - dynamic load',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
isLeaf: false,
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const toggleRowExpansion = () => {
dataGridRef.value.toggleRowExpansion(tableData.value[0]);
};
const onExpandLoadMore = (node, callback) => {
setTimeout(() => {
callback({
node,
rowItems: [
{
firstName: 'Jacob2',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob3',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
children: [
{
firstName: 'Jacob31',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob32',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
],
});
}, 1000);
};
return { dataGridRef, tableData, columnData, toggleRowExpansion, onExpandLoadMore };
},
});
</script>
:::
열 너비 드래그
:::demo 열 데이터의 resizable을 true로 설정하면 그 열을 드래그해서 너비를 조절할 수 있어요. 드래그 후에는 마지막 열이 너비를 보정해요. 가상 스크롤에서는 아직 열 너비 드래그를 지원하지 않아요.
<template>
<d-data-grid :data="tableData" :columns="columnData"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender', minWidth: 200, maxWidth: 400, resizable: true },
{ field: 'date', header: 'Date of birth', minWidth: 150 },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { tableData, columnData };
},
});
</script>
:::
선택 가능
:::demo 열 데이터의 type 파라미터를 checkable로 설정하면 체크 기능이 켜져요. 행 데이터의 checked 파라미터로 기본 체크 상태를, disableCheck 파라미터로 체크 비활성 여부를 정할 수 있어요. 행의 체크 상태가 바뀌면 check-change 이벤트가 발생하고, 이벤트 파라미터는 현재 행의 체크 상태와 행 데이터예요. 헤더의 체크 상태가 바뀌면 check-all-change 이벤트가 발생하고, 이벤트 파라미터는 현재 체크 상태예요.
<template>
<d-data-grid
:data="tableData"
:columns="columnData"
style="height:220px"
@checkChange="onCheckChange"
@checkAllChange="onCheckAllChange"
></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const columnData = ref([
{ type: 'checkable', width: 200 },
{ field: 'firstName', header: 'First Name', width: 200 },
{ field: 'lastName', header: 'Last Name', width: 200 },
{ field: 'gender', header: 'Gender', width: 200 },
{ field: 'date', header: 'Date of birth', width: 200 },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
checked: true,
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
checked: true,
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
disableCheck: true,
},
]);
const onCheckChange = (checkStatus, rowData) => {
console.log('row check change', checkStatus, rowData);
};
const onCheckAllChange = (checkStatus) => {
console.log('check all change', checkStatus);
};
return { tableData, columnData, onCheckChange, onCheckAllChange };
},
});
</script>
:::
부모-자식 연동
:::demo 트리 테이블과 함께 사용할 때 checkable-relation 파라미터로 부모-자식 연동 방식을 조절할 수 있어요. 기본값은 both라서 체크 상태가 바뀌면 부모와 자식이 동시에 영향을 받아요. 그 밖에 선택할 수 있는 값은 downward, upward, none이고, 실제 동작은 demo에서 확인해 보세요.
<template>
<d-radio-group v-model="currentStrategy" direction="row">
<d-radio v-for="strategy of checkStrategy" :key="strategy" :value="strategy">{{ strategy }}</d-radio>
</d-radio-group>
<d-data-grid :data="tableData" :columns="columnData" :checkable-relation="currentStrategy"></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const currentStrategy = ref('both');
const checkStrategy = ref(['both', 'downward', 'upward', 'none']);
const columnData = ref([
{ type: 'checkable', width: 50 },
{ field: 'firstName', header: 'First Name' },
{ field: 'lastName', header: 'Last Name' },
{ field: 'gender', header: 'Gender' },
{ field: 'date', header: 'Date of birth' },
]);
const tableData = ref([
{
firstName: 'Mark1',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male1',
children: [
{
firstName: 'Mark2',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
children: [
{
firstName: 'Mark21',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Mark22',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
{
firstName: 'Mark3',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
children: [
{
firstName: 'Jacob2',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob3',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
children: [
{
firstName: 'Jacob31',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob32',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
],
},
],
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
return { currentStrategy, checkStrategy, tableData, columnData };
},
});
</script>
:::
조작 메서드
:::demo toggleRowChecked 메서드는 행의 체크 상태를 바꿔요. 첫 번째 파라미터는 행 데이터이고, 두 번째 파라미터는 선택 사항으로 체크 상태를 정할 수 있어요. toggleAllRowChecked 메서드는 전체 선택 상태를 바꾸며, 파라미터로 체크 상태를 정할 수 있어요. getCheckedRows 메서드는 현재 체크된 데이터를 가져와요.
<template>
<d-button @click="toggleRowChecked" style="margin-right:8px">改变第2条数据选中状态</d-button>
<d-button @click="toggleAllChecked" style="margin-right:8px">改变全选状态</d-button>
<d-button @click="getCheckedRows">获取当前已选择数据</d-button>
<d-data-grid
ref="dataGridRef"
:data="tableData"
:columns="columnData"
row-key="firstName"
style="height:220px"
@checkChange="onCheckChange"
@checkAllChange="onCheckAllChange"
></d-data-grid>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const dataGridRef = ref();
const columnData = ref([
{ type: 'checkable', width: 200 },
{ field: 'firstName', header: 'First Name', width: 200 },
{ field: 'lastName', header: 'Last Name', width: 200 },
{ field: 'gender', header: 'Gender', width: 200 },
{ field: 'date', header: 'Date of birth', width: 200 },
]);
const tableData = ref([
{
firstName: 'Mark',
lastName: 'Otto',
date: '1990/01/11',
gender: 'Male',
},
{
firstName: 'Jacob',
lastName: 'Thornton',
gender: 'Female',
date: '1990/01/12',
},
{
firstName: 'Danni',
lastName: 'Chen',
gender: 'Male',
date: '1990/01/13',
},
{
firstName: 'green',
lastName: 'gerong',
gender: 'Male',
date: '1990/01/14',
},
]);
const toggleRowChecked = () => {
dataGridRef.value.toggleRowChecked(tableData.value[1]);
};
const toggleAllChecked = () => {
dataGridRef.value.toggleAllRowChecked();
};
const getCheckedRows = () => {
console.log('已选择数据', dataGridRef.value.getCheckedRows());
};
const onCheckChange = (checkStatus, rowData) => {
console.log('row check change', checkStatus, rowData);
};
const onCheckAllChange = (checkStatus) => {
console.log('check all change', checkStatus);
};
return { dataGridRef, tableData, columnData, toggleRowChecked, toggleAllChecked, getCheckedRows, onCheckChange, onCheckAllChange };
},
});
</script>
:::
대용량 데이터
:::demo
<template>
<d-data-grid :data="tableData" :columns="columnData" virtual-scroll style="height:500px"></d-data-grid>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const rowCount = 20000;
const columnCount = 400;
const columnFieldArr = ['firstName', 'lastName', 'gender', 'date'];
const columnData = ref([]);
const tableData = ref([]);
onMounted(() => {
for (let i = 0; i < columnCount; i++) {
const item = {
field: columnFieldArr[i % 4],
header: columnFieldArr[i % 4] + i,
width: 150,
};
columnData.value.push(item);
}
for (let i = 0; i < rowCount; i++) {
const rowItem = {
firstName: 'Mark' + i,
lastName: 'Otto' + i,
date: '1990/01/11',
gender: 'Male',
};
tableData.value.push(rowItem);
}
});
return { tableData, columnData };
},
});
</script>
:::
DataGrid 파라미터
| 파라미터 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| data | RowData[] | [] | 테이블 데이터 |
| columns | ColumnConfig[] | [] | 열 설정 데이터 |
| indent | number |
16 | 트리 테이블의 들여쓰기 크기, 단위는 px예요 |
| striped | boolean |
false | 줄무늬 배경 표시 여부 |
| fix-header | boolean |
false | 헤더 고정 여부 |
| row-hovered-highlight | boolean |
true | 마우스를 올린 행을 하이라이트할지 여부 |
| header-bg | boolean |
false | 헤더 배경색 표시 여부 |
| show-header | boolean |
true | 헤더 표시 여부 |
| lazy | boolean |
false | 지연 로딩 여부 |
| virtual-scroll | boolean |
false | 가상 스크롤 사용 여부 |
| reserve-check | boolean |
false | 체크 상태 유지 여부 |
| resizable | boolean |
-- | 선택, 모든 열에서 드래그로 열 너비 조절을 허용할지 여부. 열의 resizable 파라미터가 이 파라미터보다 우선해요 |
| row-class | RowClass | '' | 행 스타일 커스터마이즈. 함수로 설정하면 행마다 다른 스타일을 줄 수 있어요 |
| row-key | RowKey | -- | 체크 행, 트리 테이블 등의 시나리오에서는 필수예요. 이 필드로 정의한 고유 key로 데이터를 찾아요 |
| cell-class | CellClass | '' | 셀 스타일 커스터마이즈. 함수로 설정하면 셀마다 다른 스타일을 줄 수 있어요 |
| border-type | BorderType | '' | 테두리 타입 |
| shadow-type | ShadowType | '' | 그림자 타입 |
| size | Size | 'sm' | 테이블 크기. 행 높이 차이로 나타나요 |
| checkable-relation | CheckableRelation | 'both' | 행 체크와 트리 테이블을 함께 사용할 때 부모-자식 연동 관계를 정의해요 |
DataGrid 이벤트
| 이벤트명 | 콜백 파라미터 | 설명 |
|---|---|---|
| row-click | Function(e: RowClickArg) |
행을 클릭했을 때 발생하는 이벤트 |
| cell-click | Function(e: CellClickArg) |
셀을 클릭했을 때 발생하는 이벤트 |
| check-change | Function(status: boolean, rowData: RowData) |
행 체크 상태가 바뀔 때 발생하는 이벤트. 파라미터는 현재 체크 상태와 행 데이터예요 |
| check-all-change | Function(status: boolean) |
헤더 체크 상태가 바뀔 때 발생하는 이벤트. 파라미터는 현재 체크 상태예요 |
| expand-change | Function(status: boolean, rowData: RowData) |
트리 테이블에서 행 펼침 상태가 바뀔 때 발생하는 이벤트. 파라미터는 현재 펼침 상태와 행 데이터예요 |
| sort-change | Function(e: SortChangeArg) |
정렬이 바뀔 때 발생하는 이벤트 |
| load-more | Function() |
지연 로딩에서 발생하는 이벤트 |
| expand-load-more | Function(node: RowData, callback: (result: IExpandLoadMoreResult) => void) |
트리 테이블을 펼칠 때 발생하는 지연 로딩 이벤트 |
DataGrid 메서드
| 메서드명 | 타입 | 설명 |
|---|---|---|
| sort | (key: ColumnConfig['field'], direction: SortDirection) => void |
특정 열을 지정한 방식으로 정렬해요 |
| toggleRowChecked | (node: RowData, status?: boolean) => void |
지정한 행의 체크 상태를 바꿔요. status 파라미터로 체크 상태를 지정할 수 있어요 |
| toggleAllRowChecked | (status?: boolean) => void |
헤더 체크 상태를 바꿔요. status 파라미터로 체크 상태를 지정할 수 있어요 |
| getCheckedRows | () => RowData[] |
체크된 행 데이터를 가져와요 |
| toggleRowExpansion | (node: RowData, status?: boolean) => void |
지정한 행의 펼침 상태를 바꿔요. status 파라미터로 펼침 상태를 지정할 수 있어요 |
| toggleAllRowExpansion | (status?: boolean) => void |
모든 행의 펼침 상태를 바꿔요. status 파라미터로 펼침 상태를 지정할 수 있어요 |
| refreshRowsData | () => void |
현재 넘겨 준 data를 기준으로 표시할 행 데이터를 다시 계산해요 |
타입 정의
RowData
interface RowData {
checked?: boolean; // 是否勾选
disableCheck?: boolean; // 是否禁用勾选
children?: RowData[]; // 当存在此字段时，默认展示树表格
isLeaf?: boolean; // 是否为叶子节点，当树表格中需要异步加载子节点时，需要将此参数设置为false
[k: string]: any; // 业务其他数据
}
ColumnConfig
interface ColumnConfig {
header: string; // 列的头部展示内容
field: string; // 列字段，用于从 RowData 取数据展示在单元格
width?: number | string; // 列宽度；可设置百分比，会根据容器总宽度计算单元格实际所占宽度，未设置时，会自动分配宽度，分配规则参考【自定义样式-自定义列宽】示例；启用虚拟滚动此字段必填
minWidth?: number | string; // 最小列宽，可设置百分比，会根据容器总宽度计算实际最小列宽
maxWidth?: number | string; // 最大列宽，可设置百分比，会根据容器总宽度计算实际最大列宽
type?: ColumnType; // 列类型，复选框、索引等
resizable?: boolean; // 是否支持拖拽调整列宽
sortable?: boolean; // 是否启用排序
showSortIcon?: boolean; // 是否显示排序未激活图标，默认不显示
sortMethod?: SortMethod; // 自定义排序方法
filterable?: boolean; // 是否启用过滤
showFilterIcon?: boolean; // 是否显示筛选未激活图标，默认不显示
filterMultiple?: boolean; // 组件内置多选和单选两种过滤器，默认为多选，配置为 false 可使用单选过滤器
filterList?: FilterListItem[]; // 过滤器列表
filterChange?: (val: FilterListItem | FilterListItem[]) => void; // 过滤内容变更时触发
filterMenu?: (scope: { toggleFilterMenu: (status?: boolean) => void; setFilterStatus: (status: boolean) => void }) => VNode; // 自定义过滤器；toggleFilterMenu: 展开收起筛选菜单；setFilterStatus: 设置表头是否高亮
fixed?: FixedDirection; // 固定列的方向，固定在左侧 or 右侧
align?: ColumnAlign; // 列内容对齐方式
showOverflowTooltip?: boolean | TooltipConfig; // 单元格内容超长是否通过 Tooltip 显示全量内容，可对 Tooltip 进行配置，支持的配置项参考 TooltipConfig
showHeadOverflowTooltip?: boolean | TooltipConfig; // 表头内容超长是否通过 Tooltip 显示全量内容，可对 Tooltip 进行配置，支持的配置项参考 TooltipConfig
headRender?: (columnConfig: ColumnConfig) => VNode; // 自定义表头
cellRender?: (rowData: RowData, rowIndex: number, cellData: string, cellIndex: number) => VNode; // 自定义单元格
}
ColumnType
열 타입이에요.
type ColumnType = 'checkable' | 'index' | '';
FilterListItem
필터 목록의 한 항목이에요.
interface FilterListItem {
name: string; // 显示的内容
value: any; // 对应的值
}
FixedDirection
열을 고정할 방향이에요.
type FixedDirection = 'left' | 'right';
ColumnAlign
열 내용의 정렬 방식이에요.
type ColumnAlign = 'left' | 'center' | 'right';
TooltipConfig
내용이 길 때 Tooltip으로 전체 내용을 보여 주기 위한 설정 항목이에요.
interface TooltipConfig {
content?: string; // 提示内容，默认为单元格内容
position?: Placement[]; // 展开方向，默认展开顺序为上右下左
mouseEnterDelay?: number; // 鼠标悬浮后延时多久提示，默认150ms
enterable?: boolean; // 鼠标是否可移入提示框，默认 true
}
RowClass
행 스타일을 커스터마이즈하는 클래스명이에요. 함수로 설정하면 행마다 다른 스타일을 줄 수 있어요.
type RowClass = string | ((row: RowData, rowIndex: number) => string);
RowKey
체크 행, 트리 테이블처럼 메서드로 데이터를 조작해야 하는 상황에서 이 필드로 정의한 고유 key로 데이터를 찾아요.
type RowKey = string | ((row: RowData) => string);
CellClass
셀 스타일을 커스터마이즈해요. 함수로 설정하면 셀마다 다른 스타일을 줄 수 있어요.
type CellClass = string | ((row: RowData, rowIndex: number, column: ColumnConfig, columnIndex: number) => string);
BorderType
type BorderType = '' | 'bordered' | 'borderless';
ShadowType
type ShadowType = '' | 'shadowed';
Size
type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg';
CheckableRelation
type CheckableRelation = 'upward' | 'downward' | 'both' | 'none';
RowClickArg
행 클릭 이벤트의 콜백 파라미터예요.
interface RowClickArg {
row: RowData; // 行数据
renderRowIndex: number; // 当前行在已渲染列表中的索引
flattenRowIndex: number; // 当前行在所有数据中的索引，大数据时和 renderRowIndex 不一致
}
CellClickArg
셀 클릭 이벤트의 콜백 파라미터예요.
interface CellClickArg {
row: RowData; // 行数据
renderRowIndex: number; // 当前行在已渲染列表中的索引
flattenRowIndex: number; // 当前行在所有数据中的索引，大数据时和 renderRowIndex 不一致
column: ColumnConfig; // 列配置数据
columnIndex: number; // 列在所有数据中的索引
}
SortDirection
정렬 방식이에요.
type SortDirection = 'asc' | 'desc' | '';
SortChangeArg
정렬 이벤트의 콜백 파라미터예요.
interface SortChangeArg {
field: ColumnConfig['field']; // 列字段
direction: SortDirection; // 当前排序方式
}
IExpandLoadMoreResult
interface IExpandLoadMoreResult {
node: RowData;
rowItems: RowData[];
}
더 알아보기 (Learn more)
DataGrid는 행과 열로 데이터를 보여 주는 테이블 컴포넌트로, 정렬·필터·트리 구조부터 가상 스크롤까지 테이블에 필요한 기능을 폭넓게 제공해요. 더 자세한 내용은 공식 문서를 참고하세요.