Datatable

Show your data on a web page.

Simple datatable

In this tutorial we continue with the page "Hello World". You should at least have finished the tutorial: save form data. We use the code you made there. After adding the datatable, your page will look like the image to the right

Before you start

There are a lot of ways to show data, but one of the most common ways is to present it in the form of a table, where each field is shown in a column, with headers consisting of the field name, and all the data is listen in rows. Since this format is used so often, we made a special advanced table: datatable block in Rual studio that returns a datatable with several options to select, search, filter, edit and delete the data. These options can be switched on or off, as you will see in the last paragraph of this tutorial.

Of course it is also possible to make your own table in Rual. You can use the table: basic table block and style it to your own liking with table: row and table: column blocks.

Let's start with the datatable. The page section in the blueprint you made so far, should look like the image to the right:

Add datatable

We will fill the body of our card with the datatable. First we need some space. Select the blocks in the footer (hold right mouse button and drag) and move these a bit further down. In the cards: basic card block, pull out the body pin and select the advanced table: datatable block.

The advanced table: datatable has a lot of pins, so a lot of finetuning can be done. The pins that have a solid color (storage and columns) are required. The opaque pins are optional.

To fill the datatable, start with selecting the storage, just like the storage: create document, you can click on select storage or use the Storage pin. You will see the available storages. Choose the storage registrants.

TIP

If you click on the text of the pin, a label with a short description will open. You can read these for all pins of the advanced table: datatable to get an impression of the possibilities.

Select fields

The columns pin is where you select the fields that you want to show in the table. Pull out the pin and select fields: get multiple.
NOTEYou will see a list with all fields that are defined in your cluster. Your storage probably does not have all those fields! But there are some special fields that are noteworthy here: _meta.created and _meta.guid.

For the datatable, select the _meta.created field by clicking on it. After clicking on a field, the field you selected wil get a dark background. Made a mistake? Just click on the field again and it will be deselected.

TIP

The colored border before the field names indicate the field type, similar to the colors of the pins. A green border indicates a value type (string), a blue border indicates a number type. Clicking on the trash bin will remove the field definition. We will come back to that later.

Meta data

Every document that is saved in the Rual platform, has metadata that tell you when the document is created, in which storage it is stored, when and if it is updated/removed. Every document has it's own GUID, a unique identifier. The _meta.guid field makes it easy to retrieve documents within your program. You can view the JSON of every document by clicking left click on a row in a datatable, A context menu will be opened. In this menu you can select JSON

Continue selection

Continue selecting the fields that we used in the form: firstname, lastname, phonenumber and birthdate. Change the order of the fields with the up and down arrows on the right, this sets the order in which the columns are shown.

Result

If you click on the view button in the page block, you see the standard datatable on your page, like in the picture on the right. If you do not see any data, just fill out the form a few times to create some extra registrants. Just press the register button you created in the previous tutorial.

Row render

In Rual all dates are stored as timestamps. For example, in the screenshot of the metadata above, you see "created": 1580163827. In the datatable this date is changed to a human readable format. But still it looks a bit awkward with the time in seconds. And for the date of birth you do not want to show a time at all.

To set the format of fields in the datatable, use the row render pin. Drag this out and choose inpin function: select. Type renderDatatable to create a new function. Hit enter and you see four new blocks:
- the inpin function: select block, connected to the datatable
- the private function block, where the function's flow starts
- the ui: return row render block, with all selected fields in the same order as the columns
- the get: get fields block, again, with all selected fields in alphabetic order

Date format

Move the function a bit to the side, to create some room to work. You can remove the fields where you want to use the standard format. Use manage fields to do this. From the _meta.created content pin pull out a line and select format: date. Connect the date pin to the _meta.created outpin from the get: get fields block. Pull out the format pin with the right mouse button to get a custom: value block. Type the format you like to use in this block. Go to momentjs.com to see the formats Rual supports. Type YYYY-MM-DD (HH:mm) in the text field. Do the same for the birthdate field, use MMMM Do YYYY.

Inline edit

In this tutorial we add one more gadget to our datatable: inline editing. Inline edit is an option that lats you edit the given column. This way you dont need to make an extra page or modal with extra logic only te edit 1 field.

Pull out the inline edit pin, select fields: get multiple and select lastname and course. Please note, we have not used the field course before, so you can create it. Choose string as field type.

If you check out your page, you will see a pencil next to lastname, but you will not see the column with the new course field. Can you figure out why?

Go back to the columns pin and use the manage fields button in the fields: get multiple block to add the field course. Now you will see this column in the datatable.

Scopes

As you will understand, you cannot just allow anyone to change the data you present on your website or in your in company application. That's why you can select a scope for the inline edit. This way you can organise who can do / see what.

Rual advises to set the basic scope set to [storagename]_view, _create, _update and _remove. You can set any scope you like, and these will be remembered and can be used throughout your cluster in Rual. Pull out the inline edit scope pin, and select the scope registrants_update. You can create it if it does not exist yet.

Options

The checkboxes allow you to do something with multiple selected rows at the same time, for example to export them, or to change the contents of a field for more records at once. For this, you have to define a button and a function that handles this in the backend. It is not something you can select in the advanced table: datatable block.

In the frontend page, you see a little trashbin at the end of every row. The trashbin deletes the document. Go ahead and try it. You will get a warning first. You can add a scope to the remove button, so only some users will have access to it. Or you can decide to hide the remove button for everyone. For these options you can use the remove scope and hide remove pins in the advanced table: datatable.

These are just 2 of the many options the datatable has to offer. you can try each pin for yourself and see what happens. If you want to read more about the pins you can checkout the Datatabel Block Docs.

This ends the datatable tutorial. There are several ways to continue the tutorials now, an easy one with a lot of impact is to go to tutorial: simple styling. If you have not done the tutorial: form validation yet, this is also a good point to go there.