npm install angular-open-datagrid --save

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

imports: [
    BrowserModule,
    AppRoutingModule,
    AngularOpenDatagridModule
  ]

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

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";

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

• 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.

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 );
      }

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 );
      }

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.

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 );
      }

column[number]: Sort tiggered column.

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

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);
    }
      

column[number]: Re-arranged column number.

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

• 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)

• 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
]

• 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'......}]

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'},
        .............................................................................
        ]

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

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.

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

2. Make more fast and smooth.