Build UI

The next step is to start building your UI. For this purpose, you can use a variety of components available in the Components tab of the left side panel. Simply drag the component you need to and drop it to the working area. One of the most common cases is using the Table component together with the Form.

When you select a component, you can access its properties displayed in the right side panel. Here, you can change any properties you want, for example, adjust table height, hide, delete or change the order of table columns, and so much more. You can also specify the settings for each specific column, as shown in the screen below.

Now, if you're ready to proceed, move on to the next step then. If you'd prefer not to for now, check out the section below 👇

Mocking data

In our flow here, as you've probably noticed, we haven't connected our data source yet. We first started building UI, and the components we added are not displaying the data from our data source.

And we want you to know that it's totally okay 🙂 Sometimes, you may not want to immediately connect your data source to UI Bakery. There could be various reasons for this, such as the data source not being publicly accessible, having certain security restrictions, or simply feeling a bit lazy. We completely understand these situations as we've experienced them ourselves!

If that is the case for you, have a look at a couple of common methods demonstrating how you can mock your data in UI Bakery.