DataTable
원본: projects/skill-lens/design/components/DataTable/README.md
상태: In Progress, 접근성 △(정렬과 키보드 미정의), 다크 ✓, 코드 ✗
대상자 명단: 전체 선택(중간 상태), 선택 행, 확인 필요 행
행이 많고 열이 정해진 자료의 표입니다(PC). 원본은 8판 .tb2. 카드 안에 놓습니다.
쓰는 곳
명단(올린 사람), 직무 목록. 폰에서는 DataTablePhone. 매일 쓰는 작업 화면은 AdminShell의 sl-grid.
구성(화면이 넘겨줄 것)
열 정의, 행 데이터, 선택 상태, 행 행동(링크).
규칙
- 글자 14, 머리 13 회색 600(위아래 8 좌우 10), 칸 10, 줄 사이 1px
divider, 바깥 테 없음. - 상태 칸은
StatusBadge, 행 끝 행동은 링크. - 숫자 열은 오른쪽 정렬. 호버는 배경색만.
- 표 아래 한 줄: "8명만 보여요, 전부 보기".
접근성
- 전체 선택이 일부면
aria-checked="mixed". - 표 안에서 Tab은 조작 요소(체크, 링크, 버튼)에만 갑니다. 체크박스 이름에 대상을 넣습니다("홍길동 선택").
- 일괄 바로 옮겨 가면 선택 수를 읽습니다. 고정 머리가 포커스를 가리지 않게 합니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=360 width=760 subtitle="대상자 명단: 전체 선택(중간 상태), 선택 행, 확인 필요 행" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}</style>
<div class="sl" style="max-width:720px">
<table class="sl-table">
<thead><tr><th style="width:40px"><span class="sl-check" role="checkbox" aria-checked="mixed" aria-label="전체 선택"></span></th><th>이름</th><th>그룹</th><th>직무</th><th>상태</th><th></th></tr></thead>
<tbody>
<tr class="is-selected"><td><span class="sl-check" role="checkbox" aria-checked="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></td><td>김담당<div class="sl-table__email">hojun@gaon.co.kr</div></td><td>교육사업본부</td><td>서비스 PM</td><td><span class="sl-chip sl-chip--success">자동 연결</span></td><td><div class="sl-table__actions"><button class="sl-btn sl-btn--secondary sl-btn--sm">수정</button></div></td></tr>
<tr><td><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td>박실무<div class="sl-table__email">silmu@gaon.co.kr</div></td><td>콘텐츠팀</td><td>발전교육 운영</td><td><span class="sl-chip sl-chip--success">자동 연결</span></td><td><div class="sl-table__actions"><button class="sl-btn sl-btn--secondary sl-btn--sm">수정</button></div></td></tr>
<tr class="is-attention"><td><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td>이확인<div class="sl-table__email">check@gaon.co.kr</div></td><td>신사업TF</td><td><span class="sl-row__level">직무 없음</span></td><td><span class="sl-chip sl-chip--danger">확인 필요</span></td><td><div class="sl-table__actions"><button class="sl-btn sl-btn--primary sl-btn--sm">직무선택</button><button class="sl-btn sl-btn--secondary sl-btn--sm">합치기</button></div></td></tr>
</tbody></table>
<div class="sl-table__foot"><span>1,248명 중 3명 표시, 1명 선택</span><button class="sl-btn sl-btn--link">제외하고 계속</button></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.