tabulator - headerFilter select 정렬, 정확히 일치

Defulat

아래와 같이 tabulator 를 사용할 때 headerFilter 를 select 타입으로 지정할 수 있다.

    var columns = [
        {title:"브랜드", field:"BRAND", hozAlign:"center", headerFilter:"select", headerFilterParams:{values:true}, topCalc:setTopTitle},
        {title:"시즌", field:"YEAR_CODE", hozAlign:"center", headerFilter:"select", headerFilterParams:{values:true}},
        {title:"계절", field:"SEASON", hozAlign:"center", headerFilter:"select", headerFilterParams:{values:true}},
        {title:"D1", field:"NM1", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true}},
        {title:"D2", field:"NM2", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true}},
        {title:"D3", field:"NM3", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true}},
        // ...(생략)...
    ]

tabulator headerFilter

 

문제점

그런데 이대로 운영하기에는 두가지 어색한 부분이 있다.

1. 가나다 순으로 정렬되어 있지 않아서 항목을 찾기가 힘들다.
2. select 임에도 부분 검색이 된다(예 : 커버 선택 시 베개커버, 쿠션커버 등이 함께 필터링).

 

처리

이 경우 sortValuesList 속성과 headerFilterFunc 속성을 설정해 주면 된다.

    var columns = [
		// ..(생략)..
        {title:"D1", field:"NM1", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true}},
        {title:"D2", field:"NM2", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true, sortValuesList:"asc"}, headerFilterFunc:"="},
        {title:"D3", field:"NM3", hozAlign:"left", headerFilter:"select", headerFilterParams:{values:true, sortValuesList:"asc"}, headerFilterFunc:"="},

 

 

 

참고문헌 및 관련링크.

1. tabulator - Filtering Data
2. github - Sorting headerFilterParams