+++
# -----------------------------------------------------------------------
# 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
Signature
```typescript
export declare class TransformationsEditor extends React.PureComponent
```
Import
```typescript
import { TransformationsEditor } from '@grafana/ui';
```
Properties
| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [onTransformationAdd](#ontransformationadd-property) | | () => void | |
| [onTransformationChange](#ontransformationchange-property) | | (idx: number, config: DataTransformerConfig<any>) => void | |
| [onTransformationRemove](#ontransformationremove-property) | | (idx: number) => void | |
| [renderTransformationEditors](#rendertransformationeditors-property) | | () => JSX.Element | undefined | |
| [state](#state-property) | | {
updateCounter: number;
} | |
Methods
| Method | Modifiers | Description |
| --- | --- | --- |
| [render()](#render-method) | | |
### onTransformationAdd property
Signature
```typescript
onTransformationAdd: () => void;
```
### onTransformationChange property
Signature
```typescript
onTransformationChange: (idx: number, config: DataTransformerConfig) => void;
```
### onTransformationRemove property
Signature
```typescript
onTransformationRemove: (idx: number) => void;
```
### renderTransformationEditors property
Signature
```typescript
renderTransformationEditors: () => JSX.Element | undefined;
```
### state property
Signature
```typescript
state: {
updateCounter: number;
};
```
### render method
Signature
```typescript
render(): JSX.Element;
```
Returns:
`JSX.Element`