Simple and naive implementation of grid for Angular under MIT license


060.5.06 years ago6 years agoMinified + gzip package size for angular-small-grid in KB



Simple and naive implementation of grid for Angular. Tested: IE 11 and Chrome 50


  • Configurable columns and data
  • Reordable columns
  • Resizable columns
  • Pinnable columns
  • Loading message
  • No Data message
  • Store restore state of grid to localStorage




How To Install

npm i angular-small-grid

How to Use

Include resources

<script type="application/javascript" src="angular-small-grid.js"></script>
<link rel="stylesheet" href="angular-small-grid.css">

Set Grid Config

$scope.config = {
  cellHeight: 30,
  headerHeight: 30,

  // optional if you want to store state of your grid in localStorage
  // width, position, pinned state, visibility will be stored
  localStorageKey: 'my-settings',
  // optional if not specify show value from data object
  cellTemplate: function (column, value) { return value; }, 
  // optional if not specified just Loading... (doesn't support Angular markup)
  loaderTemplate: '<div>L...</div>',

  // optional if not specified just No Data (doesn't support Angular markup)
  noDataTemplate: '<span>No Data</span>',

  // optional, raised when columns order was changed
  onOrderChange: function () {},

  // optional, raised when cell clicked by mouse
  onCellClick: function (column, row, event) {},

  columns: [{
    name: 'Visible Name',
    field: 'fieldNameInDataObject',
    width: 122,
    visible: true,

    minWidth: 222, // optional param by default 50px

    pinned: void 0, // optional, could be 'left'

    fixedWidth: true, // optional to disable resizing for column

    // header template executes in dedicated (parent is your scope) scope with injected ```column```

    // optional, support Angular
    headerTemplate: '<span>{{ ::countOfColumns }}</span>',

    // optional, uses Angular $templateCache, has priority on headerTemplate
    headerTemplateUrl: 'url'

Set Data

$ = [{field1: 12}];

Add Grid to Page

<small-grid sg-config="smallGridConfig" sg-data="smallGridData"></small-grid>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from