AG Grid 36.2 · AG Charts 14.2에서
추가된 신기능 소개
36.1이 개발자와 AI 에이전트 쪽을 손봤다면, 이번 릴리스는 화면을 쓰는 사람 쪽입니다. 그리드 안의 데이터를 꺼내고, 걸러 내고, 나눠 보는 방법이 늘었습니다.
AG Grid 36.2와 AG Charts 14.2가 2026년 9월 16일 함께 나왔습니다. 두 제품을 한 글에 묶은 이유는 릴리스가 같은 날이어서만은 아닙니다. 그리드에서는 데이터를 밖으로 꺼내는 일과 걸러 내는 일이, 차트에서는 데이터를 구획으로 나눠 보는 일이 나란히 좋아졌습니다.
한눈에
- AG Grid 36.2 — PDF 내보내기 기본 내장, 고급 필터에서 Set 필터·사용자 정의 필터 옵션 사용, 연속 열 너비 자동 맞춤, Columns 도구 패널 항목 사용자 렌더러.
- AG Charts 14.2 — 사분면 차트, 배경 영역, 추가 클릭 이벤트, 개발 시점 설정 검증.
- 두 제품 모두 품질 개선이 함께 들어갔습니다.
PDF로 바로 내보냅니다
지금까지 그리드 화면을 PDF로 남기려면 외부 라이브러리를 붙이고, 열 너비와 서식을 다시 계산하고, 인쇄용 레이아웃을 따로 짜야 했습니다. 보고서 한 장을 뽑자고 의존성이 하나 더 늘어나는 셈이었습니다.
36.2부터는 PDF 내보내기가 그리드에 들어 있습니다. 별도 설치 없이 기본으로 켜져 있고,
엔터프라이즈 컨텍스트 메뉴에서 바로 쓰거나 그리드 API의 exportDataAsPdf()를
부르면 됩니다.
중요한 점은 지금 화면에 구성된 그대로 나간다는 것입니다. 사용자가 숨긴 열, 걸어 둔 정렬과 필터, 그룹 상태가 그대로 반영됩니다. 서식·언어·포함할 내용·이미지는 설정으로 조정합니다. 다만 화면 캡처가 아니므로 브라우저가 그리는 모든 시각 요소를 픽셀 단위로 재현하지는 않습니다.
고급 필터가 Set 필터를 받습니다
고급 필터(Advanced Filter)는 여러 열을 하나의 식으로 묶어 거르는 기능입니다. 지금까지 이 식에서는 텍스트·숫자·날짜 조건만 쓸 수 있었습니다. 목록에서 값을 골라 거르는 Set 필터는 열 필터에서만 되고, 식 안으로는 들어오지 못했습니다.
36.2에서는 고급 필터 식에서 Set 필터 값을 그대로 씁니다. is any of와
is none of 두 가지 옵션이 생겼고, 해당 열의
filterParams.filterOptions에 넣어 켭니다.
"지역이 서울·경기 중 하나이면서 금액이 1천만 원을 넘는 건" 같은 조건이 식 하나로 끝납니다.
같은 맥락에서 사용자 정의 필터 옵션도 고급 필터 안으로 들어왔습니다. 열에 직접 정의해 둔 필터 옵션을 고급 필터 식에서 똑같이 쓸 수 있습니다. 업무 규칙을 담은 자체 조건을 두 곳에 각각 만들 필요가 없어졌습니다.
열 너비가 계속 따라옵니다
autoSizeStrategy는 처음 그릴 때 한 번 열 너비를 맞춰 주는 설정이었습니다.
그 뒤에 행 데이터가 바뀌거나 열이 추가되거나 창 크기가 달라지면 정렬이 어긋났고,
그때마다 개발자가 다시 호출해야 했습니다.
36.2에서는 continuous: true 한 줄이면 됩니다. 열 너비에 영향을 주는 변화가
생길 때마다 그리드가 알아서 다시 맞춥니다. 실시간으로 값이 바뀌는 대시보드나
화면 분할이 잦은 업무 화면에서 손이 덜 갑니다.
Columns 도구 패널 항목을 직접 그립니다
Columns 도구 패널의 열 목록은 지금까지 열 이름만 나오는 자리였습니다.
36.2부터는 columnLabelRenderer와 columnLabelRendererParams로
그 항목을 직접 그립니다. 아이콘, 단위, 데이터 출처 표시 같은 것을 붙일 수 있습니다.
체크박스와 드래그 핸들 같은 기본 조작은 그대로 남습니다. 목록 전체를 다시 만드는 것이 아니라 라벨 부분만 바꿔 끼우는 방식이라, 기존 동작을 잃지 않습니다.
AG Charts 14.2 — 네 칸으로 나눠 보기
같은 날 나온 AG Charts 14.2의 중심은 사분면 차트입니다. 기준점 하나를 두고 화면을 네 구역으로 나눈 뒤, 구역마다 다른 서식을 줍니다. 원문이 든 예는 운영 리스크 평가입니다 — 가로축에 발생 가능성, 세로축에 영향도를 두면 "가능성도 높고 영향도 큰" 항목이 한 구역에 모입니다.
createQuadrantChart API로 만들고 xKey·yKey를 줍니다.
labelKey는 선택이고, 기준점 좌표·마커 크기·축 서식을 설정합니다.
두 번째는 배경 영역입니다. 기존 크로스라인이 선 하나였다면, 이번에는
가로·세로 양쪽 값 범위로 묶인 사각형 구역을 칠합니다. backgroundRegions에
xRange와 yRange를 주고 라벨과 서식을 붙이면 됩니다.
저수지 수위 그래프에서 가뭄 구간을 칠하는 식으로, 숫자만으로는 보이지 않는 맥락을 화면에 남깁니다.
세 번째는 클릭 이벤트 확장입니다. 축, 크로스라인, 캡션에 리스너를 달 수 있습니다.
축의 특정 구간을 눌러 그 구간 데이터만 고르거나, 크로스라인을 눌러 값을 바로 고치거나,
캡션을 눌러 근거 문서로 보내는 것이 됩니다. 겹쳐 있는 요소를 눌렀을 때
무엇이 함께 잡혔는지 보려면 allMatchedParams를 씁니다.
설정이 틀린 것을 개발 중에 잡습니다
AG Charts 14.2에는 개발 시점 검증이 들어왔습니다. 설정이 잘못되었을 때
화면에 오버레이로 띄우거나, 콘솔에 남기거나, 아예 실행을 멈추게 할 수 있습니다.
validations 속성의 showOverlayOn·consoleOn·throwOn
세 가지로 켭니다. 경고와 폐기 예정 항목도 함께 알려 줍니다.
AG Grid는 이 기능의 쓰임새로 AI 에이전트를 먼저 들었습니다. 코딩 에이전트가 최신 API를 모른 채 옛 설정을 써 넣으면, 화면은 그냥 비어 보입니다. 검증이 켜져 있으면 그 자리에서 무엇이 틀렸는지 말해 줍니다.
미래웹의 관점
- PDF 내보내기는 국내 업무 화면에서 체감이 가장 큰 항목입니다. 그리드 내용을 결재 문서로 남기는 요구가 흔한데, 지금까지는 그때마다 별도 라이브러리와 인쇄용 화면을 따로 만들었습니다. 그 작업이 한 줄로 줄어듭니다.
- 고급 필터의 Set 필터 지원은 현업 사용자에게 돌아가는 기능입니다. 개발자가 화면마다 조건을 미리 짜 두지 않아도, 쓰는 사람이 식을 조합해 원하는 집합을 만듭니다.
- 차트 쪽 개발 시점 검증은 36.1의 ag-dev 스킬과 같은 줄기입니다. AI가 쓴 설정이 조용히 틀리는 문제를, 벤더가 제품 기능으로 막기 시작했다는 뜻입니다.
- 사분면 차트는 리스크 평가·제품 포트폴리오·고객 분류처럼 "두 축으로 나눠 보는" 보고서에 바로 씁니다. 지금까지 산점도에 선을 그어 흉내 내던 화면을 정식 기능으로 바꿀 수 있습니다.
AG Grid Enterprise·AG Charts 라이센스 구성과 버전 업그레이드 검토는 국내 공급사인 미래웹으로 문의해 주십시오.
이 글은 AG Grid 공식 블로그 게시물 What's New in AG Grid 36.2 (James Swinton-Bland · Kiril Matev · 2026년 9월 16일)와 What's New in AG Charts 14.2 (James Swinton-Bland · David Glickman · 2026년 9월 16일)를 미래웹 주식회사가 한국어로 옮겨 하나로 묶은 것입니다. 「미래웹의 관점」 항목은 원문에 없는 미래웹의 해설입니다. 대표 이미지는 미래웹이 만든 것이며, 그 안의 AG Grid 로고는 AG Grid 의 상표입니다. 본문의 기능 시연 화면과 그림은 AG Grid 릴리스 뉴스레터에 실린 것으로 저작권은 AG Grid 에 있으며, 원본 GIF 시연은 페이지 용량을 줄이기 위해 같은 화면의 동영상으로 옮겨 실었습니다. 각 그림 아래의 실행 예제·문서 링크는 AG Grid 공식 주소입니다.