@ag-grid-community/core

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);