Angular Data Grid

  • Interface / API
  • Rows
  • Layout & Styling
  • Server-Side Data
  • Filtering
  • Editing
  • Import & Export
  • Components
  • Standalone Charts
  • Interactivity
  • Miscellaneous
  • Version 25.2.0
    Apr 30

    Minor release with bug fixes:

    Best Web Grids for 2020
    Jan 27th

    AG Grid is the 'Absolute Winner' according to Best Web Grids for 2020.

    Community or Enterprise?

    Everyone can use AG Grid Community for free. It's MIT licensed and Open Source. No restrictions. No strings attached.

    Do you want more features? Then get started with AG Grid Enterprise. You don't need to contact us to evaluate AG Grid Enterprise. A license is only required when you start developing for production.

    Conferences 2020

    Come see us at the following conferences that we are attending and sponsoring.





    Angular Connect

    Oct 13-14

    React Summit

    11th September

    React Advanced

    Oct 25

    Half Stack Online

    May 22

    Work at AG Grid:

    JavaScript Developers
    London, United Kingdom

    Would you like to join the AG Grid team in London?
    Check the jobs board

angular Grid: Getting Started

angular Grid: Basics

Interface / API

Grid Interface
Grid Properties,Grid API,Grid Events,Grid Callbacks,Row Object,
Column Interface
  1. Angularjs UI Grid – A Data grid for AngularJS Using AngularUI Angularjs UI Grid is the part of angularUI. Its coming with angularUI bundle not need to include extra css/js file to use them.Its developed on native AngularJS and does not depend on jQuery.
  2. Angular Data Grid Overview The Kendo UI for Angular Data Grid includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, exporting to PDF and Excel, and accessibility support.
  3. Practically, the directives make the component code cleaner, shorter, and more concise because they contain extracted data-operation logic. The Kendo UI Grid for Angular enables you to handle its binding to data either by: Using the built-in DataBindingDirective which binds the Grid to local data,.
  4. Often business data has hierarchical relationships between entities. To make it easy to work this kind of information, our Angular data grid implements the tree view specifically designed to display parent / child relationships between entities. The tree view implements a convenient mechanism to expand and collapse groups in one click.

Angular Grid View


Angular Data Grid
Column DefinitionsUpdating DefinitionsColumn StateColumn HeadersColumn GroupsColumn SizingColumn MovingColumn PinningColumn Spanning


Row SortingRow SpanningRow PinningRow HeightFull Width RowsRow AnimationRow Dragging

Angular Data Grid sample using Material Design styling Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.

Build & Tooling

SystemJSWebpack 1Webpack 2Webpack 3Community & EnterprisePackages & ModulesSupported Browsers

angular Grid: Core Features

Layout & Styling

Styling RowsStyling CellsThemesGrid SizeCustom IconsPrinting

Client-Side Data

OverviewAccessing DataUpdating DataImmutable DataContext

Server-Side Data

Row ModelsServer-Side Row ModelInfinite Row ModelViewport Row Model
Angular Data Grid


OverviewRow SelectionRange Selection


Text Filter,Number Filter,Date Filter,Set Filter,Multi Filter,
External FilterQuick Filter


Cell ContentGrid
Value Getters,Value Formatters,Expressions,Reference Data,
Cell RenderingRendering APIView RefreshFlashing CellsChange Detection


Cell EditingSaving ContentProvided EditorsUndo / Redo Edits

Group & Pivot

Row GroupingMaster DetailTree DataAggregationPivoting

Import & Export

CSV ExportExcel ExportClipboardDrag & Drop

angular Grid: Extending the grid


Tool PanelsColumn MenuContext MenuStatus BarOverlays


Registering ComponentsComponent Types
Cell Renderer,Cell Editor,Filter Component,Header Component,Status Bar Component,Tool Panel Component,Tooltip Component,Parent/Child Communication,

Integrated Charts

OverviewRange ChartPivot ChartChart ToolbarChart APICustomisation

Standalone Charts

OverviewAngular Data Grid
Options ReferenceThemes ReferenceExplorer

angular Grid: Other


Vb Datagrid Tutorial

DOM VirtualisationRow PaginationAligned GridsMassive Row CountScrolling Performance

Infragistics Angular Grid


Keyboard NavigationTouchAccessibility (ARIA)RTL Text DirectionLocalisation

Testing & Security

Angular Data-grid Tutorial



Angular Data Grid

Material UI ComponentsUse with RxJS