Genealogy Table component displays the genealogy in the form of a table. The table can be expanded to the desired level of the branch of interest. The main parameters are displayed for each network participant. Clicking on the “i” icon opens a window with additional information about the participant.
Above the table, there is a search bar where you can find a participant by ID, email, or name.
Clicking on the name of each column allows you to sort the data in the table.
Configuration:
id="gt0"
:tree-id="0"
:properties="['s.id','p.firstname', 'p.lastname','p.email','m.PV']"
:popup-properties="['p.firstname', 'p.lastname', 'p.email', 'm.PV', 'm.Downline']"
:hide-self="false"
:select-periods="false"
:select-legs-from-tree="undefined"
:select-legs-limit="2"
:select-legs-position-titles="{ 1: 'Left leg', 2: 'Right Leg' }"
:header-titles="{ 's.id': 'ID of account' }"
popup-info-on-field="p.firstname"
popup-link-url="/{{site_language}}/network/view-network/?nodeId={{s.id.raw}}"
:hide-tree-link="true"
:colors="{
self: 'rgba(10, 230, 10, 0.3)',
front: 'rgba(10, 230, 10, 0.1)',
deadend: 'rgba(255, 10, 10, 0.1)'
}"
:paginations="[10,25,100,-1]"
| props | default | type | description |
| id= | "gt0" | String | In-system id, required if opening settings of a module from within the online office |
| :tree-id= | "0" | Number | Id of a marketing tree used to display downline |
| :propeties= | "['s.id','p.firstname', 'p.lastname','p.email','m.PV']" | String | Array of properties displayed down under avatar |
| :popup-properties= | "['p.firstname', 'p.lastname', 'p.email', 'm.PV', 'm.Downline']" | String | Array of properties displayed in pop-up when avatar being clicked |
| :hide-self= | "false" | String | Defines whether the currently logged-in account is displayed in a first row or not |
| :select-periods= | "false" | String | Turns on financial period selection |
| :select-legs-from-tree= | "undefined" | String | Specifies what tree to use when displaying frontline. If the value is a number, the leg can be chosen |
| :select-legs-limit= | "2" | Number | How many legs are being shown |
| :select-legs-position-titles= | "{ 1: 'Left leg', 2: 'Right Leg' }" | Array | Changes title of a specified presented leg |
| :header-titles= | "{ 's.id': 'ID of account' }" | Array | Changes title of specified presented properties |
| popup-info-on-field= | "p.firstname" | String | Defines what field will contain interactable buttons ⓘ |
| popup-link-url= | "/{{site_language}}/network/view-network/?nodeId={{s.id.raw}}" | String | Defines visual tree redirect link - to which page user will be redirected upon pressing Ѧ icon |
| :colors= | "{self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)',}" | String | Self - color scheme for your account, front - color scheme for your frontline, deadend - color scheme for a deadend's branch last account |
| :paginations= | "[10,25,100,-1]" | Array | Defines pagination of a page |
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).