table row search function 만들기

 

React로 웹 페이지를 만드는데

테이블 검색 기능이 필요했다.

구글에 좀 찾아보니 아예 검색 기능이 제공되는 테이블을 쓰는게 편해보여서

바꾸니까,, 커스텀 해야하는 것들이 성가셔서 직접 만들기로 결정했다.

 

 

 

 

 

테이블이 아래와 같을 경우

검색을 한다면,

이메일과 이름 컬럼을 필터링 해야한다.

 

검색 필터 주요 부분이다.

input은 검색 TextField의 값이고

d는 사용자 정보 객체를 담은 배열이다.

d = [{id=1, email:'test@test.com', name: '테스터'}, {id=3, email:'test1@test.com', name: '테스터1'}]

const filtered = data.filter( d => 
	d.email.indexOf(input) != -1 ||
	d.name.indexOf(input) != -1
);

 

검색 필드에 onChangeHandler()를 연결해서

전달받은 키워드를 가지고 검색로직을 수행하고 업데이트를 하면 된다.