
# Manipulating the grid

In the previous step [Populating and Fetching Data](/tutorial/realgrid-fetching), you learned how to populate and fetch data into a grid. In this step, we'll look at different ways to manipulate a data-filled grid.

## Sorting Sorting

RealGrid2 includes a [sorting](/guides/column/column-sorting) function that allows users to sort data by clicking on the header area of the grid without any special coding or development.

### User operation

If a user wants to sort a column by clicking its header, the `enabled` property in GridView's [SortingOptions](/refs/Class/GridBase#orderby) is `true` and the column [Header](/refs/Interface/GridHeader )'s [sortable](/refs/Interface/GridHeader#sortable) property must also be `true`. Both properties have a default value of `true`, so if you haven't changed your code, they will be populated by default and then sortable when you click on the header.

### Program manipulation

To sort data columns programmatically, use GridView's [orderBy()](/refs/Class/GridBase#orderby) function.

orderBy function

- The first argument is the name of the column for sorting.
- The second argument is the sorting method.
- The third argument is a case-sensitive type.

no see.

The example below is an example of sorting the ‘Gender’ and ‘Age’ columns in ‘ascending’ and ‘descending’ order, respectively.

```js
gridView.orderBy(
   ['Gender', 'Age'],
   ['ascending', 'descending'],
   ['insensitive', 'insensitive']
);
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);

  // orderBy 함수로 컬럼 정렬하기
  gridView.orderBy(
    ["Gender", "Age"],
    ["ascending", "descending"],
    ["insensitive", "insensitive"]
  );
  
});
```

For more samples about sorting, see the [Data Sorting](/guides/column/column-sorting) guide.

## Grouping

Grouping is one of RealGrid2's powerful features and is a visualization function that groups data to suit the user's needs.

### User operation

If you want the user to specify the column to group directly, you must modify the option to show [Group Panel](/refs/Interface/GroupPanel#group).

```js
gridView.setGroupPanel({ visible: true });
```

When you do this, the Group Panel will be displayed as shown in the demo screen below, and you can group by that column by dragging the column header and hovering over it.

In the demo below, drag the header of the ‘Gender’ column and upload it to the Group Panel.

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);

  gridView.setGroupPanel({ visible: true });
  
});
```

### Program manipulation

To group data programmatically, use GridView's [groupBy()](/refs/Class/GridView#groupby) function.

of groupBy function

- The first argument is an array of column names to group.
- The second argument is whether to sort or not.
- The third argument is the sorting method when sorting.

no see.

```js
gridView.groupBy(['Gender'], true, 'ascending');
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);

  gridView.groupBy(['Gender'], true, 'ascending');
  
});
```

For a detailed explanation of grouping, please refer to the guide.

- [row group](/guides/row-group/row-grouping)
- [Grouping API](/guides/row-group/grouping-api)
- [Row merge grouping](/guides/row-group/merged-row-grouping)

Please refer to .

## Filtering Filtering

Filtering is a function that displays only data that meets the conditions among the DataProvider data in the grid.

### user level

In order for users to filter directly in the grid,

- The [FilteringOptions](/refs/Interface/FilteringOptions#filtering) option must be set so that the GridView can be filtered.

The default value of `enabled` in FilteringOptions is `true`, and the setting can be changed with the [setFilterOptions()](/refs/Class/GridBase#setfilteringoptions) function.

```js
gridView.setFilteringOptions({ enabled: true });
```

[setColumnFilters](/refs/Class/GridBase#setcolumnfilters) function

- The first argument is the name of the column to be set or the column object
- The second argument is an array of filter objects, an array of ColumnFilter

no see.

```js
const filters = [
   {
     name: 'man',
     criteria: "value = 'Male'",
   },
   {
     name: 'woman',
     criteria: "value = 'female'",
   },
];
gridView.setColumnFilters('GenderColumn', filters);
```

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);

  const filters = [
    {
      name: "남자",
      criteria: "value = '남'",
    },
    {
      name: "여자",
      criteria: "value = '여'",
    },
  ];
  
  gridView.setColumnFilters("GenderColumn", filters);

});
```

For information about user-level filtering, see the guide.

- [Data Filtering](/guides/column/column-filtering)
- [Auto Filtering](/guides/column/column-auto-filtering)

Please refer to the section.

### Data-level filters

To manipulate filters at the data level, you can specify filters before filling data using the DataProvider's [setFilters()](/refs/Class/LocalDataProvider#setfilters) function.

In other words, the principle behind data-level filters is that conditions are set before filling data in the DataProvider, and only data that matches the filter conditions are filled during the data filling process.

```js
provider.setFilters({ criteria: "value['Gender']='Female'" });

// Fill data
provider.setRows([
   {
     KorName: "Park Young-ho",
     Gender: “Male”,
     Age: "71",
   },
   ...
]);
```

[setFilters](/refs/Class/LocalDataProvider#setfilters) function

- The first argument is the filter setting value
- The second argument is the filter operation condition `and` or `or`

```js
document.addEventListener('DOMContentLoaded', function () {
  // 설치
  const container = document.getElementById('realgrid');
  const provider = new RealGrid.LocalDataProvider(false);
  const gridView = new RealGrid.GridView(container);
  gridView.setDataSource(provider);

  // 필드 생성
  provider.setFields([
    {
      fieldName: "KorName",
      dataType: "text",
    },
    {
      fieldName: "Gender",
      dataType: "text",
    },
    {
      fieldName: "Age",
      dataType: "number",
    },
  ]);

  // 컬럼 생성
  gridView.setColumns([
    {
      name: "KorNameColumn",
      fieldName: "KorName",
      width: "100",
      header: {
        text: "이름",
      },
    },
    {
      name: "GenderColumn",
      fieldName: "Gender",
      width: "70",
      header: {
        text: "성별",
      },
    },
    {
      name: "AgeColumn",
      fieldName: "Age",
      width: "60",
      numberFormat: "00",
      header: {
        text: "나이",
      },
    },
  ]);

  provider.setFilters({ criteria: "value['Gender']='여'" });

  // 데이터 채우기
  provider.setRows([
    {
      KorName: "박영호",
      Gender: "남",
      Age: "71",
    },
    {
      KorName: "조일형",
      Gender: "남",
      Age: "62",
    },
    {
      KorName: "김덕중",
      Gender: "여",
      Age: "53",
    },
    {
      KorName: "국영석",
      Gender: "남",
      Age: "63",
    },
    {
      KorName: "성노식",
      Gender: "남",
      Age: "66",
    },
    {
      KorName: "김진영",
      Gender: "남",
      Age: "29",
    },
    {
      KorName: "전우수",
      Gender: "여",
      Age: "73",
    },
  ]);
});
```

## Selecting

The way cells are selected in the grid can be modified by setting the [SelectionStyle](/refs/realgrid#selectionstyle) option. SelectionStyle can be changed with the [DisplayOptions.selectionStyle()](/refs/Interface/DisplayOptions#selectionstyle) function.

SelectionStyle is

- BLOCK - Select in block form
- COLUMNS - Select by column
- ROWS - select row by row
- SINGLE - select only one cell
- SINGLE_COLUMN - Select only one column
- SINGLE_ROW - select only one row
- NONE - Not selectable

There are 7 types:

For a demo of each option, see the [Selection](/guides/grid-components/selecting) section of the guide.