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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…