본문으로 건너뛰기

SelectionBar

여러 행을 고르면 하단에 일괄 행동을 표시.

라이브러리 전용

이렇게 · 이렇게 하지 않기

이렇게 선택 수, 행동 최대 3개, 취소를 둔다. 일괄 삭제는 ConfirmDialog를 거친다.
이렇게 하지 않기 일괄 “검토함” 처리는 만들지 않는다(검토는 사람이 항목마다 한다).
이렇게 하지 않기 막대가 나타날 때 초점을 옮기지 않는다.
이렇게 21st 참고: Data Table Row Selection(felipemenezes098 — “3 selected · Clear · Delete”), Data Table(uvain — 선택 수 + 내보내기), Team Members Data Table(olewandowski1 — 역할 변경·제거와 polite 알림). Expandable Action Bar(arihantcodes)와 Multi Button(lucasbassetti)의 hover로 라벨이 펼쳐지는 아이콘 막대는 라벨이 숨어 있어 버렸다.

21st — Data Table Row Selection (felipemenezes098) ↗

토큰과 속성

이름	타입	기본값	설명
`count`	`number`	—	선택한 행 수. 0이면 막대가 사라진다. 미리보기에서는 처음 선택 수(0·1·12 프리셋).
`actions`	`readonly SelectionAction[]`	—	{ id, label, icon?, danger?, loading?, note?, onSelect? } 최대 3개. note는 선택 중 일부에 적용할 수 없는 이유.
`busy?`	`boolean`	`false`	행동 실행 중. loading 표시된 행동은 진행 표시와 초점을 유지하고 나머지는 비활성.
`label?`	`string`		영역 이름. 비우면 “선택한 항목”.
`onClear?: () => void`	—	—	취소 버튼 또는 막대 안 Esc. 초점은 마지막으로 체크한 행으로 돌려준다(부르는 쪽).
`announce() — a11y/announce.ts`	—	—	LiveAnnouncer polite: 선택 수가 바뀌고 500ms 뒤 “3개 선택됨”.
그 밖의 속성	—	—	id, aria-* 등 네이티브 div 속성은 그대로 전달된다. className·style·children은 받지 않는다.