[REACT] keep filter and restore on ag grid with react, redux/ ag grid에서 filter, column 정보 저장하고 불러오기

 

ag grid를 이용하여 그리드 페이지를 제작하는 중!

페이지를 떠났을때 마지막으로 테이블을 변경한 이력이 자동으로 저장되고,

다시 그 페이지를 들어왔을 때 저장된 테이블 변경 상태가 적용된 채로 보여지기를 원했다. 

이것을 성공하여 기쁜 마음에 글을 쓴다!

 

 

 

 

---

1. filter, column state 저장

save 버튼을 만들고 싶지 않았기 때문에 filter와 column state 를 저장하는 방법은 2가지가 있었다. 

(column state 는 어딘가에 저장하지 않아도 자동으로 저장됨)

1) filter가 변경이 있을 때마다 저장하기

2) 페이지를 떠날때 저장하기

 

내가 만드는 서비스는 컬럼 수가 거의 20~30개 정도로 많고 

filter가 변경될 가능성이 많았기 때문에 2번째 방법을 선택했다. 

 

  useEffect(() => {
    return () => {
      if (gridApi && gridColumnApi) {
        saveState()
      }
    }
  },[gridApi, gridColumnApi])

 

(1번 방법)

  onFilterChanged={saveState}
  onColumnMoved={saveState}

 

page가 unmount될때  saveState() 를 실행했다. 

 

  const saveFilterModel = () => {
    const savedFilterModel = gridApi.getFilterModel();
    setTableFilter(savedFilterModel);
     dispatch(saveTableState(location.pathname, savedFilterModel));
  };


  const saveState = () => {
    window.colState = gridColumnApi.getColumnState();
    saveFilterModel();
  };

saveFilterModel은 리덕스에 filter정보를 저장하는 코드가 있고,

saveState 함수의 첫번째 줄은 컬럼 정보를 저장하는 것이다. 

컬럼 정보는 리덕스에 저장하지 않아도 자동으로 불러올 수 있다.

 

 

 

 

 

 

2. filter,column restore하기

다시 불러오는 코드에서 아주아주 오랜 시간이 걸렸다. 

이렇다 저렇다 하는 방법들이 많았기 때문 ㅠㅠ

 

리덕스에 저장했던 정보를 페이지에 진입했을 때 바로 테이블에 적용시키는 방법은

useEffect로 조건을 걸어주고 할 수도 있지만 좋은 방법이 하나 있다. 

 

 onFirstDataRendered={onFirstDataRendered}

 

AgGridReact 에 onFirstDataRendered 함수를 써주는 것이다. 

  const onFirstDataRendered = (params) => {
      restoreState(저장된 필터 정보)
  }

여기에 restoreState 함수를 써준다.

 

 const restoreFilter = (tableFilter) => {
    if (tableFilter) {
      const tableFilterKeys = Object.keys(tableFilter);
      tableFilterKeys.map(p => {
        var FilterComponent = gridApi.getFilterInstance(p);
       gridApi.setFilterModel(tableFilter)
      });
        gridApi.onFilterChanged();
    } else {
      console.log('filter is not exist');
    }
    };
  
  const restoreState = (tableFilter) => {
    if (!window.colState) {
      console.log('no columns state to restore by, you must save state first');
      return;
    }
    gridColumnApi.applyColumnState({
      state: window.colState,
      applyOrder: true,
    });
    restoreFilter(tableFilter);
  };

이렇게 쓰면 작동함!!!!!!!

 

 

 

 

 

 

3. reset

  const resetState = () => {
    gridColumnApi.resetColumnState();
    gridApi.setFilterModel(null);
  };

 

reset 하는 법은 쉽다 ^^

 

 

 

 

[참고]

 

https://blog.ag-grid.com/persisting-ag-grid-state-with-react-redux/

Persisting and restoring ag-Grid state with React & Redux

이 페이지에 가면 작동 화면 볼 수 있음!