React-Admin 리스트에 검색 및 필터 추가하기

Post List에 검색 및 필터를 추가해보겠다

 

먼저 PostFilter 컴포넌트를 추가한다

그리고 PostList 컴포넌트의 List에 filters 속성을 추가해준다

// in src/posts.tsx

const PostFilter = (props) => {
  return (
    <Filter {...props}>
      <TextInput label="Seach" source="q" alwaysOn />
      <ReferenceInput label="User" source="userId" reference="users" allowEmpty>
        <SelectInput optionText="name" />
      </ReferenceInput>
    </Filter>
  )
}

export const PostList = (props) => {
  return (
    <List filters={<PostFilter />} {...props}>
      // ...
    </List>
  )
}

 

 

PostFilter 컴포넌트에서 <TextInput>의 source="q"는 JSONPlaceholder가 제공하는 전체 텍스트 활용을 말한다

alwaysOn는 항상 화면에 나타나도록 설정하는 속성이다

그리고 PostList 컴포넌트의 List에 filters를 추가하면 ADD FILTER 버튼이 생성된다

 

ADD FILTER 버튼을 클릭하면 유저를 검색할 수 있는 SelectBox가 나온다

이는 <ReferenceInput>의 source="userId"와 reference="users"는 user를 검색할 수 있도록 해주었기에 나온것이다

 

검색하고자 하는 텍스트를 입력하고 유저를 선택하면 내가 검색한 텍스트가 있는 유저가 결과로 나온다

 

검색 및 필터 과정을 GIF로 만들었으니 화면 참고는 이걸로~