What is @ag-grid-community/core?
@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.
What are @ag-grid-community/core's main functionalities?
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);
Other packages similar to @ag-grid-community/core
react-table
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
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
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.