+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "TransformationsEditor"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
draft = true
+++

## TransformationsEditor class

<b>Signature</b>

```typescript
export declare class TransformationsEditor extends React.PureComponent<TransformationsEditorProps, TransformationsEditorState> 
```
<b>Import</b>

```typescript
import { TransformationsEditor } from '@grafana/ui';
```
<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [onTransformationAdd](#ontransformationadd-property) |  | <code>() =&gt; void</code> |  |
|  [onTransformationChange](#ontransformationchange-property) |  | <code>(idx: number, config: DataTransformerConfig&lt;any&gt;) =&gt; void</code> |  |
|  [onTransformationRemove](#ontransformationremove-property) |  | <code>(idx: number) =&gt; void</code> |  |
|  [renderTransformationEditors](#rendertransformationeditors-property) |  | <code>() =&gt; JSX.Element &#124; undefined</code> |  |
|  [state](#state-property) |  | <code>{</code><br/><code>        updateCounter: number;</code><br/><code>    }</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [render()](#render-method) |  |  |

### onTransformationAdd property

<b>Signature</b>

```typescript
onTransformationAdd: () => void;
```

### onTransformationChange property

<b>Signature</b>

```typescript
onTransformationChange: (idx: number, config: DataTransformerConfig<any>) => void;
```

### onTransformationRemove property

<b>Signature</b>

```typescript
onTransformationRemove: (idx: number) => void;
```

### renderTransformationEditors property

<b>Signature</b>

```typescript
renderTransformationEditors: () => JSX.Element | undefined;
```

### state property

<b>Signature</b>

```typescript
state: {
        updateCounter: number;
    };
```

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`

