Neoplastic Plasma Medusa

    angular-small-grid

    0.5.0 • Public • Published

    angular-small-grid

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

    Features

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

    Demo

    License

    MIT

    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

    $scope.data = [{field1: 12}];

    Add Grid to Page

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

    Install

    npm i angular-small-grid

    DownloadsWeekly Downloads

    0

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • terma