Press "Enter" to skip to content

Simple Angular Material Grid Component Library

simpleGridMaterial is a dynamic data grid component for angular materials.

angular material grid, angular grid example, angularmaterial grid example, angular grid list, angular grid table

How to make use of it:


$ npm install simple-grid-material --save

Module AngularJS include


angular.module('Requisition', [
  require('simple-grid-material') // Component Injection


  ng-data-length="25, 50, 75, 100, 150, 250"

    <column data-style="width: 14%;" data-sortable="true">Submission date</column>
    <column data-style="width: 14%;" data-sortable="true">Submission ID</column>
    <column data-style="width: 14%;">Submitter</column>
    <column data-style="width: 14%;">Supplier</column>
    <column data-style="width: 14%;" data-sortable="true">Amount</column>
    <column data-style="width: 14%;" data-sortable="true">Requisition number</column>
    <column data-style="width: 14%;"></column>

    <column data-bind="date"></column>
    <column data-bind="submission_id"></column>
    <column data-bind="submitter" data-filter="uppercase'></column>
    <column data-bind="supplier_name"></column>
    <column data-bind="amount" data-filter="currency: 'USD '"></column>
    <column data-bind="number"></column>
    <column data-disabled-click="true">
      <div class="list-action">
        <button ng-click="$ctrl.clickPoc(1)" type="button" aria-label="content_copy">
          <md-icon class="material-icons ng-binding ng-scope">content_copy</md-icon>
        <button ng-click="$ctrl.clickPoc(2)" type="button" aria-label="mode_edit">
          <md-icon class="material-icons ng-binding ng-scope">mode_edit</md-icon>



ng-data-listArray[Object]truetrueList of objects to be repeated in a grid
ng-data-clickFunctiontruetrueA function that will be executed when clicking the
ng-data-ctrlObjecttruetrueThe controller that will be transferred to the component’s internal context
ng-data-single-orderingBooleanfalsefalseWhen true only allows one field to be sorted at a time
ng-data-paginationBooleanfalsefalseWhen true enables paging
ng-data-page-resetFunctiontruefalseExposes an internal page reset function to the variable passed through, which can be called to reset the page to 0.
ng-data-lengthString(’25, 50, 75, 100, 150, 250′)falsefalseReports the number of records options
ng-data-pagination-enabledFunctiontruetrueA function that returns Boolean allowing pagination to work
ng-data-pagination-eventsFunctiontruetrueA function that runs whenever you scroll through pagination
ng-data-loadingBooleantruefalseControls when to show and hide progress linear bar
ng-data-empty-iconStringfalsefalseMaterial icon font name to be displayed on no results page
ng-data-empty-textStringfalsefalseText to be displayed right below icon for no results page
data-style (header)stringfalsefalseEquivalent to the style attribute of HTML is repassed to the th elements
data-style (header)booleanfalsefalseFlag for sortable column item
data-bind (list)stringfalsefalseWhat element value to bind to from the ng-data-list one
data-template (list)stringfalsefalseA name of string-like property on the ng-data-ctrl to bind as HTML for that column

grid component for angular, simpleGridMaterial Plugin/Github

See Demo And Download

Official Website(miamarti): Click Here

This superior jQuery/javascript plugin is developed by miamarti. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.