Skip to main content

Table

MSK Table은 일반 <table>에 정렬, 행 선택, sticky 헤더를 더하는 경량 data-grid 헬퍼입니다.

Preview​

이름나이
미나41
아론28
제인34

Data API​

<table data-msk-table data-msk-table-sticky>
  <thead>
    <tr>
      <th><input type="checkbox" data-msk-table-select-all></th>
      <th data-msk-table-sort="name">이름</th>
      <th data-msk-table-sort="age" data-msk-table-numeric="true">나이</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" data-msk-table-select value="1"></td>
      <td>제인</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

정렬 키가 표시 텍스트와 다르면 셀에 data-msk-table-value를 지정합니다.

Events​

table.addEventListener('msk:table-sort', (event) => console.log(event.detail.direction));
table.addEventListener('msk:table-select', (event) => console.log(event.detail.selected));

Accessibility​

  • 정렬 헤더는 aria-sort(ascending/descending)를 동기화하고 키보드(Enter/Space)로 동작합니다.
  • 전체 선택 체크박스는 행 선택 상태에 따라 indeterminate를 반영합니다.
  • data-msk-table-numeric="true" 컬럼은 숫자 기준으로 정렬합니다.