# Load Table

The Load Table step allows you to load a list of rows from a table by a given condition, order, and limit.

The actions returns an array of objects:

```javascript
[
  {
    id: 1,
    name: "Bobbie Bogan II",
    first_name: "Bobbie"
  },
  {
    id: 2,
    name: "Bobbie Bogan II",
    first_name: "Bobbie"
  }
]
```

## Filtering

You can specify a filter condition to locate the row to load, for example:

```javascript
// name like "%Bobbie%"
{{ui.input.value}}
```

You can also specify multiple conditions - the rows will be loaded if all conditions are met.

The condition(s) you specify will be sent to the server and converted to a `SELECT` statement, for example:

```sql
SELECT * FROM users WHERE name LIKE "%Bobbie%" LIMIT 1000;
```

In the action's *Payload* tab, you can check the actual condition sent to the server.

{% hint style="warning" %}
If **no** conditions are specified, the first table row will be loaded.
{% endhint %}

You can also use various *condition operators* to filter the table:

* `like` operator allows you to load rows with a partial match
* `in` operator allows you to load rows with a specific value/list of values

```javascript
// id in array
[1,2,3]
```

## Data transformation

If the database returns its data in a different format than expected for the components, you can modify it. For example, you can turn on the **Transform result** toggle in the action's settings or add a  *JavaScript Code* step to transform the data.

Here are some examples of possible data transformations:

* Access an inner array object and map it to a new array:

```javascript
return {{data}}.map(item => {
  return {
    id: item.id,
    name: item.name.toUpperCase(),
  };
});
```

* Add a new key to the array of objects:

```javascript
return {{data}}.map(item => {
  return {
    ...item, // put all the keys from the original object
    created_at: new Date(), // add a new property
  };
});
```

* Filter an array of objects (short version):

```javascript
return {{data}}.filter(item => item.id > 10);
```

Multiline version:

```javascript
return {{data}}.filter((item) => {
  return item.id > 10;
});J
```