보호되어 있는 글입니다.

내가 이번에 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:/..

오늘은 이렇게 ag grid에서 수정 버튼을 누르면 select box가 활성화되어 값을 변경할 수 있도록 구현해보겠습니다 1. cell Renderer 지정해주기 애초에 데이터를 받아올 때 휴직, 재직이라는 값을 받아와서 select box의 value로 넣어주어야합니다. 꼭 그래야한다는 건 아니고 그러고 싶다는 뜻 import { MenuItem, Select } from '@mui/material'; import clsx from 'clsx'; import React, { useState } from 'react'; import UserStyles from '../User.style'; const CellSelectRenderer = params => { const user_classes = Use..

버튼으로 row 전체를 수정 상태로 바꾸고 싶다. 그리고 delete를 누르면 행이 삭제됐으면 좋겠다. 어떻게 하는지 살펴보자. 1. defaultColDef에 editable: true 설정 여기서 설정한 defaultColDef는 아래에 gridOptions에 들어간다. 2. gridOptions에서 아래의 설정 추가 gridOptions에는 그리드에 대한 전반적인 설정들이 들어가는데, 그중에서 row전체를 버튼으로 제어를 하고 싶으면 아래의 설정들을 모두 넣어준다. ag grid는 클린코드라서 그런지 함수명만 보고도 행동이 이해가 간다. 오늘도 클린코드의 중요성을 느낀다. 3. AgGridReact 컴포넌트에 props로 넣어주기 여기서 actionCellRenderer은 버튼 렌더링하는 컬럼에 필..

ag grid를 이용하여 그리드 페이지를 제작하는 중! 페이지를 떠났을때 마지막으로 테이블을 변경한 이력이 자동으로 저장되고, 다시 그 페이지를 들어왔을 때 저장된 테이블 변경 상태가 적용된 채로 보여지기를 원했다. 이것을 성공하여 기쁜 마음에 글을 쓴다! 1. filter, column state 저장 save 버튼을 만들고 싶지 않았기 때문에 filter와 column state 를 저장하는 방법은 2가지가 있었다. (column state 는 어딘가에 저장하지 않아도 자동으로 저장됨) 1) filter가 변경이 있을 때마다 저장하기 2) 페이지를 떠날때 저장하기 내가 만드는 서비스는 컬럼 수가 거의 20~30개 정도로 많고 filter가 변경될 가능성이 많았기 때문에 2번째 방법을 선택했다. use..