Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
angular-switchable-grid
Advanced tools
Readme
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
FAQs
[![npm version](https://badge.fury.io/js/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid) [![npm all downloads](https://img.shields.io/npm/dt/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid) [!
The npm package angular-switchable-grid receives a total of 40 weekly downloads. As such, angular-switchable-grid popularity was classified as not popular.
We found that angular-switchable-grid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.