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은 조작 요소(체크, 링크, 버튼)에만 갑니다. 체크박스 이름에 대상을 넣습니다("홍길동 선택").
- 일괄 바로 옮겨 가면 선택 수를 읽습니다. 고정 머리가 포커스를 가리지 않게 합니다.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.