Filter Usage
사용자가 조건을 설정해 원하는 정보만 볼 수 있도록 합니다.
Layout
Placement
원칙적으로 정렬 기준에 따라 Filter 아이콘 버튼이 좌측 정렬에 기반할 경우 popover도 동일하게 좌측 정렬로 열려야 하지만, narrow view 경우 등 화면 내 충분한 공간이 없을 때는 버튼 기준 우측 정렬로 popover가 열릴 수 있습니다.
Content
Filter Count
데이터 필터가 적용된 경우 적용된 항목의 개수를 Filter 아이콘 버튼 위에 counter badge를 사용하여 항목 개수를 표기합니다.
Simple Filter
Simple data filter에서의 항목은 필터링이 적용된 accordion 단위로 표기합니다.
아코디언으로 구성된 column 기준의 항목 개수를 counter label에 표현합니다.
개별 아코디언에 포함된 항목 개수로 필터링 항목을 세지 않습니다.
Advanced Filter
Advanced filter에서는 condition 개수를 기반으로 filter 항목 개수를 결정합니다.
Condition 개수 기준으로 항목 개수를 판단하여 counter label에 표현합니다.
Column 기준으로 항목 개수를 세지 않습니다.
Simple Filter Conditions
Simple filter popover에서는 column 별 AND 조건 설정이 가능합니다.
Radio button을 통한 항목 선택 옵션이 주어질 때는 최대 4개 항목까지 표현하고, View more 버튼을 통해 전체 항목을 노출할 수 있습니다. View more 버튼은 숨겨진 항목의 개수를 포함하여 추가로 펼쳐질 항목의 개수를 사용자가 예상할 수 있도록 합니다.
Advanced Filter Conditions
Advanced filter popover에서는 다중 조건 필터링을 수행할 때는 condition 간의 상관관계 설정이 필요합니다. 추가된 condition이 두 개 이상일 때 AND 또는 OR 관계로 조건을 설정할 수 있습니다. 기본으로 AND가 제공됩니다.
Condition이 세 개 이상 설정될 때는 최초에 설정된 관계를 따라가며, 관계 수정은 두 번째 condition에서만 가능합니다.
그 외 추가적인 condition에서의 relation은 변경할 수 없도록 Select가 비활성화됩니다.
단일 항목에 대한 필터링이 이루어질 경우 하단의 액션 버튼 그룹은 노출되지 않습니다.
Behaviors
Interactions
Data Filtering
설정된 필터가 없는 상태에서 Filter 아이콘 버튼을 누르면 simple data popover가 열립니다.
각 항목에 필터가 적용된 경우, column title 오른쪽에 funnel icon이 노출되며 Remove 아이콘 버튼이 accordion title 오른쪽에 제공됩니다. Remove 아이콘 버튼을 클릭하면 해당 column에 해당하는 필터 조건이 해제됩니다.
Simple data filter의 하단에 위치한 Set up Advanced Filters 버튼을 클릭하면 advanced data filter로 대체됩니다.
이때, simple data filter에서 설정된 값은 그대로 이관되어서 보입니다. Simple data filter에서 accordion으로 묶여진 각 column에 대한 관계는 advanced data filter에서는 AND 조건으로 설정합니다.
Popover 왼쪽 하단에 위치한 + Add Condition 버튼을 눌러 condition을 추가할 수 있습니다. 새로 추가된 condition의 Column과 Operator Select에는 가장 상위 항목이 기본 선택되어 있습니다.
각 condition을 Remove 아이콘 버튼으로 삭제하거나, popover 우측 하단의 Remove All 버튼으로 모든 항목을 삭제하여 필터링 설정을 초기화할 수 있습니다.
Advanced data filter에서 condition을 모두 삭제하여 초기화된 상태에서 Filter 아이콘 버튼을 클릭하면 다시 simple data filter를 사용하여 필터링을 할 수 있습니다.
Column Filtering
Column filter 버튼을 클릭하여 각 column에 대한 노출 여부를 설정할 수 있습니다. Switch가 켜진 항목만 data grid에 노출됩니다. 고정 노출된 column의 경우 switch가 비활성화되어 제공됩니다.
