AG Grid adalah JavaScript Data Grid yang berfitur lengkap dan sangat dapat disesuaikan . Ini memberikan kinerja luar biasa , tidak memiliki ketergantungan pihak ketiga dan dilengkapi dengan dukungan untuk 
Bereaksi , 
Sudut dan 
Lihat .
Kisi Data JavaScript | Tabel JavaScript
Dukungan Perusahaan
Laporan Bug
Pertanyaan
Berkontribusi
Alat & Ekstensi
Memamerkan
Pengamat bintang
Komponen Khusus
Tema
Tema Khusus
Instalasi
Pengaturan
Proyek Benih
Fitur
Contoh
? Ringkasan
⚡️ Mulai Cepat
?️ Kustomisasi
? Masyarakat
? Mendukung
Lisensi
AG Grid tersedia dalam dua versi: Komunitas & Perusahaan.
ag-grid-community gratis, tersedia di bawah lisensi MIT, dan dilengkapi dengan semua fitur inti yang diharapkan dari JavaScript Data Grid, termasuk Sorting, Filtering, Pagination, Editing, Custom Components, Theming, dan banyak lagi.
ag-grid-enterprise tersedia di bawah lisensi komersial dan dilengkapi dengan fitur-fitur canggih, seperti Pembuatan Bagan Terintegrasi, Pengelompokan Baris, Agregasi, Pivoting, Master/Detail, Model Baris Sisi Server, dan Ekspor selain dukungan khusus dari tim Teknik kami.
| Fitur | Komunitas Jaringan AG | Perusahaan Jaringan AG |
|---|---|---|
| Penyaringan | ✅ | ✅ (Lanjutan) |
| Penyortiran | ✅ | ✅ |
| Pengeditan Sel | ✅ | ✅ |
| Ekspor CSV | ✅ | ✅ |
| Seret & Jatuhkan | ✅ | ✅ |
| Tema dan Gaya | ✅ | ✅ |
| Pilihan | ✅ | ✅ |
| Aksesibilitas | ✅ | ✅ |
| Pengguliran Tak Terbatas | ✅ | ✅ |
| Paginasi | ✅ | ✅ |
| Data Sisi Server | ✅ | ✅ (Lanjutan) |
| Komponen Khusus | ✅ | ✅ |
| Bagan Terintegrasi | ❌ | ✅ |
| Pemilihan Rentang | ❌ | ✅ |
| Pengelompokan dan Agregasi Baris | ❌ | ✅ |
| Berputar | ❌ | ✅ |
| Ekspor Excel | ❌ | ✅ |
| Operasi Papan Klip | ❌ | ✅ |
| Master/Detail | ❌ | ✅ |
| Data Pohon | ❌ | ✅ |
| Menu Kolom | ❌ | ✅ |
| Menu Konteks | ❌ | ✅ |
| Panel Alat | ❌ | ✅ |
| Mendukung | ❌ | ✅ |
ℹ️ Catatan:
Kunjungi halaman Harga untuk perbandingan lengkap.
Kami telah membuat beberapa demo untuk menampilkan rangkaian fitur AG Grid yang kaya di berbagai kasus penggunaan. Lihat aksi mereka di bawah, atau berinteraksilah dengan mereka di halaman Demo kami.
Contoh data keuangan yang menampilkan pembaruan langsung dan grafik mini:
Demo Langsung • Kode Sumber
Contoh data inventaris untuk melihat dan mengelola produk:
Demo Langsung • Kode Sumber
Contoh data SDM yang menampilkan data hierarki karyawan:
Demo Langsung • Kode Sumber
AG Grid mudah diatur - yang perlu Anda lakukan hanyalah menyediakan data dan menentukan struktur kolom Anda. Baca terus untuk petunjuk instalasi vanilla JavaScript, atau lihat panduan khusus kerangka kerja kami untuk Bereaksi , Sudut dan Lihat.
$ npm install --simpan komunitas ag-grid
1. Sediakan Wadah
Muat perpustakaan AG Grid dan buat div kontainer. Div harus memiliki tinggi karena Data Grid akan mengisi ukuran wadah induk:
<html lang="en"> <head> <!-- Termasuk semua JS & CSS untuk JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Kontainer Data Grid Anda --> <div id="myGrid" style="height: 500 piksel"></div> </tubuh></html>
2. Membuat Instansiasi Grid Data JavaScript
Buat Data Grid di dalam div container Anda menggunakan createGrid .
// Opsi Grid: Berisi semua konfigurasi Data Gridconst gridOptions = {};// Kode Javascript Anda untuk membuat Data Gridconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);3. Tentukan Baris dan Kolom
// Opsi Grid: Berisi semua konfigurasi Data Gridconst gridOptions = { // Data Baris: Data yang akan ditampilkan. rowData: [ { buat: 'Tesla', model: 'Model Y', harga: 64950, listrik: true }, { buat: 'Ford', model: 'F-Series', harga: 33850, listrik: false }, { make: 'Toyota', model: 'Corolla', harga: 29600, electric: false }, ], // Definisi Kolom: Mendefinisikan kolom yang akan ditampilkan. kolomDefs: [{ bidang: 'buat' }, { bidang: 'model' }, { bidang: 'harga' }, { bidang: 'listrik' }],};ℹ️ Catatan:
Untuk informasi lebih lanjut tentang membangun Data Grids dengan AG Grid, lihat Dokumentasi kami.
Kami juga menyediakan Proyek Benih untuk membantu Anda memulai dengan konfigurasi umum:
| Lingkungan | Kerangka | Paket | Modul |
|---|---|---|---|
| Buat Aplikasi React (CRA) | | Paket | Modul |
| Vit | | Paket | Modul |
| Vite - Skrip Ketik |  | Paket | Modul |
| Webpack 5 - Skrip Ketik | | Paket | Modul |
| Paket Web 5 - JavaScript |  | Paket | Modul |
| CLI sudut | | Paket | Modul |
| Selanjutnya | | Paket | Modul |
| Vit | | Paket | Modul |
AG Grid sepenuhnya dapat disesuaikan, baik dari segi tampilan maupun fungsionalitas. Ada banyak cara untuk menyesuaikan grid dan kami menyediakan pilihan alat untuk membantu membuat penyesuaian tersebut.
Anda dapat membuat Komponen Kustom Anda sendiri untuk menyesuaikan perilaku grid. Misalnya, Anda dapat menyesuaikan cara sel dirender, cara nilai diedit, dan juga membuat filter sendiri.
Ada sejumlah Tipe Komponen berbeda yang dapat Anda berikan ke grid, termasuk:
Komponen Sel: Untuk menyesuaikan konten sel.
Komponen Header: Untuk menyesuaikan header kolom dan grup kolom.
Edit Komponen: Untuk menyesuaikan pengeditan sel.
Filter Komponen: Untuk filter kolom khusus yang muncul di dalam menu kolom.
Filter Mengambang: Untuk filter mengambang kolom khusus yang muncul di dalam menu kolom.
Komponen Tanggal: Untuk menyesuaikan komponen pemilihan tanggal di filter tanggal.
Memuat Komponen: Untuk menyesuaikan baris sel pemuatan saat menggunakan Model Baris Sisi Server.
Komponen Overlay: Untuk menyesuaikan pemuatan dan tidak ada komponen overlay baris.
Komponen Bilah Status: Untuk komponen bilah status khusus.
Komponen Panel Alat: Untuk komponen panel alat khusus.
Komponen Tooltip: Untuk komponen tooltip sel khusus.
Komponen Item Menu: Untuk menyesuaikan item menu yang ditampilkan di Menu Kolom dan Konteks.
Untuk menyediakan penyaji sel khusus dan memfilter komponen ke Grid, buat referensi langsung ke komponen Anda dalam properti gridOptions.columnDefs :
gridOptions = { ColumnDefs: [ { field: 'country', // Kolom untuk menambahkan komponen ke cellRenderer: CountryCellRenderer, // Filter komponen sel kustom Anda: CountryFilter, // Komponen filter kustom Anda }, ],}; AG Grid memiliki 4 tema, masing-masing tersedia dalam mode light & dark :
| Kuarsa | Bahan |
|---|---|
 |  |
| Alpen | Balham |
 |  |
Semua tema AG Grid dapat dikustomisasi menggunakan Theming API, atau Anda dapat membuat tema baru dari awal dengan bantuan Pembuat Tema atau Sistem Desain Figma kami.
AG Grid memiliki komunitas besar dan aktif yang telah menciptakan ekosistem alat, ekstensi, dan utilitas pihak ketiga untuk membantu Anda membangun proyek berikutnya dengan AG Grid, apa pun bahasa atau kerangka kerja yang Anda gunakan:
Bereaksi • 
Sudut • Skrip Ketik • 
pemandangan • 
ular sanca • 
Langsing • 
SolidJS • 
.NET • 
Karat • 
Laravel
AG Grid digunakan oleh 100.000 pengembang di seluruh dunia, dari hampir semua industri. Meskipun sebagian besar proyek ini bersifat pribadi, kami telah menyusun sejumlah proyek sumber terbuka pilihan dari berbagai industri yang menggunakan AG Grid, termasuk JPMorgan , MongoDB , dan NASA . Kunjungi halaman Komunitas Showcase kami untuk mempelajari lebih lanjut.
Didirikan pada tahun 2016, AG Grid mengalami peningkatan popularitas yang stabil dan kini menjadi pemimpin pasar untuk Data Grids:
Pelanggan AG Grid Enterprise memiliki akses ke dukungan khusus melalui ZenDesk, yang dipantau oleh tim teknik kami.
Jika Anda menemukan bug, silakan laporkan di bagian masalah repositori ini.
Cari masalah serupa di StackOverflow menggunakan tag ag-grid . Jika sepertinya tidak ada yang berhubungan, kirimkan pesan baru di sana. Harap jangan gunakan masalah GitHub untuk mengajukan pertanyaan.
AG Grid dikembangkan oleh tim pengembang yang berlokasi bersama di London. Jika Anda ingin bergabung dengan tim, kirimkan lamaran Anda ke [email protected].
ag-grid-community dilisensikan di bawah lisensi MIT .
ag-grid-enterprise memiliki lisensi Komersial .
Lihat file LISENSI untuk info lebih lanjut.
Grafik AGJika Anda sudah sampai sejauh ini, Anda mungkin tertarik dengan proyek terbaru kami: AG Charts - Pustaka Charting JavaScript terbaik di dunia.
Awalnya dibuat untuk mendukung Grafik Terintegrasi di AG Grid, kami menjadikan proyek ini sebagai sumber terbuka pada tahun 2018. Setelah melihat popularitas yang terus meningkat sejak saat itu, kami memutuskan untuk berinvestasi di AG Charts dengan versi Perusahaan khusus ( ag-charts-enterprise ) di selain dukungan berkelanjutan kami terhadap ag-charts-community .
Ikuti kami untuk mendapatkan informasi terbaru dari AG Grid:
