ag-grid-react is a powerful and feature-rich data grid component for React applications. It provides a wide range of functionalities for displaying, editing, and managing data in a tabular format. It is highly customizable and supports large datasets, making it suitable for enterprise-level applications.
What are ag-grid-react's main functionalities?
Basic Grid Setup
This code sets up a basic grid with three columns: Make, Model, and Price. It also provides some sample row data to display in the grid.
This code demonstrates how to enable sorting and filtering on the columns of the grid. Users can click on the column headers to sort and use the filter input to filter the data.
This code demonstrates how to use a custom cell renderer to change the appearance of cell values based on their content. In this example, the price values are colored red if they are greater than 50000 and green otherwise.
react-table is a lightweight, fast, and extendable data grid built for React. It focuses on providing a simple and flexible API for building tables with features like sorting, filtering, and pagination. Compared to ag-grid-react, react-table is more lightweight and easier to customize but may lack some of the advanced features and performance optimizations of ag-grid-react.
material-table is a data table component built on top of Material-UI. It provides a rich set of features like sorting, filtering, grouping, and editing, along with a modern and responsive design. Compared to ag-grid-react, material-table offers a more integrated experience with Material-UI and is suitable for applications already using Material-UI for their UI components.
react-data-grid is a highly customizable and performant data grid component for React. It offers features like sorting, filtering, grouping, and cell editing. Compared to ag-grid-react, react-data-grid is more focused on performance and customization, making it a good choice for applications that require a high degree of control over the grid's behavior and appearance.
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.
π¦ Financial Demo
Financial data example featuring live updates and sparklines:
return (
// set a height on the parent div because the grid fills the available space<divstyle={{height:500 }}><AgGridReactrowData={rowData}columnDefs={colDefs} /></div>
);
βΉοΈ Note:
For more information on building Data Grids with AG Grid, refer to our Documentation.
Seed Projects
We also provide Seed Projects to help you get started with common configurations:
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:
Menu Item Component: To customise the menu items shown in the Column and Context Menus.
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 tocellRenderer: CountryCellRenderer, // Your custom cell componentfilter: CountryFilter, // Your custom filter component
},
],
};
Themes
AG Grid has 4 themes, each available in light & dark modes:
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.
If you've made it this far, you may be interested in our latest project: AG Charts - The best React 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:
The npm package ag-grid-react receives a total of 375,536 weekly downloads. As such, ag-grid-react popularity was classified as popular.
We found that ag-grid-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 4 open source maintainers collaborating on the project.
Package last updated on 13 Dec 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.