AngularOpenDatagrid

Demo

Install

npm install angular-open-datagrid --save

Usage

Import app.module.ts

import {AngularOpenDatagridModule} from 'angular-open-datagrid';

Add to the Imports @NgModule

imports: [
    BrowserModule,
    AppRoutingModule,
    AngularOpenDatagridModule
  ]

Use

<data-grid [pagination]="pagination" [theme]="theme"
                [columnDefs]="columnDefs" [rowData]="rowData"></data-grid>

Icons

For icons install font-awesome

npm install font-awesome --save

and include css in src/styles.scss

@import "../node_modules/font-awesome/css/font-awesome.css";

Table Options

New Options Introduced

• Common Search: Enable common search for the table
• Cache Search: Cache the search for the table

Pagination

• pagination [boolean]: Enable pagination for the table.
• pageSize [number]: Page size for the table. If pagination enabled the page size is the rows in each page.

Events

dataChanged [event]

Get data change event with parameters.

HTML

  <data-grid [pagination]="pagination" [theme]="theme"
                  [columnDefs]="columnDefs" [rowData]="rowData" (dataChanged)="valueChanged($event)" ></data-grid>

JavaScript

  valueChanged (valueChanged){
        console.log("Row: ",valueChanged.row,"Column: ",valueChanged.column, "Data: ",,valueChanged.data );
      }

dataFiltered [event]

Get data change event with parameters.

HTML

  <data-grid [pagination]="pagination" [theme]="theme"
                  [columnDefs]="columnDefs" [rowData]="rowData" (dataFiltered)="filterChanged($event)" ></data-grid>

JavaScript

  filterChanged (filterChanged){
        console.log("IsCommon: ",filterChanged.isCommon, "Column: ",filterChanged.column, "Data: ",filterChanged.filterOptions );
      }

Filter Change Event Parameters

isCommon[boolean]: If filter triggered through common filter.

column[number]: If the filter tiggered from any particular column. This field exists if only isCommon=false.

data[Array]: Filter values.

dataSorted [event]

Get column sort event with parameters.

HTML

  <data-grid [pagination]="pagination" [theme]="theme"
                  [columnDefs]="columnDefs" [rowData]="rowData" (dataSorted)="shortChanged($event)" ></data-grid>

JavaScript

  shortChanged (eventArgs){
        console.log("Column: ",eventArgs.column, "Type: ",eventArgs.type );
      }

Sorted Event Parameters

column[number]: Sort tiggered column.

type[string]: Sort type ascending(ASC) or descending (DESC).

columnRearranged [event]

Get column re-arrange event with parameters.

HTML

  <data-grid [pagination]="pagination" [theme]="theme"
                  [columnDefs]="columnDefs" [rowData]="rowData" (columnRearranged)="columnRearranged($event)" ></data-grid>

JavaScript

    columnRearranged(eventArgs){
      console.log("Change Triggered; Column:",eventArgs.column, " Moved To: ", eventArgs.movedTo);
    }
      

Re-arrange Event Parameters

column[number]: Re-arranged column number.

movedTo[number]: Final column index of the column.

Themes

• theme [string]: Theme based table. The available themes are as follows

1. Matrial Theme (metrial-theme)
2. Dark Theme (dark-theme)
3. Standard Theme (standard-theme)
4. Red Theme (red-theme)

Column Definitions

Mandatory Options

• headerName [string]: Header name of the particular column
• field [string]: Field name mapping to the data rows.
• width [number]: Width of the column in pixel.
• sort [boolean]: Column is sortable.
• filter [boolean]: Can filter can be filtered.

colunDefs[          
          headerName: 'Model',
          field: 'model',
          width: '40px',
          sort: true,
          filter: true
]

Optional Options

• columnFilter [boolean]: This filter is group similar values and make a Special filter for the particular column.
• isEdit [boolean]: Editable the prticular column.
• cellRender [function(row, column, data, colDef)]: Custom column renderer.

Column Definition Example

columnDefs[{
          headerName: 'Model',
          field: 'model',
          width: '40',
          sort: true,
          filter: true,
          cellRender: (row, column, data, def) => {
            return '<a href="#">' + data + '</a>';
          }
        },
        {headerName: 'Make', isEdit: true, field: 'make', width: '40px'......}]

Rows

Simply array of data. Example:

rowData: [
        {make: 'Toyota', model: 'Celica', price: 35000, 'mileage': 30, color: 'red'},
        {make: 'Ford', model: 'Mondeo', price: 32000, 'mileage': 50, color: 'green'},
        .............................................................................
        ]

Binding data with table component

  <data-grid [pagination]=true [theme]="standard-theme"
                  [columnDefs]="columns" [rowData]="data"></data-grid>

Notable Features

1. Theme based data table
2. Column is re-arrangeable using drag-drop
3. Row arrangable.
4. Nice animation for visualization.
5. Edit Cell
6. Copy paste like Microsoft Excel.
7. Export the data as CSV.

Demo

1. Download the zip.
2. Unzip and open CMD and type npm start.

Future Timeline

2. Make more fast and smooth.