@ag-grid-community/core

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.

README

The README file is missing