# angular-switchable-grid

> [![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) [!

Latest version **2.0.0** (published 2019-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-switchable-grid
pnpm add angular-switchable-grid
yarn add angular-switchable-grid
bun add angular-switchable-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-12-04 |
| First published | 2017-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 112.7 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 11 |
| Maintainers | brionmario, sanuradhag |
| Keywords | angular grid, angular tile grid, angular list grid, angular switchable grid |

## Links

- npm: https://www.npmjs.com/package/angular-switchable-grid
- Repository: https://github.com/sanuradhag/angular-switchable-grid
- Issues: https://github.com/sanuradhag/angular-switchable-grid/issuess
- npm.io page: https://npm.io/package/angular-switchable-grid

## Dependencies (4)

- [xlsx](https://npm.io/package/xlsx.md) ^0.11.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [file-saver](https://npm.io/package/file-saver.md) ^1.3.3
- [compass-mixins](https://npm.io/package/compass-mixins.md) ^0.12.10

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2019-12-04
- 1.2.1 — 2018-02-15
- 1.2.0 — 2018-02-15
- 1.1.8 — 2018-02-08
- 1.1.7 — 2018-01-27
- 1.1.6 — 2018-01-14
- 1.1.5 — 2018-01-14
- 1.1.4 — 2018-01-10
- 1.1.3 — 2018-01-10
- 1.1.2 — 2017-11-15
- 1.1.1 — 2017-11-14
- 1.1.0 — 2017-11-01
- 1.0.11 — 2017-10-01
- 1.0.10 — 2017-09-28
- 1.0.9 — 2017-09-20
- … 12 more at https://npm.io/package/angular-switchable-grid/versions

## README

# Angular Switchable Grid

[![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)
[![npm week downloads](https://img.shields.io/npm/dw/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid)
[![npm month downloads](https://img.shields.io/npm/dm/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid)
[![npm  year downloads](https://img.shields.io/npm/dy/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid)
[![npm license](https://img.shields.io/npm/l/angular-switchable-grid.svg)](https://badge.fury.io/js/angular-switchable-grid)

A simple grid for angular, Which can be switched between typical List view and a tile block view


### Demo

https://sanuradhag.github.io/angular-switchable-grid/

### Installation

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>


### Styles 

Style guide will be added soon.


### Documentation
   
##### angular-switchable-grid properties.

   
   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.

### ToDo

* Grid pagination.
* Lazy loading.


### Any suggestions?

  Drop me a e-mail saggunasekara@gmail.com.   
  
  Or open a new issue in https://github.com/sanuradhag/angular-switchable-grid/issues

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 [<img src="https://avatars0.githubusercontent.com/u/24251976?s=400&v=4" width="100px;"/><br /><sub>Anuradha Gunasekara</sub>][anuradha-profile]| [<img src="https://avatars0.githubusercontent.com/u/25959096?s=400&v=4" width="100px;"/><br /><sub>Brion Mario</sub>][brion-profile]|
| :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->

## License

This software is licensed under the MIT license

[license-badge]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license]: https://github.com/yohangz/scala-play-angular-seed/blob/master/LICENSE

[anuradha-profile]: https://github.com/sanuradhag
[brion-profile]: https://github.com/brionmario

---
_Source: https://npm.io/package/angular-switchable-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._