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

Table of Contents

How to make use of it:

Installation

$ npm install simple-grid-material --save

Module AngularJS include

require('angular');

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

Implementation

<simple-grid
  ng-data-list="listCtrl.myList"
  ng-data-click="listCtrl.clickPoc"
  ng-data-ctrl="listCtrl"
  ng-data-single-ordering="false"
  ng-data-pagination="true"
  ng-data-page-reset="listCtrl.reset"
  ng-data-length="25, 50, 75, 100, 150, 250"
  ng-data-pagination-enabled="listCtrl.paginationEnabled"
  ng-data-pagination-events="listCtrl.paginationEvents"
  ng-data-loading="listCtrl.loading">

  <header>
    <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>
  </header>

  <list>
    <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>
        <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>
        </button>
      </div>
    </column>
  </list>

</simple-grid>

Parameters

Name	Type	Dynamic	Mandatory	Description
ng-data-list	Array[Object]	true	true	List of objects to be repeated in a grid
ng-data-click	Function	true	true	A function that will be executed when clicking the
ng-data-ctrl	Object	true	true	The controller that will be transferred to the component’s internal context
ng-data-single-ordering	Boolean	false	false	When true only allows one field to be sorted at a time
ng-data-pagination	Boolean	false	false	When true enables paging
ng-data-page-reset	Function	true	false	Exposes an internal page reset function to the variable passed through, which can be called to reset the page to 0.
ng-data-length	String(’25, 50, 75, 100, 150, 250′)	false	false	Reports the number of records options
ng-data-pagination-enabled	Function	true	true	A function that returns Boolean allowing pagination to work
ng-data-pagination-events	Function	true	true	A function that runs whenever you scroll through pagination
ng-data-loading	Boolean	true	false	Controls when to show and hide progress linear bar
ng-data-empty-icon	String	false	false	Material icon font name to be displayed on no results page
ng-data-empty-text	String	false	false	Text to be displayed right below icon for no results page
data-style (header)	string	false	false	Equivalent to the style attribute of HTML is repassed to the th elements
data-style (header)	boolean	false	false	Flag for sortable column item
data-bind (list)	string	false	false	What element value to bind to from the ng-data-list one
data-template (list)	string	false	false	A name of string-like property on the ng-data-ctrl to bind as HTML for that column