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

ag-grid-react

Package Overview
Dependencies
Maintainers
4
Versions
139
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ag-grid-react

AG Grid React Component

  • 32.2.2
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
452K
increased by3.72%
Maintainers
4
Weekly downloads
 
Created

What is ag-grid-react?

ag-grid-react is a powerful and feature-rich data grid component for React applications. It provides a wide range of functionalities for displaying, editing, and managing data in a tabular format. It is highly customizable and supports large datasets, making it suitable for enterprise-level applications.

What are ag-grid-react's main functionalities?

Basic Grid Setup

This code sets up a basic grid with three columns: Make, Model, and Price. It also provides some sample row data to display in the grid.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

export default App;

Sorting and Filtering

This code demonstrates how to enable sorting and filtering on the columns of the grid. Users can click on the column headers to sort and use the filter input to filter the data.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make', sortable: true, filter: true },
    { headerName: 'Model', field: 'model', sortable: true, filter: true },
    { headerName: 'Price', field: 'price', sortable: true, filter: true }
  ];

  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

export default App;

Row Selection

This code demonstrates how to enable row selection in the grid. It also includes an event handler to log the selected rows to the console.

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const [rowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ]);

  const [columnDefs] = useState([
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ]);

  const onSelectionChanged = (event) => {
    const selectedRows = event.api.getSelectedRows();
    console.log('Selected rows:', selectedRows);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        rowSelection="single"
        onSelectionChanged={onSelectionChanged}
      />
    </div>
  );
};

export default App;

Custom Cell Renderer

This code demonstrates how to use a custom cell renderer to change the appearance of cell values based on their content. In this example, the price values are colored red if they are greater than 50000 and green otherwise.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const CustomCellRenderer = (props) => {
  return (
    <span style={{ color: props.value > 50000 ? 'red' : 'green' }}>
      {props.value}
    </span>
  );
};

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price', cellRenderer: 'customCellRenderer' }
  ];

  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        frameworkComponents={{ customCellRenderer: CustomCellRenderer }}
      />
    </div>
  );
};

export default App;

Other packages similar to ag-grid-react

    react-table

    react-table is a lightweight, fast, and extendable data grid built for React. It focuses on providing a simple and flexible API for building tables with features like sorting, filtering, and pagination. Compared to ag-grid-react, react-table is more lightweight and easier to customize but may lack some of the advanced features and performance optimizations of ag-grid-react.

    material-table

    material-table is a data table component built on top of Material-UI. It provides a rich set of features like sorting, filtering, grouping, and editing, along with a modern and responsive design. Compared to ag-grid-react, material-table offers a more integrated experience with Material-UI and is suitable for applications already using Material-UI for their UI components.

    react-data-grid

    react-data-grid is a highly customizable and performant data grid component for React. It offers features like sorting, filtering, grouping, and cell editing. Compared to ag-grid-react, react-data-grid is more focused on performance and customization, making it a good choice for applications that require a high degree of control over the grid's behavior and appearance.

Keywords

FAQs

Package last updated on 07 Oct 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

Massive npm Malware Campaign Leverages Ethereum Smart Contracts To Evade Detection and Maintain Control

Security News

Research

Massive npm Malware Campaign Leverages Ethereum Smart Contracts To Evade Detection and Maintain Control

An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.

By Kush Pandya, Philipp Burckhardt, Kirill Boychenko, Orlando Barrera  -  Oct 31, 2024
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc