{/* Do not edit this file. It is automatically generated by API Documenter. */}


## RealGrid

RealGrid main class

**Signature:**

```typescript
export default class RealGrid
```

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [CustomCellRendererImpl](/refs/Class/RealGrid#customcellrendererimpl) | typeof [CustomCellRendererImpl](/refs/Class/CustomCellRendererImpl) | |
| [GridView](/refs/Class/RealGrid#gridview) | typeof [GridView](/refs/Class/GridView) | Returns GridView Class. See [GridView](/refs/Class/GridView) |
| [LocalDataProvider](/refs/Class/RealGrid#localdataprovider) | typeof [LocalDataProvider](/refs/Class/LocalDataProvider) | Returns LocalDataProvider Class. See [LocalDataProvider](/refs/Class/LocalDataProvider) |
| [LocalTreeDataProvider](/refs/Class/RealGrid#localtreedataprovider) | typeof [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider) | Returns LocalTreeDataProvider Class. See [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider) |
| [TreeView](/refs/Class/RealGrid#treeview) | typeof [TreeView](/refs/Class/TreeView) | Returns TreeView Class. See [TreeView](/refs/Class/TreeView) |

## Methods

| Method | Type | Description |
| --- | --- | --- |
| [createGrid(container, viewConfig, dataConfig)](/refs/Class/RealGrid#creategrid) | static createGrid(container: string \| HTMLDivElement, viewConfig?: [GridViewConfig](/refs/Interface/GridViewConfig){/* */}, dataConfig?: [LocalDataProviderConfig](/refs/Interface/LocalDataProviderConfig){/* */}): \{ gridView: [GridView](/refs/Class/GridView){/* */}; dataProvider: [LocalDataProvider](/refs/Class/LocalDataProvider){/* */}; \}; | Create a grid by entering the container and configuration information. |
| [createTree(container, viewConfig, dataConfig)](/refs/Class/RealGrid#createtree) | static createTree(container: string \| HTMLDivElement, viewConfig: [TreeViewConfig](/refs/Interface/TreeViewConfig){/* */}, dataConfig?: [LocalTreeDataProviderConfig](/refs/Interface/LocalTreeDataProviderConfig){/* */}): \{ treeView: [TreeView](/refs/Class/TreeView){/* */}; dataProvider: [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider){/* */}; \}; | Create a tree grid by entering the container and configuration information. |
| [getActiveGrid()](/refs/Class/RealGrid#getactivegrid) | static getActiveGrid(): any; | Returns the last selected grid. |
| [getGridInstance(container)](/refs/Class/RealGrid#getgridinstance) | static getGridInstance(container: string \| HTMLDivElement): any; | Returns the grid owned by the entered element. |
| [getLocale()](/refs/Class/RealGrid#getlocale) | static getLocale(): [RealGridLocale](/refs/Interface/RealGridLocale){/* */}; | Gets registered locale information. |
| [getVersion()](/refs/Class/RealGrid#getversion) | static getVersion(): string; | Check the version of the installed RealGrid module. |
| [registerCustomRenderer(type, renderer, overwrite)](/refs/Class/RealGrid#registercustomrenderer) | static registerCustomRenderer(type: string, renderer: any, overwrite?: boolean): void; | Register a custom renderer. |
| [setDefault(options, dataOptions)](/refs/Class/RealGrid#setdefault) | static setDefault(options: [ViewOptions](/refs/Interface/ViewOptions){/* */}, dataOptions?: [DataOptions](/refs/Interface/DataOptions){/* */}): void; | Specifies grid preferences. |
| [setIECompatMode(value)](/refs/Class/RealGrid#setiecompatmode) | static setIECompatMode(value: boolean): void; | Used when using the grid in IE mode using a browser extension. |
| [setLicenseKey(key)](/refs/Class/RealGrid#setlicensekey) | static setLicenseKey(key: string): void; | Enter the grid licenseKey. |
| [setLocale(locale)](/refs/Class/RealGrid#setlocale) | static setLocale(locale: [RealGridLocale](/refs/Interface/RealGridLocale){/* */}): void; | Register messages and numberFormat used in the grid. |
| [setMobile(value)](/refs/Class/RealGrid#setmobile) | static setMobile(value: boolean): void; | Ensure that the grid is created in mobile mode. |
| [setSlotMode(value)](/refs/Class/RealGrid#setslotmode) | static setSlotMode(value: boolean): void; | Set when creating as a child of shadowDom or slot. |
| [setTablet(value)](/refs/Class/RealGrid#settablet) | static setTablet(value: boolean): void; | Ensure that the grid is created in tablet mode. |
## Properties Desc

### CustomCellRendererImpl

`Type` - typeof [CustomCellRendererImpl](/refs/Class/CustomCellRendererImpl)

<hr/>

### GridView

Returns GridView Class. See [GridView](/refs/Class/GridView)

`Type` - typeof [GridView](/refs/Class/GridView)

<hr/>

### LocalDataProvider

Returns LocalDataProvider Class. See [LocalDataProvider](/refs/Class/LocalDataProvider)

`Type` - typeof [LocalDataProvider](/refs/Class/LocalDataProvider)

<hr/>

### LocalTreeDataProvider

Returns LocalTreeDataProvider Class. See [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider)

`Type` - typeof [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider)

<hr/>

### TreeView

Returns TreeView Class. See [TreeView](/refs/Class/TreeView)

`Type` - typeof [TreeView](/refs/Class/TreeView)

<hr/>

## Method Desc

### createGrid

Creates a grid by entering a container and configuration information.

**\[Parameter List\]**

`container` - string \| HTMLDivElement

The id of the div where the grid will be placed, or a div object.

`viewConfig` - [GridViewConfig](/refs/Interface/GridViewConfig)

Grid configuration values

`dataConfig` - [LocalDataProviderConfig](/refs/Interface/LocalDataProviderConfig)

LocalDataProvider configuration values

**\[Return Value\] -** \{ gridView: [GridView](/refs/Class/GridView){/* ​​*/}; dataProvider: [LocalDataProvider](/refs/Class/LocalDataProvider){/* */}; \}

<hr/>

### createTree

Creates a tree grid by entering a container and configuration information.

**\[Parameter List\]**

`container` - string \| HTMLDivElement

The id of the div where the tree grid will be placed, or a div object.

`viewConfig` - [TreeViewConfig](/refs/Interface/TreeViewConfig)

TreeGrid configuration values.

`dataConfig` - [LocalTreeDataProviderConfig](/refs/Interface/LocalTreeDataProviderConfig)

LocalTreeDataProvider configuration values.

**\[Return Value\] -** \{ treeView: [TreeView](/refs/Class/TreeView){/* ​​*/}; dataProvider: [LocalTreeDataProvider](/refs/Class/LocalTreeDataProvider){/* */}; \}

<hr/>

### getActiveGrid

Returns the last selected grid.

**Remarks:**

Even if the currently selected element is not a grid, the last selected grid is returned.

<hr/>

### getGridInstance

Returns the grid owned by the entered element.

**\[Parameter List\]**

`container` - string \| HTMLDivElement

elementID or element used when creating the grid

**\[return value\] -** any

<hr/>

### getLocale

Gets registered locale information.

**Remarks:**

If not specified, gets the default locale.

<hr/>

### getVersion

Check the version of the installed RealGrid module.

<hr/>

### registerCustomRenderer

Register a custom renderer.

**\[Parameter List\]**

`type` - string

User-specified renderer type (name)

`renderer` - any

[CustomCellRenderer](/refs/Interface/CustomCellRenderer) object

`overwrite` - boolean

If `true`{/* */}, it replaces the previously defined renderer.

**\[Return Value\] -** void

**Example:**


```js
// CustomCellRenderer model
gridView.registerCustomRenderer("renderer01", {
     initContent(parent) {
         var span = this._span = document.createElement("span");
         parent.append(span);
     }
})
// When creating a class.
class CustomSpanRenderer extends RealGrid.CustomCellRendererImpl {
     private _span: HTMLSpanElement; // Add properties that require a renderer.
     getstyleName() {
         return 'rg-renderer custom-span' // return class name
     }
     get refreshFocusChanged() {
         return true; // If focus changes, execute render again.
     }
     private spanClickHandler = (e: MouseEvent) => { // If you make it an arrow function, this refers to an instance of the class even if you do not bind it when addingEventListener.
     }
     protected _doInitContent(dom: HTMLElement): void {
         const span = this._span = document.createElement("span");
         span.addEventListener("click", this.spanClickHandler); // Must be removed.
         dom.appendChild(this._span);
     }
     protected _doClearContent(dom: HTMLElement): void {
         this._span.parentElement && this._span.parentElement.removeChild(this._span);
         this._span.removeEventListener("click", this.spanClickHandler);
     }
     protected render(grid: GridBase, model: GridCell, w: number, h: number, info: any): void {
         this._span.textContent = model.value || "";
         const css = this._span.style;
         css.removeProperty("color");
         if (info.focused) {
             css.color = "red"
         }
     }
}
```

<hr/>

### setDefault

Set grid preferences.

**\[Parameter List\]**

`options` - [ViewOptions](/refs/Interface/ViewOptions)

option object

`dataOptions` - [DataOptions](/refs/Interface/DataOptions)

dataProvider option object

**\[Return Value\] -** void

**Remarks:**

If specified in the same form as [GridBase.setOptions()](/refs/Class/GridBase#setoptions){/* */}, it will be applied as the default setting for the grid created thereafter.

<hr/>

### setIECompatMode

Use this when using the grid in IE mode using a browser extension.

**\[Parameter List\]**

`value` - boolean

boolean

**\[Return Value\] -** void

**Remarks:**

In IE mode of the extension, change `pointerEvent`{/* */} to use `mouseEvent`{/* */}. It must be set before the grid is created.

<hr/>

### setLicenseKey

Enter the grid licenseKey.

**Remarks:**

Used when storing licenseKey in an environment variable.

<hr/>

### setLocale

Register messages and numberFormat used in the grid.

**\[Parameter List\]**

`locale` - [RealGridLocale](/refs/Interface/RealGridLocale)

locale object

**\[Return Value\] -** void

<hr/>

### setMobile

Ensure that the grid is created in mobile mode.

**\[Parameter List\]**

`value` - boolean

boolean

**\[Return Value\] -** void

**Remarks:**

If the grid cannot check the mobile state of the browser, change it to the mobile state using RealGrid.setMobile(true). This must be set before the grid is created.

<hr/>

### setSlotMode

Set when creating as a child of shadowDom or slot.

**\[Parameter List\]**

`value` - boolean

boolean;

**\[Return Value\] -** void

**Remarks:**

Filter, listEditor, etc. are created inside the grid. Some functions such as drag&amp;drop cannot be used.

<hr/>

### setTablet

Ensure that the grid is created in tablet mode.

**\[Parameter List\]**

`value` - boolean

boolean;

**\[Return Value\] -** void

**Remarks:**

If you cannot confirm whether the device is a tablet, change it to tablet status using RealGrid.setTablet(true). This must be set before the grid is created.

<hr/>