Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ag-grid-community/core

Package Overview
Dependencies
Maintainers
3
Versions
78
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ag-grid-community/core

Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue

  • 32.3.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
430K
increased by20.07%
Maintainers
3
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 13 Nov 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc