dropdown——VisActor/VTable tutorial documents

In table components, a dropdown (drop-down menu) is a common user interface element commonly used to provide a list of options for selection or action. It appears as an Expandable menu that, when the user clicks or hovers over Dropdown, displays a drop-down list from which the user can select one or more options. Use cases such as:

Data operations: such as modifying a piece of data, deleting and other operations, let the user select through the drop-down menu.
Sorting options: The dropdown menu can provide sorting options that allow users to sort or filter table data based on different columns or criteria.

Introduction to configuration items

{
   /** 下拉菜单的相关配置。消失时机：显示后点击菜单区域外自动消失*/
  menu?: {
    /** 代替原来的option.menuType  html目前实现较完整 先默认html渲染方式*/
    renderMode?: 'canvas' | 'html';
    /** 内置下拉菜单的全局设置项 目前只针对基本表格有效 会对每个表头单元格开启默认的下拉菜单功能。代替原来的option.dropDownMenu*/
    defaultHeaderMenuItems?: MenuListItem[];
    /** 右键菜单。代替原来的option.contextmenu */
    contextMenuItems?: MenuListItem[] | ((field: string, row: number, col: number, table: BaseTableAPI) => MenuListItem[]);
    /** 设置选中状态的菜单。代替原来的option.dropDownMenuHighlight  */
    dropDownMenuHighlight?: DropDownMenuHighlightInfo[];
  };
};

renderMode: specifies the rendering method;
defaultHeaderMenuItems: Specify the header default configuration item content
contextMenuItems: specify the right-click menu list
dropDownMenuHighlight: If the menu has a corresponding selected state, configure it here

example

defaultHeaderMenuItems example:

This example is configured with defaultHeaderMenuItems, when the mouse hover to the table header that is the drop-down menu, if you want to change the drop-down menu icon can be overwritten by registration:

  VTable.register.icon('dropdownIcon',{
          ......
          },
  );

In this example, contextMenuItems is configured, and a drop-down menu pops up after the right mouse button:

Other reference demo: https://visactor.io/vtable/demo/interaction/context-menu

 dropDownMenuHighlight: [
        {
          field:'Order ID',
          menuKey: '升序规则1'
        }
      ]

Subsequent clicks to switch states are available through the interface:

setDropDownMenuHighlight(
[
        {
          field:'Order ID',
          menuKey: '升序规则1'
        }
      ]
)

Global & Local Configuration

Globally specifies the drop-down menu displayed on the header, the configuration form in the above example;
Local configuration means that it can be configured on the header of a column.

In the example below, the drop-down menu is only configured on the first column:

Dropdown drop-down menu introduction

Introduction to configuration items

example

defaultHeaderMenuItems example:

contextMenuItems example right-click menu:

dropDownMenuHighlight menu initial selection status example:

Global & Local Configuration