선택 · 일괄 처리 · 상세 · Polaris

활용 방법

목록과 일괄 처리 바

줄을 하나라도 고르면 목록 아래에 개수, 처리 단추, 선택 해제 단추가 있는 바가 나타난다. 머리칸 체크박스는 일부만 골랐을 때 대시로 표시된다.

품목	상태	금액
볼트 M8	대기	₩96,000
너트 M8	대기	₩40,000
와셔 8mm	승인	₩30,000
볼트 M10	대기	₩128,000
앵커 볼트	반려	₩54,000

tsx

<SelectionProvider ids={rows.map((row) => row.id)}>
  <Panel title="발주 요청" count={`${rows.length}건`} flush>
    <DataTable minWidth={560}>
      <thead>
        <tr>
          <th><SelectAllCheckbox /></th>
          <th>품목</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <SelectableRow key={row.id} id={row.id}>
            <td><RowCheckbox id={row.id} label={row.name} /></td>
            <td>{row.name}</td>
          </SelectableRow>
        ))}
      </tbody>
    </DataTable>
  </Panel>
  <BulkBar noun="건">
    <OrderBulkActions />
  </BulkBar>
</SelectionProvider>

// 클라이언트 컴포넌트
function OrderBulkActions() {
  const { selectedIds, clear } = useSelection();
  return <BulkBarButton onClick={() => approve(selectedIds).then(clear)}>승인</BulkBarButton>;
}

검색으로 줄이 바뀔 때

ids 에서 빠진 줄의 선택은 버린다. 검색으로 숨긴 줄은 일괄 처리 대상이 아니고, 검색을 지워 다시 보여도 선택되지 않은 상태로 돌아온다.

품목	상태	금액
볼트 M8	대기	₩96,000
너트 M8	대기	₩40,000
와셔 8mm	승인	₩30,000
볼트 M10	대기	₩128,000
앵커 볼트	반려	₩54,000

tsx

const rows = allRows.filter((row) => row.name.includes(query));

<SelectionProvider ids={rows.map((row) => row.id)}>
  <Panel toolbar={<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} />} flush>
    …
  </Panel>
</SelectionProvider>

사용 지침

· 표는 서버 컴포넌트로 두고 체크박스, SelectableRow, BulkBar 만 클라이언트 경계 안에 둔다.
· 일괄 처리는 화면에 보이는 줄에만 적용된다. 모든 쪽을 한 번에 고르는 선택은 제공하지 않는다.
· 처리가 끝나면 useSelection() 의 clear 로 선택을 비워 바를 닫는다.
· 선택 상태는 SelectionProvider 가 가진다. 바깥에서 선택을 정해 넣는 controlled 사용은 지원하지 않는다.

속성

이름	타입	기본값	설명
SelectionProvider ids	readonly string[]	-	지금 보이는 줄의 id. 전체 선택의 대상이고, 바뀌면 빠진 id 의 선택을 버린다
useSelection()	{ selectedIds: string[]; count: number; clear: () => void }	-	고른 id(화면 순서), 개수, 선택 해제. SelectionProvider 밖에서 부르면 오류
SelectAllCheckbox label	string	-	접근 가능한 이름. 보이는 글자는 그리지 않는다. 기본 「모두 선택」
RowCheckbox id · label	string · string	-	선택 키와 줄 이름. 접근 가능한 이름은 「label 선택」
SelectableRow id	string	-	선택 키. DOM id 가 아니다. 선택되면 tr 에 data-selected 를 붙인다. 나머지 tr 속성과 ref 전달
BulkBar noun	string	-	개수 뒤 단위. 기본 「개」. 0개면 바를 그리지 않는다. className · native props · ref 는 바깥 div 에 적용
BulkBarButton	button 속성	-	바 안의 단추. type 기본값 button. ref 전달

선택 · 일괄 처리

활용 방법

목록과 일괄 처리 바

발주 요청5건

검색으로 줄이 바뀔 때

발주 요청5건

사용 지침

속성