Premiums table
The premiums table is a special component that is used to display a table. With that component we can display the different form elements in rows and cols.
A table is defined by a two main properties : headers and rows or repeatableRow, if the repeatableRow is defined, the iterations property is also required. The headers property is an array of objects that defines the columns of the table. The rows property is an array of objects that defines the rows of the table. Each row is an array of objects that defines the cells of the row. They both takes an array of objects that defines the cells of the row. Each cell is an object that defines the content of the cell.
By default the table component act as a section component, that means that the slug of the table will be used as a prefix for each field defined in the table. If we want to change that behavior, we can set the premiums_table as property to group. That way the table will act as a group component and will not prefix the fields defined in the table.
The premiums table can have the following properties : headers, rows, as, className, visible, readOnly.
The read only property is used to define if the table should be read only or not. If the property is not set, the table will not be read only. If the property is set to true, the table will be read only. If the property is set to false, the table will not be read only.
Headers
The headers property is an array of objects that defines the columns of the table. Each object in the array is a column. The object can have the following properties: title, size, tooltip, visible and className. title, tooltip and visible works like defined in this documentation. The className is mainly used to define the style of the column.
If we don"t want to have a header for a columnt, we can set an empty object in the array.
It should be the same amount of headers that the cells in the rows, otherwise the table will not be rendered properly.
If we don"t want to display a header for the entire table, we can set an empty array for the headers property. But if we want to define the column size of the table without having a header, we can pass headers object without the title property. If every headers object does not have the title property, the table will not render the headers, but will set the other properties defined in the header like size, visible, className.
Size
There are 2 ways to define the size property. We can directly pass the size in % like 25% or we can pass an operation that will represent the size of the column 3/12. The operation can be any operation that can be evaluated by the mathjs library. The library will evaluate the operation and will return the size in %. If the size is set, it will define the size of the column for each rows. If the size is not set, the column will take the remaining space. If no size is set for any column, the columns will try to take the max space it needs.
Rows
The rows property is an array of objects that defines the rows of the table. A row object can have the following properties : cells, className, visible. className is mainly used to define the style of the row. The cells property is an array of objects that defines the cells of the row. Each cell is an object that defines the content of the cell. The visible property is used to define if the row should be visible or not. If the property is not set, the row will be visible.
Repeatable Rows
In some case, you may have multiple rows that are the same but only the field names are different. We can define a way to repeat the same row multiple times, and replace the only part is different. To do that we need to define 2 properties : repeatableRow, iterations.
So with those definitions, the library will repeat a row for each iteration defined. The iterations property is either an array of strings, either an object with a from key. The library will looks in the data to find the iterations table in order to generate each iterations.
A repeatableRow is defined like a row. The important thing here is that anywhere in the json of the repeatableRow, we can set $1, during the generation of each rows, the %1 will be replaced by the iteration.
The repeatableRow takes an object that define a row and will be repeated for each iterations.
See examples and more information about iterations on the Repeatable Section
Cells
Each cell is an object that defines the content of the cell, it takes an entire schema that we can define for this library.
Example without headers
The following example define a table with 3 columns and 1 row. The first column will take 4/12 of the space, the second column will take 4/12 of the space and the third column will take 4/12 of the space. No titles are defined in the headers so the header will not be shown.
In the row, each cell have a field defined. The first cell have a name field, the second cell have a last_name field and the third cell have a email field. The className property is set to table-middle so the row will have the table-middle class. The visible property is not set so the row will be visible. The readOnly property is not set so the row will not be read only.
"policy_owner": {
"type": "premiums_table",
"className": "table",
"headers": [
{
"size": "4/12"
},
{
"size": "4/12"
},
{
"size": "4/12"
}
],
"rows": [
{
"className": "table-middle",
"cells": [
{
"type": "group",
"properties": {
"name": {
"component": "text",
"label": "Name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"last_name": {
"component": "text",
"label": "Last name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"email": {
"component": "text",
"label": "Email",
"inline": false
}
}
}
]
}
]
}
Example with headers
The same example as above, but this time each column have a title. The first column will take 4/12 of the space, the second column will take 4/12 of the space and the third column will take 4/12 of the space. The first column will have the title Name, the second column will have the title Last name and the third column will have the title Email.
"policy_owner": {
"type": "premiums_table",
"className": "table",
"headers": [
{
"size": "4/12",
"title": "Name"
},
{
"size": "4/12",
"title": "Last name"
},
{
"size": "4/12",
"title": "Email"
}
],
"rows": [
{
"className": "table-middle",
"cells": [
{
"type": "group",
"properties": {
"name": {
"component": "text",
"label": "Name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"last_name": {
"component": "text",
"label": "Last name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"email": {
"component": "text",
"label": "Email",
"inline": false
}
}
}
]
}
]
}
Example with repeatable rows
This example will generate a table with 3 columns and 3 rows. The first column will take 4/12 of the space, the second column will take 4/12 of the space and the third column will take 4/12 of the space. The first column will have the title Name, the second column will have the title Last name and the third column will have the title Email. This schema will generate the following data :
{
"policy_owner": {
"name": "John",
"last_name": "Doe",
"email": "[email protected]"
},
"main_driver": {
"name": "John",
"last_name": "Doe",
"email": "[email protected]"
},
"secondary_driver": {
"name": "John",
"last_name": "Doe",
"email": "[email protected]"
}
}
"persons": {
"type": "premiums_table",
"className": "table",
"as": "group",
"headers": [
{
"size": "4/12",
"title": "Name"
},
{
"size": "4/12",
"title": "Last name"
},
{
"size": "4/12",
"title": "Email"
}
],
"iterations": [
"policy_owner",
"main_driver",
"secondary_driver"
],
"repeatableRow": {
"className": "table-middle",
"cells": [
{
"type": "group",
"properties": {
"%1.name": {
"component": "text",
"label": "Name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"%1.last_name": {
"component": "text",
"label": "Last name",
"inline": false
}
}
},
{
"type": "group",
"properties": {
"%1.email": {
"component": "text",
"label": "Email",
"inline": false
}
}
}
]
}
}