Page 3: Sorting, Filtering, and Pagination

3. Sorting, Filtering, and Pagination

AG Grid provides powerful Sorting, Filtering, and Pagination capabilities to easily navigate and manage large datasets.

3.1. Enabling Sorting

You can enable sorting for individual columns by setting sortable: true in columnDefs, and set default sorting behavior for the entire grid using defaultColDef.

const defaultColDef = useMemo(() => ({
  sortable: true, // All columns sortable by default
  filter: true,   // All columns filterable by default
}));

// ... AgGridReact component
<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
></AgGridReact>

3.2. Using Filtering

Setting filter: true will display a filter icon in each column header, allowing users to filter data. AG Grid provides various built-in filters for text, numbers, dates, and more.

// columnDefs example:
{ headerName: "Product Name", field: "product", filter: true },
{ headerName: "Price", field: "price", filter: 'agNumberColumnFilter' } // Explicitly use number filter

3.3. Implementing Pagination

Activate pagination by adding the pagination={true} prop to the grid. You can define the number of rows per page with paginationPageSize.

// ... AgGridReact component
<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  pagination={true}
  paginationPageSize={10} // Display 10 rows per page
></AgGridReact>