ag grid 다운로드 - ag grid 소스 코드 다운로드

ag grid

기타 소스코드

다운로드

자바스크립트 데이터 그리드 | 자바스크립트 테이블

AG 그리드 로고

? 웹사이트 • ? 문서 • ?️ 커뮤니티

GitHub 포크

AG Grid는 모든 기능을 갖추고 고도로 사용자 정의 가능한 JavaScript 데이터 그리드입니다. 뛰어난 성능을 제공하고 타사 종속성이 없으며 다음을 지원합니다. 반응하다 , 각도 및 뷰 .

개요

자바스크립트 데이터 그리드 | 자바스크립트 테이블

기업 지원
버그 보고서
질문
기여
도구 및 확장
유리 진열장
몽상가
맞춤 구성요소
테마
맞춤 테마
설치
설정
종자 프로젝트
특징
예
? 개요
⚡️ 빠른 시작
?️ 맞춤 설정
? 지역 사회
? 지원하다
⚠️
특허

AG Grid는 Community와 Enterprise의 두 가지 버전으로 제공됩니다.

ag-grid-community 무료이며 MIT 라이선스에 따라 사용할 수 있으며 정렬, 필터링, 페이지 매김, 편집, 사용자 정의 구성 요소, 테마 지정 등을 포함하여 JavaScript 데이터 그리드에서 기대되는 모든 핵심 기능이 함께 제공됩니다.
ag-grid-enterprise 상업용 라이선스로 제공되며 엔지니어링 팀의 전담 지원 외에도 통합 차트, 행 그룹화, 집계, 피벗, 마스터/세부 사항, 서버 측 행 모델 및 내보내기와 같은 고급 기능이 함께 제공됩니다.

특징

특징	AG 그리드 커뮤니티	AG 그리드 엔터프라이즈
필터링	✅	✅ (고급)
정렬	✅	✅
셀 편집	✅	✅
CSV 내보내기	✅	✅
드래그 앤 드롭	✅	✅
테마 및 스타일링	✅	✅
선택	✅	✅
접근성	✅	✅
무한 스크롤	✅	✅
쪽수 매기기	✅	✅
서버 측 데이터	✅	✅ (고급)
맞춤 구성요소	✅	✅
통합 차트	❌	✅
범위 선택	❌	✅
행 그룹화 및 집계	❌	✅
피벗팅	❌	✅
엑셀 내보내기	❌	✅
클립보드 작업	❌	✅
마스터/디테일	❌	✅
트리 데이터	❌	✅
열 메뉴	❌	✅
상황에 맞는 메뉴	❌	✅
도구 패널	❌	✅
지원하다	❌	✅

ℹ️ 참고:
전체 비교를 보려면 가격 페이지를 방문하세요.

예

우리는 다양한 사용 사례에 걸쳐 AG Grid의 풍부한 기능 세트를 보여주기 위해 여러 가지 데모를 만들었습니다. 아래에서 실제로 작동하는 모습을 보거나 데모 페이지에서 상호 작용하십시오.

금융 데모

실시간 업데이트 및 스파크라인이 포함된 재무 데이터 예시:

라이브 데모 • 소스 코드

인벤토리 데모

제품을 보고 관리하기 위한 재고 데이터 예:

라이브 데모 • 소스 코드

HR 데모

계층적 직원 데이터를 보여주는 HR 데이터 예:

라이브 데모 • 소스 코드

⚡️ 빠른 시작

AG Grid는 설정이 쉽습니다. 데이터를 제공하고 열 구조를 정의하기만 하면 됩니다. 바닐라 JavaScript 설치 지침을 읽어보거나 프레임워크별 가이드를 참조하세요. 반응하다 , 각도 및 Vue.

설치

 $ npm install --ag-grid-community 저장

설정

1. 컨테이너 제공

AG Grid 라이브러리를 로드하고 컨테이너 div를 만듭니다. 데이터 그리드가 상위 컨테이너의 크기를 채우기 때문에 div에는 높이가 있어야 합니다.

 <html lang="en"> <head> <!-- JavaScript Data Grid에 대한 모든 JS 및 CSS를 포함합니다 --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- 데이터 그리드 컨테이너 --> <div id="myGrid" style="height: 500px"></div> </body></html>

2. JavaScript 데이터 그리드 인스턴스화

createGrid 사용하여 컨테이너 div 내부에 데이터 그리드를 만듭니다.

 // 그리드 옵션: 모든 데이터 그리드 구성을 포함합니다.const GridOptions = {};// 데이터 그리드를 생성하기 위한 Javascript 코드const myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, GridOptions);

3. 행과 열 정의

 // 그리드 옵션: 모든 데이터 그리드 구성을 포함합니다.const GridOptions = { // 행 데이터: 표시할 데이터입니다.    rowData: [ { make: 'Tesla', 모델: 'Model Y', 가격: 64950, electric: true }, { make: 'Ford', 모델: 'F-Series', 가격: 33850, electric: false }, { make: 'Toyota', 모델: 'Corolla', 가격: 29600, electric: false }, ], // 열 정의: 표시할 열을 정의합니다.    columnDefs: [{ 필드: 'make' }, { 필드: '모델' }, { 필드: '가격' }, { 필드: '전기' }],};

ℹ️ 참고:
AG Grid를 사용하여 데이터 그리드를 구축하는 방법에 대한 자세한 내용은 설명서를 참조하세요.

종자 프로젝트

또한 일반적인 구성을 시작하는 데 도움이 되는 Seed 프로젝트도 제공합니다.

