m-grid/README.md

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

# 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>
`