Security News
New Python Packaging Proposal Aims to Solve Phantom Dependency Problem with SBOMs
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
@ag-grid-community/core
Advanced tools
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@ag-grid-community/core is a powerful and feature-rich JavaScript data grid library that allows developers to create complex and highly customizable data grids. It supports a wide range of functionalities including sorting, filtering, pagination, and more.
Basic Grid Setup
This code sets up a basic grid with three columns (Make, Model, Price) and three rows of data. It demonstrates the fundamental setup of a grid using @ag-grid-community/core.
const gridOptions = {
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
Sorting
This code adds sorting functionality to each column in the grid. Users can click on the column headers to sort the data in ascending or descending order.
const gridOptions = {
columnDefs: [
{ headerName: 'Make', field: 'make', sortable: true },
{ headerName: 'Model', field: 'model', sortable: true },
{ headerName: 'Price', field: 'price', sortable: true }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
Filtering
This code enables filtering on each column. Users can filter the data by entering values in the filter input boxes that appear in the column headers.
const gridOptions = {
columnDefs: [
{ headerName: 'Make', field: 'make', filter: true },
{ headerName: 'Model', field: 'model', filter: true },
{ headerName: 'Price', field: 'price', filter: true }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
Pagination
This code enables pagination in the grid, allowing users to navigate through pages of data. The page size is set to 10 rows per page.
const gridOptions = {
pagination: true,
paginationPageSize: 10,
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
// more rows...
]
};
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
react-table is a lightweight, fast, and extendable data grid built for React. It provides a simple API for creating tables with features like sorting, filtering, and pagination. Compared to @ag-grid-community/core, react-table is more lightweight and easier to integrate with React applications, but it may lack some of the advanced features and customizability of ag-Grid.
handsontable is a JavaScript/HTML5 data grid component with Excel-like appearance and functionality. It supports features like data validation, sorting, filtering, and more. Compared to @ag-grid-community/core, handsontable offers a more Excel-like experience and is highly customizable, but it may have a steeper learning curve and higher complexity.
slickgrid is a JavaScript grid/spreadsheet component that provides high performance and a rich set of features. It supports large datasets, virtual rendering, and various grid functionalities. Compared to @ag-grid-community/core, slickgrid is known for its performance with large datasets, but it may require more effort to set up and customize.
AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.
Check out the developer documentation for a complete list of features or visit our official docs for tutorials and feature demos.
This package is the core feature module for the grid to be used when working with AG Grid module setup in order to minimise your bundle size.
If you have found a bug, please report it in this repository's issues section. If you're using the Enterprise version, please use the private ticketing system to do that.
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.
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.
This project is licensed under the MIT license. See the LICENSE file for more info.
FAQs
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
The npm package @ag-grid-community/core receives a total of 153,012 weekly downloads. As such, @ag-grid-community/core popularity was classified as popular.
We found that @ag-grid-community/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
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.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.