# m-grid

> `m-grid@latest` in you project via the terminal.

Latest version **0.0.29** (published 2017-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install m-grid
pnpm add m-grid
yarn add m-grid
bun add m-grid
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.29 |
| Published | 2017-12-27 |
| First published | 2017-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Known vulnerabilities | 0 (+25 in 5 direct dependencies) |
| Install scripts | no |
| Maintainers | ng-ninja |
| Keywords | angular, angular2, angular 2, angular 5 |

## Links

- npm: https://www.npmjs.com/package/m-grid
- npm.io page: https://npm.io/package/m-grid

## Dependencies (15)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [ag-grid](https://npm.io/package/ag-grid.md) ^14.2.0
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.14
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0
- [ag-grid-angular](https://npm.io/package/ag-grid-angular.md) ^14.2.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.0
- [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^9.0.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0

## Recent versions

- 0.0.29 (latest) — 2017-12-27
- 0.0.28 — 2017-12-27
- 0.0.27 — 2017-12-24
- 0.0.24 — 2017-12-24
- 0.0.23 — 2017-12-24
- 0.0.22 — 2017-12-21
- 0.0.21 — 2017-12-21
- 0.0.20 — 2017-12-21
- 0.0.17 — 2017-12-21
- 0.0.16 — 2017-12-20
- 0.0.15 — 2017-12-20
- 0.0.14 — 2017-12-20
- 0.0.13 — 2017-12-20
- 0.0.12 — 2017-12-20
- 0.0.11 — 2017-12-20
- … 11 more at https://npm.io/package/m-grid/versions

## README

# M-grid!

## Run npm install for m-grid

`m-grid@latest` in you project via the terminal.

### Connect to Angualr project
1. Import the m-grid module from in your app.module
    example:
 `import { MgridModule } from 'm-grid';`

2. import the module in the your component
    example: `<app-mgrid></app-mgrid>`

Pass data to the selector.

Pass `columnDefinitions` in the selector **(example below)**


Pass `gridOptions`to the selector **(example below)**.

In your component:


`<app-mgrid [data]="data"></app-mgrid>`


### Column Definition
The component can construct columns by your definition with your options. 


**if not provided it will revert to default column definition.**


**Note**: You must provide `'headerName'` and `'field'` that are consistent with your data set.


example:
   ` {
        headerName: "Headername",
        field: "field",
        width: 100,
    };`


`<app-mgrid [columnDefs]="columnDefs"></app-mgrid>`


more options for column defs can be found in the 
[ag-grid official documentaion](https://www.ag-grid.com/javascript-grid-features/#gsc.tab=0)

### GridOption
There are no default options on the grid grid right now. 
you can specify you own and pass them to the component like this.


`<app-mgrid [options]="gridOptions"></app-mgrid>`


`
gridOptions = {
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    enableRtl: false,
};
`

### Styles

The grid comes with 2 basic styles and a custom one **(custom is in development at this moment)**.

In order to use the styles (any styles including your own) the **default** ag-grid style must be added to the **angualr cli**.
and `ng-serve` again.

`
"styles": [

    "styles.scss"

    "../node_modules/ag-grid/dist/styles/ag-grid.css"

    "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"

    "../node_modules/ag-grid/dist/styles/ag-theme-dark.css"

    "../node_modules/ag-grid/dist/styles/ag-theme-material.css"
]`


#### You must pass a class Name to use the grid before it initialized.

in your main component that loads the grid create a variable name "theme" and give it a string of
`ag-theme-dark`,

`ag-theme-fresh`,

`ag-theme-mprest`,

`ag-theme-material`,

and pass it to the component.


`
    <app-mgrid 
    [data]="data"
    [theme]="theme"
    >
    </app-mgrid>
`

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