그리드 필터를 헤더 아래에 인라인 형태의 인풋으로 출력한 모습입니다.(showInlineFilter : true 설정)
인풋에 값 입력 시 실시간 필터링을 하게 됩니다.
데모는 사용자가 값 입력 후 300ms 이후 필터링을 하도록 설정하였습니다.
// 그리드 칼럼 레이아웃 설정
const columnLayout = [ {
dataField : "name",
headerText : "Name",
filter : {
inline : true // 인라인 필터 input 표시
},
....
// 그리드 속성 설정
const gridProps = {
// 필터링 가능 여부
enableFilter : true,
// 인라인 필터 행을 표시할지 여부
showInlineFilter : true