# Create Row

The Create Row step allows you to create a row in a table.

```javascript
{{ui.form.value}}
```

## Sending data as an object

By default, the expected format is an **object** that represents the row to be created. The object *keys* are the column names and the *values* are the values to be inserted.

```javascript
{
  name: "John",
  age: 30
}
```

This object will be sent to the server and converted to an `INSERT` statement, for example:

```sql
INSERT INTO users (name, age) VALUES ('John', 30)
```

{% hint style="info" %}
You can check the action's *Payload* tab to see the actual object sent to the server.
{% endhint %}

Unset fields will be presented as undefined and will not be used in the `INSERT` statement - the table defaults will be applied instead.

```javascript
{
  id: 23,
  created_at: "2022-10-21",
  // this value will not be sent to the server
  required_at: undefined,
}
```

You can always adjust the data before sending it.

### Adding additional values

```javascript
const values = {{ui.form.value}};

return {
  ...values,
  created_at: new Date(),
}
```

{% hint style="warning" %}
The `created_at` column must exist in the table schema, otherwise it will not be sent.
{% endhint %}

### Changing values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  name: values.name.toUpperCase(),
}
```

### Deleting unnecessary values

```javascript
const values = {{ui.form.value}};
delete values.age;
return values;
```

or:

```javascript
const values = {{ui.form.value}};
const { created_at, ...rest } = values;
return rest;
```

### Joining array values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  tags: values.tags.join(','),
}
```

### Using default values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  // if the value is not set, use the default value
  created_at: values.created_at || new Date(),
}
```

## Sending data field by field

You can also send the data field by field by clicking the **JS** button on the right of the *Configure Row* section. This way, you'll switch to the *UI mode* where you can specify each column separately.

```javascript
{{ui.input.value}}
```

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F6cw2pGU47BuycNZpGW9h%2FCleanShot%202025-05-12%20at%2013.36.55%402x-min.png?alt=media&#x26;token=78d343a6-520a-40b8-86fa-1e14a4604d20" alt=""><figcaption></figcaption></figure>

* Specify default values:

```javascript
{{ui.input.value || new Date()}}
```

* Trim spaces:

```javascript
{{ui.input.value.trim()}}
```