Angular Table Grid

This project was generated with Angular CLI version 6.0.8.

Usage:

npm install angular-table-grid

import {AngularTableGridModule} from 'angular-table-grid';

@NgModule({
  declarations: [...],
  imports: [
    ...
    AngularTableGridModule,
    ...
  ],
  providers: [],
  entryComponents: [...],
  bootstrap: [...]
})
export class AppModule { }

<lib-table-grid [gridOptions]="gridOptions"></lib-table-grid>

Example

this.gridOptions = {
      enableDetails: true,
      getDetails: (node: any) => {
        return (typeof node.body !== 'undefined') ? node.body : false;
      },
      columns: [
        {
          headerTitle: 'ID',
          fieldName: 'id'
        },
        {
          headerTitle: 'User ID',
          fieldName: 'userId'
        },
        {
          headerTitle: 'Title',
          fieldName: 'title'
        }
      ],
      getRowData: (rowDataRequest: TableGridRowDataRequest) => {
        return http.get<any>('https://jsonplaceholder.typicode.com/posts', {
          params: rowDataRequest.params
        }).pipe(
          map((response) => {
            return <TableGridRowDataResponse>{
              rows: response,
              totalRows: 100
            };
          })
        );
      },
      perPage: 5
    };

<lib-table-grid [gridOptions]="gridOptions"></lib-table-grid>

Grid Options

columns: TableGridColumn[];

This is used to define your tables columns and where to get the field values

getRowData: (rowDataRequest: TableGridRowDataRequest) => Observable;

This is used to tell the module where to get rowData from

enableDetails (optional): boolean;

This is used to enable the details row.
(an expandable row that shows more details about the selected row)

getDetails (optional): (node: object) => any ;

This is used to tell the module where to get the row details from

detailComponent (optional): Type;

This is used to define your own custom component to control the details row rendering

totalRows (optional): number;

Deprecated and soon to be removed

perPage (optional): number;

This is used to define how many rows to show per page. 
This will also enable pagination

page (optoinal): number;

This is used to define the initial page to start on

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.