단지 표
검색 결과 단지 표예요. 정렬 · 컬럼 편집 · 필터를 함께 써요.
모바일PCRankingTable실제 데이터 · 2026-11 기준
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 정렬·열 고르기가 있는 표. 단지 표가 기준이에요.
인터페이스#
타입에서 자동으로 뽑은 표예요.
RankingTable#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| rows* | - | Row[] | |
| series* | - | any | |
| brands* | - | any | |
| query* | - | string | |
| onPick* | - | (r: Row) => void | |
| activeId | - | string | |
| regions | [] | string[] | |
| onClearQuery | - | () => void | |
| setRegions | - | (r: string[]) => void | |
| regionTree | - | RegionTree | |
| favs | - | Set<string> | |
| onFav | - | (cid: string) => void | |
| rightSlot | - | ReactNode | |
| leftSlot | - | ReactNode | |
| bare | - | boolean | |
| fill | - | boolean | |
| compareIds | - | string[] | |
| onToggleCompare | - | (cid: string) => void | |
| compareHint | - | boolean | |
| comparePick | - | boolean | 이 모드에선 **행 자체가 담기**라, 행을 누른 사람이 상세를 기대하지 않게 해야 한다. |
| edge | - | boolean | |
| initialBrand | - | string | |
| initialBuilder | - | string | |
| initialSort | - | { k: SortKey; dir: number; } | |
| bridge | - | {} | |
| brandFilters | - | string[] | |
| setBrandFilters | - | Dispatch<SetStateAction<string[]>> | |
| builderFilters | - | string[] | |
| setBuilderFilters | - | Dispatch<SetStateAction<string[]>> | |
| filterHidden | - | boolean | |
| onFilterClick | - | () => void | |
| filterBtnRef | - | ((instance: HTMLButtonElement | null) => void | (() => void | { [UNDEFINED_VOID_ONLY]: n… | |
| filterCount | - | number | |
| rankMap | - | Map<string, Signal[]> | |
| cols | - | ColDef[] | |
| lens | - | Lens | |
| selectedBadges | - | string[] | |
| previewCap | - | number | rows는 전량이 아니라 **각 지평 상위 cap행의 합집합**이다. 기본 정렬일 때 앞 cap행만 전량과 같으므로 |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 정렬 머리는 버튼이고 지금 순서를 aria-sort로 알려요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |