angular-material-data-grid

This is an advanced data grid which is free to use with features and customizability only available on paid data grids.

Usage no npm install needed!

<script type="module">
  import angularMaterialDataGrid from 'https://cdn.skypack.dev/angular-material-data-grid';
</script>

README

Advanced Angular Material Data Grid System

Inspired by Kendo UI Grid

This is an advanced data grid which is free to use with features and customizability only available on paid data grids.

Sample UI

Features

  • Easy to integrate server-side pagination (Tested with very large data sets)
  • Built in virtual scrolling
  • Advanced multi-filtering features
  • Customizable theming
  • Optional columns with re-ordering

The initial purpose of creating this data grid was to make it easy for developers to easily create highly advanced data grids with server-side pagination along with multiple filters and sorting with minimum effort and time. (Client Side Pagination is also present.) In order to make this possible a tight integration between the back-end data-source and the front-end component should be agreed upon. This gives the ability to stay focused on advanced functionality and the creation of data grids with only configurations while staying opinionated. Moreover, the solutions provided by reputed vendors were expensive which makes open-source software more attractive to many clients. This product is 100% open source. Check Repository here.

Refer to the Documentation page.

Installation

  1. Install Angular Material

    • ng add @angular/material

  2. Install Angular Material Data Grid

    • npm i angular-material-data-grid

  3. Import Module

    • import { AngularMaterialDataGridModule } from 'angular-material-data-grid';

    • imports: [ .., AngularMaterialDataGridModule]

  4. Usage (Basic)

    HTML
    • <amdg-grid
          [headings]="headings"
          [url]="url"
          [serverSidePagination]="true"
          (responseEmit)="responseReceived($event)">
    TypeScript

    Check here