Tables

Tables are primarily intended for displaying and manipulating data, but they also serve as an entry/start point for various custom functions that implement the project’s business logic.

This could include:

• Opening a form with a standard or custom interface.
• Opening a modal window or a dialog with action confirmation and sending a command to the server.
• Implementing custom buttons above the table or in a hidden additional menu (opened via the “asterisk”, in the same place as export to Excel/JSON).

You can customize the table in almost any way, for example, by hiding the table body and leaving only the filter functionality for sending requests for analytics collection and subsequent graph rendering.

---

How to Create

Profile Creation

1. You don’t have to create a separate profile for the table; you can use the class profile.
2. If you need special settings different from the class settings, create a Client Object (see the section Creating Client Objects).

Placement in the Interface

1. In the Main Menu

You need to create a menu item of type “Element” in the menu editor (System -> Menu editor):

• Specify the parent element.
• Select the Class.
• Optionally select a Client Object (must be based on the same class).

Such an element will appear in the menu, and when selected, the specified table will open. No code writing is required.

2. Inside a Form or Frame (in Layout)

In the HTML layout of a form or frame, you can specify a div with a specific class and data attributes:

<div data-tbls="CLASS_NAME.TABLE_CO_NAME" class="fn-child-tbl-holder marTop10"></div>

• class: fn-child-tbl-holder
• data-tbls: "CLASS_NAME.TABLE_CO_NAME", where CLASS_NAME is the class name, and TABLE_CO_NAME is the client object name. If no client object is specified, the attribute looks like this: "CLASS_NAME.".

3. Via Code in Any Container

To create a table programmatically, you need to create an instance of MB.TableN and call the create method, passing a jQuery container.

Example:

const req_holder = dashboard.parentBlock.find('.dbrd-requests-container');

const req_table = new MB.TableN({  
   name: 'Requests',  
   client_object: 'table_request_work_dashboard',  
   class: 'request_work',  
   id: MB.Core.guid(),  
   parentObject: frameInstance,  
   parent: frameInstance,  
   parent_id: frameInstance.data.data.id,  
   destroy_on_reload: true,  
   externalWhere: []  
});

req_table.create(req_holder, function () {  
   // console.log('dashboard table rendered');  
});

Main Parameters:

• name: For orientation in the code and in the MB.Tables.tables array.
• class and client_object: Point to the Class and Client Object.
• id: Must be unique.
• parentObject, parent, parent_id: If the table is embedded in a form/frame, specifying the parent and its ID allows the table to automatically filter data (if parent_key is configured in the profile).
• destroy_on_reload: Determines whether to destroy the table when the parent component is reloaded.
• externalWhere: An array of additional filtering conditions.

---

JS Extension File

When a table is loaded, a JS file can be executed to extend its functionality.

Connection Conditions:

1. The file must be located in public_src/html/tables/require/.
2. The file name must match the Client Object name or (if not specified) be in the form table_<class_name>.
3. The “Additional functionality” checkbox must be checked in the Client Object (or class) profile.

You can use public_src/html/tables/require/_gocore/table_example.js as a template.

Context Menu

In the extension file, you can add items to the tableInstance.ct_instance.ctxMenuData array. Each element is an object:

• name: Unique item name.
• title: Display name.
• disable: A function that returns true if the item should be unavailable (e.g., depending on row data).
• callback: A function executed on click.

Example:

{  
   name: 'option2',  
   title: 'Other',  
   disabled: function(){  
       return false;  
   },  
   callback: function(){  
       const row = tableInstance.ct_instance.selectedRowIndex;
       const dataRow = tableInstance.data.data[row];
       const id = dataRow.id;

       // Getting all selected rows
       const selected = tableInstance.ct_instance.selection2.data;  
   }  
}

Other Functionality

Through the table instance, you can access all settings, data, and the current state (filters, search text, current page, etc.). You can inspect the object’s contents at runtime via the browser console: MB.Tables.tables.

You can implement any logic using built-in core components, external libraries, or even embed applications on React or other frameworks.