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 gridOptionsto 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

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>