ReactJs Material-Table 필터 옵션 표시 / 숨기기 방법

Aug 21 2020

데이터 테이블을 표시하기 위해 reactJS 애플리케이션에 material-Table 플러그인을 사용하고 있습니다.

열에 필터링을 표시해야합니다. 그러나 필터링 = true를 활성화하면 제목 아래의 헤더 섹션에 하나 이상의 행이 생성됩니다. 불필요한 공간을 차지하고 항상 표시됩니다.

필터 섹션을 숨기고 싶습니다. 열 옆에 필터 아이콘을 표시하고 클릭하면 필터링 텍스트 줄을 표시 할 수 있습니다. 이 옵션이 관형 반응 테이블에있는 것을 보았습니다. 하지만 머티리얼 테이블로 할 수 있습니까?

답변

2 Domino987 Aug 31 2020 at 02:05

기본적으로 지원되지는 않지만 필터링 상태를 useState에 저장하고이를 true로 설정하면 다음과 같이 테이블을 업데이트합니다.

function Table(){
    const [filtering, setFiltering] = React.useState(false);
    retrun <div>
           <MaterialTable options={{filtering}}/>
           <button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
          </div>
}
1 AmitG Sep 01 2020 at 05:37

그래서 해결책은 아래와 같이 나왔습니다. (나는 수업을 사용하고 있습니다)

Material-table에서 필터 버튼을 추가해야합니다. 필터 섹션을 토글합니다. options = {{Filtering : this.state.filter}}도 추가하십시오. 또한 플래그를 토글하기 위해 작은 함수를 정의해야합니다.

options={{Filtering: this.state.filter}   
 actions={[
               {
                 icon: 'filter',
                 tooltip: 'Enable Filter',
                 isFreeAction: true,
                 onClick: (event) => { this.functionName(!this.state.filter)}
                                  }
                                ]}