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:

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

NameTypeDynamicMandatoryDescription
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.