<commit_before>﻿# igx-grid
**igx-grid** component provides the capability to manipulate and represent tabular data.
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)

## Usage
```html
<igx-grid #grid1 [data]="localData" [autoGenerate]="true"
    (onColumnInit)="initColumns($event)" (onCellSelection)="selectCell($event)">
</igx-grid>
```

## Getting Started

### Dependencies
The grid is exported as as an `NgModule`, thus all you need to do in your application is to import the _IgxGridModule_ inside your `AppModule`

```typescript
// app.module.ts

import { IgxGridModule } from 'igniteui-angular/main';
// Or
import { IgxGridModule } from 'igniteui-angular/grid';

@NgModule({
    imports: [
        ...
        IgxGridModule.forRoot(),
        ...
    ]
})
export class AppModule {}
```

Each of the components, directives and helper classes in the _IgxGridModule_ can be imported either through the _grid_ sub-package or through the main bundle in _igniteui-angular_. While you don't need to import all of them to instantiate and use the grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API.

```typescript
import { IgxGridComponent } from 'igniteui-angular/grid/';
// Or
import { IgxGridComponent } from 'igniteui-angular/main'
...

@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;
```

### Basic configuration

Define the grid
```html
<igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false'>
    <igx-column [field]="'ProductID'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Category'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Type'" [width]="'150px'"></igx-column>
    <igx-column [field]="'Change'" [width]="'120px'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change</span>
        </ng-template>
    <igx-column [field]="'Change(%)'" [width]="'130px'" [dataType]="'number'" [formatter]="formatNumber">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change(%)</span>
        </ng-template>
    </igx-column>
</igx-grid>
```

When all needed dependencies are included, next step would be to configure local or remote service that will return grids data. For example:

```typescript
@Injectable()
export class FinancialSampleComponent {
    @ViewChild("grid1") public grid1: IgxGridComponent;
    public data: Observable<any[]>;
    constructor(private localService: LocalService) {
        this.localService.getData(100000);
        this.data = this.localService.records;
    }
    public ngOnInit(): void {
    }
    public formatNumber(value: number) {
        return value.toFixed(2);
    }
    public formatCurrency(value: number) {
        return "$" + value.toFixed(2);
    }
}
```

Create the Grid component that will be used in the application. This will include:
- implement some sorting or paging for example.

```typescript
public ngOnInit(): void {
    this.grid1.state = {
        paging: {
            index: 2,
            recordsPerPage: 10
        },
        sorting: {
            expressions: [
                {fieldName: "ProductID", dir: SortingDirection.Desc}
            ]
        }
    };
}

```

- enable some features for certaing columns

```typescript
public initColumns(event: IgxGridColumnInitEvent) {
    const column: IgxColumnComponent = event.column;
    if (column.field === "Change") {
        column.filterable = true;
        column.sortable = true;
        column.editable = true;
    }
}
```

- Аdd event handlers for CRUD operations

```typescript
public addRow() {
    if (!this.newRecord.trim()) {
    this.newRecord = "";
    return;
    }
    const record = {ID: this.grid1.data[this.grid1.data.length - 1].ID + 1, Name: this.newRecord};
    this.grid1.addRow(record);
    this.newRecord = "";
}

public updateRecord(event) {
    this.grid1.updateCell(this.selectedCell.rowIndex, this.selectedCell.columnField, event);
    this.grid1.getCell(this.selectedCell.rowIndex, this.selectedCell.columnField);
}

public deleteRow(event) {
    this.selectedRow = Object.assign({}, this.grid1.getRow(this.selectedCell.rowIndex));
    this.grid1.deleteRow(this.selectedCell.rowIndex);
    this.selectedCell = {};
    this.snax.message = `Row with ID ${this.selectedRow.record.ID} was deleted`;
    this.snax.show();
}
```

## API

### Inputs

Below is the list of all inputs that the developers may set to configure the grid look/behavior:


|Name|Type|Description|
|--- |--- |--- |
|`id`|string|Unique identifier of the Grid. If not provided it will be automatically generated.|
|`data`|Array|The data source for the grid.|<commit_msg>chore(*): Updating ReadMe.<commit_after>﻿# igx-grid
**igx-grid** component provides the capability to manipulate and represent tabular data.
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)

## Usage
```html
<igx-grid #grid1 [data]="localData" [autoGenerate]="true"
    (onColumnInit)="initColumns($event)" (onCellSelection)="selectCell($event)">
</igx-grid>
```

