[AG Grid] AG Grid 검색 및 필터 기능 예제

이번 글에서는 AG Grid 검색 및 필터 기능에 대해 기록한다. 검색 및 필터 기능에 사용되는 것은 컬럼에서의 filter 기능을 사용하면 된다.

---

filter

AG Grid에서 아래와 같이, 각 컬럼에서 데이터를 필터링 하거나 검색을 할 때 아래 input 창이 보인다.

 

아래와 같이, 컬럼에 특정 테스트를 입력했을 때 필터링이 된다.

 

filter에 대한 속성 종류는 아래와 같다.

Filter 종류	내용
agNumberColumnFilter	숫자 비교 필터
agTextColumnFilter	문자열 비교 필터
agDateColumnFilter	날짜 비교 필터
agSetColumnFilter	AG Grid Enterprise 기능에서만 사용 가능

 

그래서, 무료 AG Grid(AG Grid community) 버전에서는 agNumberColumnFilter, agTextColumnFilter, agDateColumnFilter를 사용할 수 있다.

---

소스 코드

소스 코드 적용하는 방법은 크게 2가지가 있다.

 

- 공통적으로 전체 컬럼에 적용

- 부분별 컬럼에 적용

 

1. 공통적으로 전체 컬럼 적용

공통적으로 전체 컬럼에 필터를 적용하는 방법은 defaultColDef에 filter라는 속성을 넣어주면 된다. 위에서 나온 속성 종류를 아래와 같이 추가를 하면 된다.

filter:'agNumberColumnFilter', // 숫자 비교
filter:'agTextColumnFilter',   // 텍스트 비교
filter:'agDateColumnFilter',   // 날짜 비교
filter:'agSetColumnFilter',

defaultColDef: {
	flex: 1,
	minWidth: 200,
	sortable: true,
	resizable: true,
	editable: true,
	floatingFilter: true,
	filter:'agTextColumnFilter',
	floatingFilter: true
},

 

defaultColDef에는 모든 컬럼에 대해서 속성이 적용된다. 아래와 같이 defaultColDef에 넣으면 모든 컬럼에 적용이 된다.

 

 

2. 부분별 컬럼 적용

부분적으로 각 컬럼에 필터를 적용하는 방법은 columnDefs에 filter 속성을 넣어주는 방법이다. 위에서 filter의 속성 그대로 넣어주면 된다.

filter:'agTextColumnFilter'

{headerName:"USERID", field: "USERID", width: 150, minWidth:120, suppressSizeToFit: true, 
suppressMenu: true, sort: 'asc', filter:'agTextColumnFilter'},

 

위와 같이, 공통적으로 적용하지 않으려면 저 filter에 대한 속성을 안넣어주면 된다.

columnDefs: [
	{
		minWidth: 50,
		headerCheckboxSelection: true, // 헤더 컬럼에 체크 박스 기능 추가(2023-01-17, ANDUM)
		checkboxSelection: true, // Row 데이터에 체크 박스 추가(2023-01-17, ANDUM)
	},
	{headerName:"USERID", field: "USERID", width: 150, minWidth:120, suppressSizeToFit: true, suppressMenu: true, sort: 'asc', filter:'agTextColumnFilter'},
	{headerName:"NMLAST", field: "NMLAST", width: 150, minWidth:120, suppressSizeToFit: true, suppressMenu: true, sort: 'asc', filter:'agTextColumnFilter'}
],

위의 코드에서는 체크에 대한 컬럼에 대해 filter 속성을 적용안시키면 필터에 대한 기능을 부분적으로 넣을 수 있다. 

---

참고사항

AG Grid에서 컬럼이 적용될 defaultColDef 적용 후 위의 columnDefs 속성이 적용된다.
즉, defaultColDef에서 정의된 속성이 적용됐는데, columnDefs 속성이 변경되는 경우 columnDefs 속성이 최종으로 적용된다.

 

위의 예시를 들면, 아래의 코드처럼 전체 컬럼에 적용되는 filter가 agTextColumnFilter가 적용이 되는 것으로 했다. 근데, 컬럼을 정의할 때 agNumberColumnFilter로 따로 적용하면 결국에는 agNumberColumnFilter 필터가 적용된다.

defaultColDef: {
                        flex: 1,
                        minWidth: 200,
                        sortable: true,
                        resizable: true,
                        editable: true,
                        floatingFilter: true,
                        filter:'agTextColumnFilter',
                        floatingFilter: true
                    },

{headerName:"NMLAST", field: "NMLAST", width: 150, minWidth:120, suppressSizeToFit: true, suppressMenu: true, sort: 'asc', filter:'agNumberColumnFilter'}

 

그 결과로, 아래에 적용이 되고 한글을 입력하면 NaN(Not a Number)가 나온다.