Atomic grid

Controller and data provider building blocks to create your own very special angular grid without writing any boilerplate code.

Goal

There are several grid component supporting the angular framework, but most of them use the configuration method instead of the template approach. So instead of using simple table, tr and td tags, you have to create a big configuration object with cell renderers and some other stuff.

With this approach you lose the simple way to arrange the part of the grid and design it with simple html and css.

Atomic grid try to solve this problem by giving building blocks for creating your own custom grid component in minutes. Using this component you will get controllers and data providers for your grid without any view restriction.

Install

npm install --save atomic-grid

Basic usage

Angular 1

Import

import * as angular from 'angular';
import { AtomicGridNg1ModuleFactory } from 'atomic-grid/dist/ng1';

angular.module('app', [ AtomicGridNg1ModuleFactory(angular) ]);

Template

<table at-grid="myGrid"
       at-grid-data="..."
       at-grid-url="..."
       at-grid-data-provider="...">
  <tr>
    <th at-grid-sort="...">...</th>
    ...
  </tr>
  <tr ng-repeat="item in myGrid.items">
    <td>{{ item.field }}</td>
    ...
  </tr>
</table>

Angular 2

Import

import { AtomicGridNg2Module } from 'atomic-grid/dist/ng2';

@NgModule({
  imports: [
    ...,
    AtomicGridNg2Module
  ]
})
export class AppModule { }

Template

<table #myGrid="atGrid"
       [atGridData]="..."
       [atGridUrl]="..."
       [atGridDataProvider]="...">
  <tr>
    <th atGridSort="...">...</th>
  </tr>
  <tr *ngFor="let item of myGrid.items">
    <td>{{ item.field }}</td>
    ...
  </tr>
</table>

Example projects

See them under the examples folder

Api

Bindings

Angular 1 | Angular 2 | Description --- | --- | --- at-grid="myGrid" | #mygrid="atGrid" | Create a reference for the controller at-grid-data="anArray" | [atGridData]="anArray" | Set an array data provider at-grid-url="api/resource" | atGridUrl="api/resource" | Set a spring data compatible url data provider at-grid-data-provider="..." | TODO | Custom data provider at-grid-additional-parameters="params" | [atGridAdditionalParameters]="params" | Additional parameters for the data provider at-grid-multi-selection="false" | [atGridMultiSelection]="false" | Turn on/off the multi selection

Basics

Controller method / property | Description --- | --- search(): Promise<AtomicGridPage<T>> | Do a search with the current state of the grid items: Array<T> | Get the content of the actual page

Information

Controller method / property | Description --- | --- size: number | Get the actual page size page: number | Get the actual page number totalElements: number | Get the number of total elements totalPages: number | Get the number of total pages pageStart: number | Get the starting record number of the page pageEnd: number | Get the ending record number of the page loading: boolean | Is grid refreshing in progress

Paging

Controller method / property | Description --- | --- isPrevEnabled(): boolean | Is the previous paging enabled? isNextEnabled(): boolean | Is the next paging enabled? first(): void | Jump to the first page prev(): void | Jump to the previous page next(): void | Jump to the next page last(): void | Jump to the last page pager: Array<AtomicGridPagerItem> | Get a pager object to render paging toolbar for the grid

Sorting

Controller method / property | Description --- | --- setSort(sortBy: string|Function, reverse: boolean, append?: boolean): void | Change the grid sorting without doing a search. sort(sortBy: string|Function, append?: boolean) | Change the grid sorting and refresh it's content getSortBy(sortBy: string|Function): AtomicGridSort | Is the grid sort by the given field

Paging

Controller method / property | Description --- | --- setSize(newPageSize: number): void | Change the grid page size without doing a search size: number | Changing the property will change the page size and refresh the grid's content setPage(newPageNumber: number): void | Change the grid page number without doing a search page: number | Changing the property will change the page number and refresh the grid's content

Selection

Controller method / property | Description --- | --- multiSelection: boolean | Getter/setter for is the multiselection enabled for the grid selectedItem: undefined | T | Get the selected item if multiselection is disabled selectedItem: undefined | Array | Get the selected items if multiselection is enabled

Events

Controller method / property | Description --- | --- onBeforeSearch(listener) | Trigger before do a search, can be cancelled onAfterSearch(listener) | Trigger after do a search onBeforeChangeState(listener) | Trigger before change state (page, size, sort), can be cancelled onBeforeChangeSelection(listener) | Trigger before change selection (page, size, sort, selection), can be cancelled

Use cases

Initialize grid state with custom paging and sorting parameters

<!-- Create a reference to the grid controller and disable autosearch -->
<table at-grid="$ctrl.myGrid" at-grid-auto-search="false">...</table>

myGrid: AtomicGridNg1Controller<T>

$postLink() {
  this.myGrid.setSort('field1', true); // Reverse sort by the field1
  this.myGrid.setSort('field2', false, true); // Sort by the field2 appended as second sorting
  this.myGrid.setSize(20); // Set page size to 20
  this.myGrid.setPage(2); // Go the the 2nd page
  this.myGrid.search(); // Do a search to fetch data
}

Prevent changing the grid state

myGrid: AtomicGridNg1Controller<T>

$postLink() {
  this.myGrid.onBeforeChangeState((event: CustomEvent) => {
    event.preventDefault();
    confirm('sdfasdf') && event.detail.do();
  });
}

TODO

• Documentation
• Live examples
• Tests