Load Table

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

Specify the filter condition to find the row to load:

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

You can also specify multiple conditions, in this case the rows will be loaded if all conditions are met.

This condition will be sent to the server and converted to a SELECT statement like this:

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

Note: you can check the Payload section to see the actual condition sent to the server.

Note: if the conditions aren't specified, the first row will be loaded.

Load Table action returns an array of objects response:

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

Use can also use various condition operators to filter the table. For example, to load rows with a partial match, use the like operator. The in operator allows you to load rows with a specific value or a list of values:

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

Data transformation

If the database returns its data in a different format than the components expect, enable transform result toggle or add a new Code step to transform the data.

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

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

Add a new key to the array of objects:

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

Filter array of objects, short version:

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

Multiline version:

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

Last updated

© 2024 UI Bakery