A simple grid for angular, Which can be switched between typical List view and a tile block view
https://sanuradhag.github.io/angular-switchable-grid/
Install through npm;
npm install --save angular-switchable-grid
Then import GridModule
and include it in your apps for module.
import { Component, NgModule } from '@angular/core';
import { GridModule } from 'angular-switchable-grid';
@NgModule({
imports: [
GridModule
]
})
export class MyModule {}
Then add angular-switchable-grid
to your app template.
<angular-switchable-grid
[data]="data"
[columns]="columnTitles"
[enableSelection]="true"
[enableMultiSelect]="true"
[filterBy]="'first_name'"
[filterTerm]="filterTerm"
[enableSort]="true"
[isGridView]="isGridView"
[noDataTemplate]="null"
(getSelectedItems)="getSelectedItems($event)">
<ng-template let-item>
<div>{{item.id}}</div>
<div>{{item.first_name}}</div>
<div>{{item.last_name}}</div>
<div>{{item.email}}</div>
<div>{{item.gender}}</div>
<div>{{item.ip_address}}</div>
</ng-template>
</angular-switchable-grid>
Style guide will be added soon.
Property | Input/Output | Default value | Description |
---|---|---|---|
[data] | Input | [] - empty array | The data to be displayed in the grid. |
[columns] | Input | [] - empty array | Titles of the columns in the grid. Type should be Array<{ property: string, displayName: string, width?: string }> |
[enableSelection] | Input | false | Enable the selection of the rows of the grid. |
[enableMultiSelect] | Input | false | Enable the multiple selection of the rows of the grid. |
[filterBy] | Input | '' - empty string | Grid will be filtered by this key. |
[filterTerm] | Input | '' - empty string | Grid will filter its's content by the filterBy and will display only the items which are similar to the this. |
[enableSort] | Input | false | Enables sorting in the grid |
[enablePagination] | Input | false | Enables pagination in the grid |
[isGridView] | Input | false | If sets to true, Grid's view will be changed to Tile view from List view. |
[noDataTemplate] | Input | Simple text 'No Data' | The template that will be displayed when there is no data. |
(getSelectedItems) | Output | [] - empty array | Will emit the selected items when user is selecting items from the grid. |
And should pass a template for the row template.
<ng-template let-item>
<div>{{item.id}}</div>
<div>{{item.first_name}}</div>
<div>{{item.last_name}}</div>
<div>{{item.email}}</div>
<div>{{item.gender}}</div>
<div>{{item.ip_address}}</div>
</ng-template>
Public methods that can be used to access features of the grid.
exportAsExcelFile() - Export the grid data to a excel file.
selectAll() - Select all the items in the grid.
deselectAll() - Deselect all selected item in the grid.
Drop me a e-mail saggunasekara@gmail.com.
Or open a new issue in https://github.com/sanuradhag/angular-switchable-grid/issues
Anuradha Gunasekara |
Brion Mario |
---|
This software is licensed under the MIT license