Table

개요

미리보기

예시 언어동작 줄이기

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29

내보낼 기록

Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29

caption

sortable

sort

selectable

state

예시

상태

기본
내보낼 기록
Title Source Date
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
정렬
내보낼 기록
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
선택
내보낼 기록
Title Source Date
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
비어 있음
내보낼 기록
Title Source Date
No rows to show.
내보낼 기록
No rows to show.
불러오는 중
내보낼 기록
Title Source Date
내보낼 기록
…

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29

내보낼 기록
Title	Source	Date
No rows to show.

일부만 읽음

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29
Some dates couldn’t be scanned. What we got is kept.

내보낼 기록

Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29

Some dates couldn’t be scanned. What we got is kept.

이렇게 · 이렇게 하지 않기

이렇게 내보내기 미리보기처럼 열 비교가 필요할 때만 쓴다.
이렇게 하지 않기 사람이나 팀원을 순위로 정렬하는 표는 만들지 않는다.
이렇게 320px에서는 카드형으로 바꾼다.
이렇게 하지 않기 행 재정렬을 애니메이션하지 않는다. 화살표 셀 이동(그리드 키보드)을 두지 않는다.

토큰과 속성

이름	타입	기본값	설명
`caption`	`string`	`내보낼 기록`	보이는 caption = 표 이름.
`columns`	`readonly { key, label, rowHeader?, sortable?, align? }[]`	—	열. rowHeader 열은 <th scope="row">. 미리보기는 제목·출처·날짜.
`rows`	`readonly { id, cells, sortValues? }[]`	—	행. 칸이 글자·숫자가 아니면 sortValues로 정렬 키를 준다.
`sortable?`	`boolean`	`false`	sortable 열에 정렬 버튼을 단다(없음 → 오름 → 내림).
`sort?`	`'none' \| 'asc' \| 'desc'`	`none`	첫 sortable 열의 처음 정렬.
`selectable?`	`boolean`	`false`	첫 열 체크박스 + 머리의 “모두 선택”(일부면 mixed). 선택 수는 SelectionBar가 알린다.
`state?`	`CatalogDataState`	`ready`	데이터 상태(README §4).
`onSortChange?: (key, sort) => void`	—	—	정렬을 바꾸면 호출. polite로 “제목 오름차순 정렬”을 알린다(cb:announce).
`onSelectionChange?: (ids) => void`	—	—	선택이 바뀌면 호출.
`@container`	—	—	좁은 폭(≈320)에서는 표 대신 카드 목록(행 = <dl>)이 보인다.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29

내보낼 기록

Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29

caption

sortable

sort

selectable

state

예시

상태

기본
내보낼 기록
Title Source Date
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
정렬
내보낼 기록
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
선택
내보낼 기록
Title Source Date
3분기 로드맵 검토 회의 Google Calendar Oct 8
Re: Pricing page copy Gmail Oct 7
디자인 시스템 v4 킥오프 Notion Sep 29
내보낼 기록
Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29
비어 있음
내보낼 기록
Title Source Date
No rows to show.
내보낼 기록
No rows to show.
불러오는 중
내보낼 기록
Title Source Date
내보낼 기록
…

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29

내보낼 기록
Title	Source	Date
No rows to show.

일부만 읽음

내보낼 기록
Title	Source	Date
3분기 로드맵 검토 회의	Google Calendar	Oct 8
Re: Pricing page copy	Gmail	Oct 7
디자인 시스템 v4 킥오프	Notion	Sep 29
Some dates couldn’t be scanned. What we got is kept.

내보낼 기록

Title
3분기 로드맵 검토 회의
Source
Google Calendar
Date
Oct 8
Title
Re: Pricing page copy
Source
Gmail
Date
Oct 7
Title
디자인 시스템 v4 킥오프
Source
Notion
Date
Sep 29

Some dates couldn’t be scanned. What we got is kept.

이렇게 · 이렇게 하지 않기

이렇게 내보내기 미리보기처럼 열 비교가 필요할 때만 쓴다.
이렇게 하지 않기 사람이나 팀원을 순위로 정렬하는 표는 만들지 않는다.
이렇게 320px에서는 카드형으로 바꾼다.
이렇게 하지 않기 행 재정렬을 애니메이션하지 않는다. 화살표 셀 이동(그리드 키보드)을 두지 않는다.

토큰과 속성

이름	타입	기본값	설명
`caption`	`string`	`내보낼 기록`	보이는 caption = 표 이름.
`columns`	`readonly { key, label, rowHeader?, sortable?, align? }[]`	—	열. rowHeader 열은 <th scope="row">. 미리보기는 제목·출처·날짜.
`rows`	`readonly { id, cells, sortValues? }[]`	—	행. 칸이 글자·숫자가 아니면 sortValues로 정렬 키를 준다.
`sortable?`	`boolean`	`false`	sortable 열에 정렬 버튼을 단다(없음 → 오름 → 내림).
`sort?`	`'none' \| 'asc' \| 'desc'`	`none`	첫 sortable 열의 처음 정렬.
`selectable?`	`boolean`	`false`	첫 열 체크박스 + 머리의 “모두 선택”(일부면 mixed). 선택 수는 SelectionBar가 알린다.
`state?`	`CatalogDataState`	`ready`	데이터 상태(README §4).
`onSortChange?: (key, sort) => void`	—	—	정렬을 바꾸면 호출. polite로 “제목 오름차순 정렬”을 알린다(cb:announce).
`onSelectionChange?: (ids) => void`	—	—	선택이 바뀌면 호출.
`@container`	—	—	좁은 폭(≈320)에서는 표 대신 카드 목록(행 = <dl>)이 보인다.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다.

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기