Table 테이블

데이터 테이블입니다. 정렬(제어/비제어), 열 필터링, 열 너비 끌기, 다단계 표기(children 무한 중첩)와 고정 열을 지원합니다. height 를 설정하면 가상 스크롤이 켜집니다(rowHeight 를 실제 행 높이와 일치시켜야 합니다).

테이블

<template>
  <div style="max-width: 760px">
    <p class="demo-note">size="small" + maxHeight + 기본 정렬(defaultSortProp/defaultSortOrder) + 필터</p>
    <LhTable
      :data="rows"
      :columns="columns"
      size="small"
      stripe
      border
      :max-height="200"
      row-key="name"
      default-sort-prop="dynasty"
      default-sort-order="asc"
      :default-filtered-values="{ dynasty: ['송'] }"
    >
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">왕조 열이 기본 오름차순이고 송 이 사전 필터됩니다; 표기 필터 버튼으로 조건을 바꿀 수 있습니다.</p>
    <p class="demo-note" style="margin-top: 16px">중첩 표기(children) + resizable 너비 끌기 + formatter + 사용자 지정 sorter</p>
    <LhTable :data="rows2" :columns="groupColumns" border :height="180" :row-height="40" :sorter="dynastySorter">
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">전래 열은 formatter 로 궁중 소장/민간 형식으로 바뀝니다; 평가액 열은 너비를 끌어 올릴 수 있습니다(resizable).</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    rows: [
      { name: '계산행려도', dynasty: '송', price: 1800 },
      { name: '부춘산거도', dynasty: '원', price: 2600 },
      { name: '천리강산도', dynasty: '송', price: 3200 },
      { name: '청명상하도', dynasty: '송', price: 1500 },
      { name: '한희재야연도', dynasty: '오대', price: 2100 },
    ],
    rows2: [
      { name: '계산행려도', dynasty: '송', provenance: '궁중 소장', price: 1800 },
      { name: '부춘산거도', dynasty: '원', provenance: '궁중 소장', price: 2600 },
      { name: '청명상하도', dynasty: '송', provenance: '궁중 소장', price: 1500 },
      { name: '조야백도', dynasty: '당', provenance: '민간', price: 980 },
    ],
    columns: [
      { prop: 'name', label: '그림', width: 160 },
      {
        prop: 'dynasty',
        label: '왕조',
        width: 120,
        sortable: true,
        filters: [
          { text: '송', value: '송' },
          { text: '원', value: '원' },
          { text: '오대', value: '오대' },
        ],
      },
      { prop: 'price', label: '평가액(만)', width: 140, align: 'right', slot: 'price' },
    ],
    groupColumns: [
      {
        label: '소장품 정보',
        children: [
          { prop: 'name', label: '그림', width: 150 },
          {
            prop: 'provenance',
            label: '전래',
            width: 100,
            formatter: (r) => (r.provenance === '궁중 소장' ? '궁중 소장' : '민간'),
          },
        ],
      },
      {
        label: '평가액',
        children: [
          { prop: 'dynasty', label: '왕조', width: 90, sortable: true },
          { prop: 'price', label: '평가액(만)', width: 130, align: 'right', resizable: true, slot: 'price' },
        ],
      },
    ],
  }),
  methods: {
    dynastySorter(a, b) {
      const order = ['당', '오대', '송', '원']
      return order.indexOf(String(a.dynasty)) - order.indexOf(String(b.dynasty))
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
data	행 데이터	LhTableRow[]	[]
columns	열 설정	LhTableColumn[]	[]
height	표 본문 높이 (설정하면 가상 스크롤 활성화; 숫자는 px)	number \| string	—
maxHeight	가상 스크롤이 아닌 모드의 최대 높이	number \| string	—
rowHeight	가상 스크롤 행 높이 (실제 행 높이와 일치해야 함)	number	—
stripe / border	얼룩무늬 / 셀 테두리	boolean	false
size	크기	'small' \| 'default' \| 'large'	'default'
rowKey	행 키 필드명	string	—
defaultSortProp / defaultSortOrder	기본 정렬 열 / 방향	string / LhTableSortOrder	—
sorter	사용자 지정 정렬 함수	(a, b) => number	—
resizable	열 너비 끌기 활성화 (열 수준의 resizable 설정이 추가로 필요하며, 열은 숫자 width 여야 함)	boolean	false
defaultFilteredValues	기본 필터 상태 (비제어, 키가 열 prop)	Record<string, (string \| number)[]>	—
filteredValues	제어 필터 상태 (:filtered-values.sync)	Record<string, (string \| number)[]>	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Events

sortChange ({ prop, order }), filterChange ({ prop, values }), columnResize ({ prop, width }), update:filteredValues, rowClick (row, index)

Slots

슬롯	설명
<열 slot 명>	사용자 지정 셀, 범위 매개변수 { row, column, index, value } (열은 column.slot 으로 지정)
empty	데이터가 없을 때 내용 (기본값 「데이터 없음」)

접근성

표기는 role="row" + 정렬 가능한 열에 aria-sort, 표 본문은 role="row" 입니다. 필터 패널은 role="menu", 너비 끌기 핸들에는 aria-label 과 tabindex 가 지정되어 키보드 좌우 조정을 지원합니다.