필터
필터 (Filters)
필터는 사용자가 테이블, 데이터 목록, 카드 뷰 등의 콘텐츠를 좁혀 볼 수 있게 하는 기능이에요. 아래 데모들은 다양한 필터 유형을 실제로 어떻게 구현하는지 보여 줘요.
출처: 문서
본문
필터링 데모 (Filtering demos)
각 데모는 노드(서버) 목록을 기준으로 다른 필터 방식을 보여줘요. 공통 데이터는 다음과 같아요: Servers(서버), Threads(스레드), Applications(애플리케이션), Workspaces(워크스페이스), Status(상태), Location(위치).
- US-Node 1 | 5 | 25 | 5 | Stopped | Raleigh
- US-Node 2 | 5 | 30 | 2 | Down | Westford
- US-Node 3 | 13 | 35 | 12 | Degraded | Boston
- US-Node 4 | 2 | 5 | 18 | Needs Maintenance | Raleigh
- US-Node 5 | 7 | 30 | 5 | Running | Boston
- US-Node 6 | 5 | 20 | 15 | Stopped | Raleigh
- CZ-Node 1 | 12 | 48 | 13 | Down | Brno
- CZ-Node 2 | 3 | 8 | 20 | Running | Brno
- CZ-Remote-Node 1 | 1 | 15 | 20 | Down | Brno
- Bangalore-Node 1 | 1 | 20 | 20 | Running | Bangalore
검색 입력 (Search input)
검색 입력 필드로 서버 목록을 즉시 필터링하는 데모예요. 사용자가 입력을 시작하면 테이블 데이터가 자동으로 필터링돼요. (1 - 10 / 10 items)
TS
단일 선택 (Single select)
"All statuses" 같은 단일 선택 메뉴로 상태 값을 하나만 골라 필터링하는 데모예요. (1 - 10 / 10 items)
TS
체크박스 선택 (Checkbox select)
"Location" 같은 속성에 대해 여러 값을 체크박스로 다중 선택해 필터링하는 데모예요. (1 - 10 / 10 items)
TS
속성 검색 (Attribute search)
"Servers" 속성에 대해 속성-값(attribute-value) 형태로 검색/필터링하는 데모예요. (1 - 10 / 10 items)
TS
혼합 선택 필터 그룹 (Mixed select filter group)
상태(Status)와 위치(Location)처럼 서로 다른 선택 유형을 섞은 필터 그룹 데모예요. (1 - 10 / 10 items)
TS
단일 선택 필터 그룹 (Single select filter group)
"All statuses", "All locations" 같은 단일 선택들만으로 구성된 필터 그룹 데모예요. (1 - 10 / 10 items)
TS
패싯 필터 (Faceted filter)
"Filter" 버튼으로 여러 차원(패싯)을 그룹핑한 체크박스 선택 목록을 제공하는 패싯 필터 데모예요. (1 - 10 / 10 items)
TS