33.1.1 • Published 2 months ago

ag-grid-community v33.1.1

Weekly downloads
214,672
License
MIT
Repository
github
Last release
2 months ago

JavaScript Data Grid | JavaScript Table

📖 Overview

AG Grid is available in two versions: Community & Enterprise.

Features

FeatureAG Grid CommunityAG Grid Enterprise
Filtering✅ (Advanced)
Sorting
Cell Editing
CSV Export
Drag & Drop
Themes and Styling
Selection
Accessibility
Infinite Scrolling
Pagination
Server-Side Data✅ (Advanced)
Custom Components
Integrated Charting
Range Selection
Row Grouping and Aggregation
Pivoting
Excel Export
Clipboard Operations
Master/Detail
Tree Data
Column Menu
Context Menu
Tool Panels
Support

Examples

We've created several demos to showcase AG Grid's rich feature set across different use cases. See them in action below, or interact with them on our Demo page.

⚡️ Quick Start

AG Grid is easy to set up - all you need to do is provide your data and define your column structure. Read on for vanilla JavaScript installation instructions, or refer to our framework-specific guides for React, Angular and Vue.

Installation

$ npm install --save ag-grid-community

Setup

1. Provide a Container

Load the AG Grid library and create a blank container div:

<html lang="en">
    <head>
        <!-- Includes all JS & CSS for the JavaScript Data Grid -->
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
    </head>
    <body>
        <!-- Your Data Grid container -->
        <div id="myGrid"></div>
    </body>
</html>

2. Instantiating the JavaScript Data Grid

Create the Data Grid inside of your container div using createGrid.

// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {};

// Your Javascript code to create the Data Grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);

3. Define Rows and Columns

// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {
    // Row Data: The data to be displayed.
    rowData: [
        { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
        { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
        { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    ],
    // Column Definitions: Defines the columns to be displayed.
    columnDefs: [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
        { field: 'electric' },
    ],
};

4. Styling the JavaScript Data Grid

Add the ag-theme-quartz CSS class to your Data Grid container div to apply the Data Grid's theme.

<!-- Your Data Grid container -->
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>

Seed Projects

We also provide Seed Projects to help you get started with common configurations:

🛠️ Customisations

AG Grid is fully customisable, both in terms of appearance and functionality. There are many ways in which the grid can be customised and we provide a selection of tools to help create those customisations.

Custom Components

You can create your own Custom Components to customise the behaviour of the grid. For example, you can customise how cells are rendered, how values are edited and also create your own filters.

There are a number of different Component Types that you can provide to the grid, including:

To supply a custom cell renderer and filter components to the Grid, create a direct reference to your component within the gridOptions.columnDefs property:

gridOptions = {
    columnDefs: [
        {
            field: 'country', // The column to add the component to
            cellRenderer: CountryCellRenderer, // Your custom cell component
            filter: CountryFilter, // Your custom filter component
        },
    ],
};

Themes

AG Grid has 4 themes, each available in light & dark modes. We also supply each theme with an auto mode that can toggle the theme based on the users' system preferences:

To apply a theme, add the relevant CSS Class to the Data Grid container. For example, to apply the Quartz theme, use the CSS class ag-theme-quartz:

<div
    id="myGrid"
    style="height: 150px; width: 600px"
    class="ag-theme-quartz"
></div>

Custom Themes

All AG Grid themes can be customised using CSS variables, or you can create a new theme from scratch with the help of our Theme Builder or Figma Design System.

🌍 Community

Tools & Extensions

AG Grid has a large and active community who have created an ecosystem of 3rd party tools, extensions and utilities to help you build your next project with AG Grid, no matter which language or framework you use:

Showcase

AG Grid is used by 100,000's of developers across the world, from almost every industry. Whilst most of these projects are private, we've curated a selection of open-source projects from different industries where household names use AG Grid, including J.P.Morgan, MongoDB and NASA. Visit our Community Showcase page to learn more.

Stargazers

Founded in 2016, AG Grid has seen a steady rise in popularity and is now the market leader for Data Grids:

🤝 Support

Enterprise Support

AG Grid Enterprise customers have access to dedicated support via ZenDesk, which is monitored by our engineering teams.

Bug Reports

If you have found a bug, please report it in this repository's issues section.

Questions

Look for similar problems on StackOverflow using the ag-grid tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.

Contributing

AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to info@ag-grid.com.

⚠️ License

ag-grid-community is licensed under the MIT license.

ag-grid-enterprise has a Commercial license.

See the LICENSE file for more info.

If you've made it this far, you may be interested in our latest project: AG Charts - The best JavaScript Charting library in the world.

Initially built to power Integrated Charts in AG Grid, we open-sourced this project in 2018. Having seen the steady rise in popularity since then, we have decided to invest in AG Charts with a dedicated Enterprise version (ag-charts-enterprise) in addition to our continued support of ag-charts-community.

Follow us to keep up to date with all the latest news from AG Grid:

@arunkeshavareddy/dc-common@titaui/pccostco-common-lib@testdev0922/restaurantjaivanajaivana_dashboard@acorex/acorex-uirt3@plarin/gridvtest-cmp@testdev0922/subscribesass-webpack-playaroundsass-webpack-test-package@doctorlogic/compoenentsiress-ag-grid-themelotus-subscribeng-gapp4jhtml_define_drop-down_listgt-libervue-dynamic-gridsignplsignpl-testbaowei-view@james-packages/isdav6-angularv6-test@james-packages/transaction-blotterbetter-cal-componentmes-table@jackerwang/xzguipwc-frontend-componentteespace-admin@linnworks/linn.core.clientwhitebrick@infilect_developer/shelf-visualisergatsby-theme-whitebrickhyena-design-system@talend/react-datagrid@skyline-ai/skyzoncommon-componentssarms_v2.8_webuiarms_v2.8_webui1arms_v2.8_webui2arms_v2.8_webui3arms_v2.8_webui4arms_v2.8_webui5arms_v2.8_webui6arms_v2.8_webui7arms_v2.8_webui8arms_v2.8_webui9arms_webuiarms_webui10arms_webui2arms_webui3arms_webui5arms_webui6xinherc_testreact-ptable-materials-grid@qrvey/qui-components@eten-lab/data-tableinsite_coretable@umg-mira/mira-editor-pluginsimple-edit-gridcvte-khronosheader-footertiny-csv-importer@everything-registry/sub-chunk-1105ui-builder-craft_1@findable-no/findable-componentsgsreactlibrariesagcm-uikitams_sdmodelcommercial-cockpit-uipippen-electrontabidoo-libstaroragridprojecttable-grid-librarysvelte-moswindmill-componentsw-aggrid-vueweb-app-modelerwells-fargo-mip-data-gridwemay-reactwenay-reactwrapper-aggrid-genrewotu-lcdp-miswotu-lcdp-reactwhscomxinhercxinherc-h55xinherc49xhy-portalxhy-portal-mobilexhhentableteam-ui-componentsteanesstecboardsumax-erp-shared-componentssun-asia-vue-iview-componentspendanalyticsplatform
32.3.4

2 months ago

33.1.1

3 months ago

33.1.0

3 months ago

33.0.4

4 months ago

33.0.3

5 months ago

33.0.0

5 months ago

33.0.1

5 months ago

33.0.2

5 months ago

32.3.3

6 months ago

32.3.1

6 months ago

32.3.2

6 months ago

32.3.0

7 months ago

32.2.1

7 months ago

32.2.2

7 months ago

32.2.0

8 months ago

32.1.0

9 months ago

31.3.4

10 months ago

32.0.0

10 months ago

32.0.1

10 months ago

32.0.2

10 months ago

31.3.2

12 months ago

31.3.0

1 year ago

31.3.1

1 year ago

31.2.1

1 year ago

31.2.0

1 year ago

31.1.1

1 year ago

31.1.0

1 year ago

31.0.3

1 year ago

31.0.2

1 year ago

31.0.1

1 year ago

30.1.0

2 years ago

31.0.0

1 year ago

30.0.5

2 years ago

30.0.6

2 years ago

30.2.1

2 years ago

30.0.3

2 years ago

30.2.0

2 years ago

30.0.1

2 years ago

30.0.2

2 years ago

30.0.0

2 years ago

29.3.5

2 years ago

29.3.2

2 years ago

29.3.3

2 years ago

29.3.4

2 years ago

29.3.0

2 years ago

29.3.1

2 years ago

29.2.0

2 years ago

29.0.0

2 years ago

29.1.0

2 years ago

28.1.0

3 years ago

28.1.1

3 years ago

27.3.0-beta.1

3 years ago

27.3.0-beta.0

3 years ago

27.1.0

3 years ago

27.3.0

3 years ago

28.0.0

3 years ago

28.0.1

3 years ago

28.2.0

3 years ago

28.0.2

3 years ago

28.2.1

3 years ago

27.2.0

3 years ago

27.2.1

3 years ago

26.2.1

3 years ago

27.0.0

3 years ago

27.0.1

3 years ago

26.2.0

3 years ago

26.1.0

4 years ago

26.0.0

4 years ago

25.3.0

4 years ago

25.2.0

4 years ago

25.2.1

4 years ago

25.1.0

4 years ago

25.0.1

4 years ago

25.0.0

4 years ago

24.1.0

5 years ago

24.0.0

5 years ago

23.2.1

5 years ago

23.2.0

5 years ago

23.1.1

5 years ago

23.1.0

5 years ago

23.0.2

5 years ago

23.0.1

5 years ago

23.0.0

5 years ago

22.1.1

5 years ago

22.1.0

5 years ago

22.0.0

5 years ago

22.0.0-beta.4

5 years ago

22.0.0-beta.3

6 years ago

22.0.0-beta.2

6 years ago

22.0.0-beta.1

6 years ago

22.0.0-beta.0

6 years ago

21.2.2

6 years ago

21.2.1

6 years ago

21.2.0

6 years ago

21.1.1

6 years ago

21.1.0

6 years ago

21.0.1

6 years ago

21.0.0

6 years ago

20.2.0

6 years ago

20.1.0-beta.1

6 years ago

20.1.0

6 years ago

20.1.0-beta.0

6 years ago

20.0.0

6 years ago

19.1.4

6 years ago

19.1.3

6 years ago

19.1.2

6 years ago

19.1.1

7 years ago

19.1.0

7 years ago

19.0.0

7 years ago

18.1.2

7 years ago