6 ReactJS + Ag-Grid Tutorial | Basic Example with Header Parameters - Part 2

Ag Grid Dependencies:
"ag-grid-community": "^29.0.0",
"ag-grid-react": "^29.0.0"

Ag Grid official Document:
https://www.ag-grid.com/react-data-grid/getting-started/

Description:
In this tutorial, we'll learn how to integrate Ag-Grid with ReactJS and explore various header parameters such as theme, sorting, filtering, width, resizable columns, and pinned columns. Ag-Grid is a powerful data grid library that provides advanced functionalities for displaying and manipulating large datasets.
In this example, we start by importing the necessary Ag-Grid components and the required styles. We define the column definitions using the headerName property for each column. We can also specify additional properties such as sortable, filter, width, and resizable to control the behavior of the headers.

We provide some sample data in the rowData array to populate the grid. In the AgGridReact component, we pass the columnDefs and rowData as props. We also enable sorting and filtering by setting the enableSorting and enableFilter props to true. Additionally, we enable column resizing by setting the resizable prop to true.

To apply a specific theme to the grid, we add the ag-theme-alpine class to the wrapping div element. You can choose from various available themes provided by Ag-Grid.

Lastly, we demonstrate the usage of pinned rows by providing an array of data in the pinnedTopRowData prop. This will pin the specified row(s) to the top of the grid.

Feel free to modify the code and explore more Ag-Grid features based on your requirements. Happy coding!