https://github.com/jinhduong/ngx-wdussr-grid

Route-able angular grid
https://github.com/jinhduong/ngx-wdussr-grid

angular grid route-able

Last synced: 27 days ago
JSON representation

Route-able angular grid

• Host: GitHub
• URL: https://github.com/jinhduong/ngx-wdussr-grid
• Owner: jinhduong
• License: apache-2.0
• Created: 2018-10-11T09:09:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-18T10:08:18.000Z (about 6 years ago)
• Last Synced: 2024-10-13T13:23:27.339Z (3 months ago)
• Topics: angular, grid, route-able
• Language: TypeScript
• Size: 28.3 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngx-wdussr-grid

Route-able angular grid

*Why don't use server side rendering*

## Function

- Simple and independence

- Routing-able, history navigation support

- Only support remote data

- New metadata only

## Usage

`npm i ngx-wdussr-grid`

### Template (.html)

``` html

```

### Component (.ts)

``` ts

import { Component, OnInit } from '@angular/core';

import { GridFilter, GridOptions, Col, GridResult } from 'ngx-wdussr-grid';

@Component({

  selector: 'test-component',

  templateUrl: './test.component.html',

})

export class TestComponent implements OnInit {

  options: GridOptions = {

    filtering: true,

    enableNumber: true

  }

  cols: Col[] = [

    { prop: 'no', title: 'No.', width: 5, filtering: false, sorting: false },

    {

      prop: 'name', title: 'Name', cellTemplate: (item) => `${item.name} - ${item.age}`,

    },

    { prop: 'age', title: 'Age' },

    { prop: 'address', title: 'Address' }

  ]

  api = (filter: GridFilter) => {

    // replace by your API

    return Promise.resolve(>{

      data: [

        { name: 'John', age: 24, address: 'Machester' },

        { name: 'Derry', age: 52, address: 'London' }

      ],

      itemsCount: 12

    });

  }

  ngOnInit(): void {

  }

}

```

 ## Interface

 ### Column definition

 ``` ts

 export interface Col {

    prop: string;

    title: string;

    filtering?: boolean;

    sorting?: boolean;

    width?: number;

    alight?: 'left' | 'center' | 'right';

    cellTemplate?: (item: any) => HTMLElement | string;

    filteringSelect?: { val: any, text: string }[];

}

 ```

 ### Filtering

 ``` ts

 export interface GridFilter {

    pageIndex: number;

    pageSize: number;

    sortField?: string;

    sortOrder?: 'asc' | 'desc',

    search?: { [k: string]: string; }

}

 ```

 ### Result

 ``` ts

 export interface GridResult {

    data: Array;

    itemsCount: number;

}

 ```

 ### Options

 ``` ts

 export interface GridOptions {

    filtering?: boolean;

    inserting?: boolean;

    editing?: boolean;

    selecting?: boolean;

    sorting?: boolean;

    paging?: boolean;

    delay?: number;

    refresh?: boolean;

    enableNumber?: boolean;

}

 ```