[REACT] AG GRID 를 구현하는데에 필요한 정보들!

내가 이번에 ag grid를 쓰면서 구현하는데 참고했던 자료들 모음zip~

 

1. external filter

그리드 바깥의 버튼이나 검색바로 그리드의 컬럼에 필터를 집어넣는 방법

 

참고 : http://54.222.217.254/javascript-grid-filtering/

https://www.ag-grid.com/react-data-grid/filter-external/

https://www.ag-grid.com/react-data-grid/filter-api/#example-get--set-all-filter-models

 

 

 

2.  redux 연결

그리드와 리덕스 연결하는 방법

참고 : https://ag-grid.com/react-data-grid/redux-integration-pt1/

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

https://codesandbox.io/s/black-platform-cxst6?from-embed=&file=/src/reducers/gridReducer.jsx

 

 

3.  그리드 탭

탭마다 다른 그리드 보여주기

 

참고 : https://codesandbox.io/s/black-platform-cxst6?from-embed=&file=/src/reducers/gridReducer.jsx

 

 

4.  row수정, 삭제

row 정보 수정, 삭제

 

참고 : https://plnkr.co/edit/8bik102emjRrFO3w?preview

https://codesandbox.io/s/zealous-lederberg-sdlw2?from-embed=&file=/main.js

2022.02.21 - [WEB/REACT] - [REACT] ag grid full row editing , delete/ ag grid row 수정, 삭제

 

 

5. row 추가

빈 행 추가

참고: https://medium.com/codalyze/4-ag-grid-adding-rows-deleting-rows-column-groups-sizing-moving-pinning-dc394c163713

 

 

6. cell 에 select box 넣기

cellRenderer로 selectbox 렌더링하기

참고 : 2022.02.23 - [WEB/REACT] - [REACT] ag grid editable select box renderer

 

 

 

 

7. cell validation

cell에 validation넣기

참고: https://blog.ag-grid.com/user-input-validation-with-ag-grid/

 

 

8. filter정보 저장하고, 컬럼 정보 저장, 불러오기

다른페이지로 갔다가 다시 돌아와도 컬럼 정보를 저장할 수 있도록 만들기

 

참고:

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