환경	패키지	모듈
React 앱 만들기(CRA)	패키지	모듈
비테	패키지	모듈
Vite - TypeScript	패키지	모듈
웹팩 5 - TypeScript	패키지	모듈
웹팩 5 - 자바스크립트	패키지	모듈
각도 CLI	패키지	모듈
누스트	패키지	모듈
비테	패키지	모듈

사용자 정의

AG Grid는 모양과 기능 모두에서 완벽하게 사용자 정의할 수 있습니다. 그리드를 사용자 정의할 수 있는 방법은 다양하며 당사는 이러한 사용자 정의를 생성하는 데 도움이 되는 다양한 도구를 제공합니다.

맞춤 구성요소

자신만의 사용자 정의 구성요소를 생성하여 그리드의 동작을 사용자 정의할 수 있습니다. 예를 들어 셀 렌더링 방법, 값 편집 방법을 사용자 정의하고 자신만의 필터를 만들 수도 있습니다.

다음을 포함하여 그리드에 제공할 수 있는 다양한 구성 요소 유형이 있습니다.

셀 구성 요소: 셀 내용을 사용자 정의합니다.
헤더 구성요소: 열 및 열 그룹의 헤더를 사용자 정의합니다.
구성 요소 편집: 셀 편집을 사용자 정의합니다.
필터 구성요소: 열 메뉴 내부에 나타나는 사용자 정의 열 필터용입니다.
플로팅 필터: 열 메뉴 내부에 나타나는 사용자 정의 열 플로팅 필터용입니다.
날짜 구성 요소: 날짜 필터의 날짜 선택 구성 요소를 사용자 정의합니다.
로딩 구성요소: 서버 측 행 모델을 사용할 때 로딩 셀 행을 사용자 정의합니다.
오버레이 구성요소: 로드 및 행 없음 오버레이 구성요소를 사용자 정의합니다.
상태 표시줄 구성 요소: 사용자 정의 상태 표시줄 구성 요소용입니다.
도구 패널 구성요소: 사용자 정의 도구 패널 구성요소용입니다.
도구 설명 구성 요소: 사용자 정의 셀 도구 설명 구성 요소용입니다.
메뉴 항목 구성요소: 열 및 상황에 맞는 메뉴에 표시된 메뉴 항목을 사용자 정의합니다.

사용자 정의 셀 렌더러와 필터 구성 요소를 Grid에 제공하려면 gridOptions.columnDefs 속성 내에서 구성 요소에 대한 직접 참조를 만듭니다.

 GridOptions = { columnDefs: [ { field: 'country', // cellRenderer에 구성 요소를 추가하는 열: CountryCellRenderer, // 사용자 정의 셀 구성 요소 필터: CountryFilter, // 사용자 정의 필터 구성 요소 }, ],};

테마

AG Grid에는 4가지 테마가 있으며 각 테마는 light 와 dark 모드에서 사용할 수 있습니다.

석영	재료

알파인	발햄

맞춤 테마

모든 AG Grid 테마는 Theming API를 사용하여 사용자 정의할 수 있으며, Theme Builder 또는 Figma 디자인 시스템을 사용하여 처음부터 새로운 테마를 만들 수도 있습니다.

지역 사회

도구 및 확장

AG Grid에는 사용하는 언어나 프레임워크에 관계없이 AG Grid를 사용하여 다음 프로젝트를 구축하는 데 도움이 되는 타사 도구, 확장 프로그램 및 유틸리티의 생태계를 만든 크고 활동적인 커뮤니티가 있습니다.

반응 • 각도 • 타입스크립트 • 뷰 • 파이썬 • 날씬한 • 솔리드JS • .그물 • 러스트 • 라라벨

유리 진열장

AG Grid는 전 세계 거의 모든 산업 분야의 수십만 명의 개발자가 사용하고 있습니다. 이러한 프로젝트의 대부분은 비공개이지만 JPMorgan , MongoDB 및 NASA를 포함하여 유명인이 AG Grid를 사용하는 다양한 업계의 오픈 소스 프로젝트를 선별했습니다. 자세히 알아보려면 커뮤니티 쇼케이스 페이지를 방문하세요.

몽상가

2016년에 설립된 AG Grid는 꾸준한 인기 상승을 보였으며 현재 데이터 그리드 시장의 선두주자입니다.

지원하다

기업 지원

AG Grid Enterprise 고객은 당사 엔지니어링 팀이 모니터링하는 ZenDesk를 통해 전담 지원을 받을 수 있습니다.

버그 보고서

버그를 발견한 경우 이 저장소의 문제 섹션에 보고해 주세요.

질문

ag-grid 태그를 사용하여 StackOverflow에서 유사한 문제를 찾아보세요. 관련이 없는 것 같으면 거기에 새 메시지를 게시하세요. 질문을 할 때 GitHub 이슈를 사용하지 마세요.

기여

AG Grid는 런던에 공동으로 위치한 개발자 팀에 의해 개발되었습니다. 팀에 합류하고 싶다면 [email protected]으로 신청서를 보내주세요.

⚠️ 특허

ag-grid-community MIT 라이선스에 따라 라이선스가 부여됩니다.

ag-grid-enterprise 상업용 라이센스가 있습니다.

자세한 내용은 LICENSE 파일을 참조하세요.

AG 차트

지금까지 진행하셨다면 최신 프로젝트인 AG Charts - 세계 최고의 JavaScript 차트 라이브러리에 관심이 있으실 것입니다.

처음에는 AG Grid의 통합 차트를 지원하기 위해 구축되었으며 2018년에 이 프로젝트를 오픈 소스로 공개했습니다. 그 이후 꾸준한 인기 상승을 본 후 우리는 전용 엔터프라이즈 버전( ag-charts-enterprise )이 포함된 AG Charts에 투자하기로 결정했습니다. ag-charts-community 에 대한 지속적인 지원에 추가됩니다.