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.
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.
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: _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.
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 JSON
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.
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:
- 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
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
.
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.
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.