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:
cards: basic card block, pull out the body pin and select the
advanced table: datatable block.
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.
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.
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:
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.
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.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
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.
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.
"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:
inpin function: select block, connected to the datatable
private function block, where the function's flow starts
ui: return row render block, with all selected fields in the same order as the columns
get: get fields block, again, with all selected fields in alphabetic order
manage fields to do this.
_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.
Pull out the inline edit pin, select
fields: get multiple and select
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.
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.
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.