## Getting Started

### Dependencies
The grid is exported as as an `NgModule`, thus all you need to do in your application is to import the _IgxGridModule_ inside your `AppModule`

```typescript
// app.module.ts

import { IgxGridModule } from 'igniteui-angular/main';
// Or
import { IgxGridModule } from 'igniteui-angular/grid';

@NgModule({
    imports: [
        ...
        IgxGridModule.forRoot(),
        ...
    ]
})
export class AppModule {}
```

Each of the components, directives and helper classes in the _IgxGridModule_ can be imported either through the _grid_ sub-package or through the main bundle in _igniteui-angular_. While you don't need to import all of them to instantiate and use the grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API.

```typescript
import { IgxGridComponent } from 'igniteui-angular/grid/';
// Or
import { IgxGridComponent } from 'igniteui-angular/main'
...

@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;
```

### Basic configuration

Define the grid
```html
<igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false'>
    <igx-column [field]="'ProductID'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Category'" [width]="'120px'" [filterable]='true' ></igx-column>
    <igx-column [field]="'Type'" [width]="'150px'"></igx-column>
    <igx-column [field]="'Change'" [width]="'120px'" [dataType]="'number'" [headerClasses]="'headerAlignSyle'">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change</span>
        </ng-template>
    <igx-column [field]="'Change(%)'" [width]="'130px'" [dataType]="'number'" [formatter]="formatNumber">
        <ng-template igxHeader>
            <span class="cellAlignSyle">Change(%)</span>
        </ng-template>
    </igx-column>
</igx-grid>
```

When all needed dependencies are included, next step would be to configure local or remote service that will return grids data. For example:

```typescript
@Injectable()
export class FinancialSampleComponent {
    @ViewChild("grid1") public grid1: IgxGridComponent;
    public data: Observable<any[]>;
    constructor(private localService: LocalService) {
        this.localService.getData(100000);
        this.data = this.localService.records;
    }
    public ngOnInit(): void {
    }
    public formatNumber(value: number) {
        return value.toFixed(2);
    }
    public formatCurrency(value: number) {
        return "$" + value.toFixed(2);
    }
}
```

Create the Grid component that will be used in the application. This will include:
- implement some sorting or paging for example.

```typescript
public ngOnInit(): void {
    this.grid1.state = {
        paging: {
            index: 2,
            recordsPerPage: 10
        },
        sorting: {
            expressions: [
                {fieldName: "ProductID", dir: SortingDirection.Desc}
            ]
        }
    };
}

```

- enable some features for certaing columns

```typescript
public initColumns(event: IgxGridColumnInitEvent) {
    const column: IgxColumnComponent = event.column;
    if (column.field === "Change") {
        column.filterable = true;
        column.sortable = true;
        column.editable = true;
    }
}
```

- Аdd event handlers for CRUD operations

```typescript
public addRow() {
    if (!this.newRecord.trim()) {
    this.newRecord = "";
    return;
    }
    const record = {ID: this.grid1.data[this.grid1.data.length - 1].ID + 1, Name: this.newRecord};
    this.grid1.addRow(record);
    this.newRecord = "";
}

public updateRecord(event) {
    this.grid1.updateCell(this.selectedCell.rowIndex, this.selectedCell.columnField, event);
    this.grid1.getCell(this.selectedCell.rowIndex, this.selectedCell.columnField);
}

public deleteRow(event) {
    this.selectedRow = Object.assign({}, this.grid1.getRow(this.selectedCell.rowIndex));
    this.grid1.deleteRow(this.selectedCell.rowIndex);
    this.selectedCell = {};
    this.snax.message = `Row with ID ${this.selectedRow.record.ID} was deleted`;
    this.snax.show();
}
```

- Аdd cell template to allow cells to grow according to their content.

```
        <ng-template igxCell let-cell="cell" let-val>
        {{val}}
        </ng-template>
```

## API

### Inputs

Below is the list of all inputs that the developers may set to configure the grid look/behavior:


|Name|Type|Description|
|--- |--- |--- |
|`id`|string|Unique identifier of the Grid. If not provided it will be automatically generated.|
|`data`|Array|The data source for the grid.|
{'fraction_non_alphanumeric': 0.14228577142285773, 'fraction_numerical': 0.0091990800919908, 'mean_word_length': 3.5922865013774103, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '818687', 'n_tokens_mistral': 3221, 'n_tokens_neox': 3056, 'n_words': 827}