DEV Community: Ray

How the VTable component progressively loads sub-nodes in a list?

Ray — Thu, 04 Jul 2024 03:32:57 +0000

Question title

How to progressively load sub-nodes in a list with the VTable component?

Problem description

Using the VTable table component, how to gradually load sub-nodes in the list, click the expand button of the parent node, and then dynamically load the information of the sub-node

Solution

VTable provides setRecordChildrenAPI to update the sub-node status of a node, which can be used to implement progressive loading function

Data preparation

Normally, in the data of the tree structure list, the childrenattribute is an array, which is the sub-node information of the node

{
    name: 'a',
    value: 10,
    children: [
        {
            name: 'a-1',
            value: 5,
            children: [
                // ......
            ]
        },
        // ......
    ]
}

How to dynamically load sub-node information, you can configure the childrenproperty to true. At this time, the node will be displayed as the parent node in the table, but clicking the expand button in the cell will trigger relevant events, but the table will not have any active changes.

Monitoring events

After the expand button is clicked, the VTable. ListTable.EVENT_TYPEevent will be triggered. You need to listen to this event and use the setRecordChildrenAPI to update the sub-node information

const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
  if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
    setTimeout(() => {
      const children = [
        {
          name: 'a-1',
          value: 5,
        },
        {
          name: 'a-2',
          value: 5
        }
      ];
      instance.setRecordChildren(children, args.col, args.row);
    }, 200);
  }
});

Code example

demo：https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load

How the VTable component progressively loads sub-nodes in pivot tables

Ray — Thu, 04 Jul 2024 03:31:58 +0000

Question title

How to progressively load sub-nodes in a pivot table using the VTable component?

Problem description

Using the VTable table component, how to gradually load sub-nodes in the pivot table, click the expand button of the parent node, and then dynamically load the information of the sub-node

Solution

VTable provides setTreeNodeChildrenAPI, which is used to update the sub-node status of a node in the pivot structure and can be used to implement progressive loading function

Dimension tree configuration

Normally, in the dimension tree (columnTree/rowTree), the childrenattribute is an array, which is the sub-node information of the node

{
    dimensionKey: 'name',
    value: 'a',
    children: [
        {
            dimensionKey: 'name-1',
            value: 'a-1',
            children: [
                // ......
            ]
        },
        // ......
    ]
}

Monitoring events

After the expand button is clicked, the VTable. ListTable.EVENT_TYPEevent will be triggered. You need to listen to this event and use the setTreeNodeChildrenAPI to update the sub-node information and the corresponding increased data

const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
  if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
    setTimeout(() => {
      const newData = [
        // ......
      ];
      const children = [
        {
          dimensionKey: 'name-1',
          value: 'a-1',
        },
        {
          dimensionKey: 'name-1',
          value: 'a-2'
        }
      ];
      instance.setTreeNodeChildren(children, newData, args.col, args.row);
    }, 200);
  }
});

Code example

demo：https://visactor.io/vtable/demo/table-type/pivot-table-tree-lazy-load

How to customize highlighted cells in the VTable component

Ray — Thu, 04 Jul 2024 03:29:22 +0000

Question title

How to customize highlighted cells in the VTable component?

Problem description

How to customize highlighted cells and specify the highlighting style using the VTable table component?

Solution

VTable supports custom cell styles, which can be used to implement custom highlighting function.

Registration style

First, you need to register a custom style

Need to define idand styletwo attributes:

Id: the unique id of the custom style
Style: Custom cell style, the same as the styleconfiguration in the column, the final presentation effect is the fusion of the original cell style and the custom style

Custom style registration is divided into two ways, optionconfiguration and API configuration:

The customCellStyle property in the option option receives an array composed of multiple custom style objects.

// init option
const option = {
  // ......
  customCellStyle: [
    {
      id: 'custom-1',
      style: {
        bgColor: 'red'
      }
    }
  ]
}

The API can register custom styles through the registerCustomCellStylemethods provided by the VTable instance:

instance.registerCustomCellStyle(id, style)

Assignment style

To use a registered custom style, you need to assign the custom style to the cell. Assignment requires defining two properties, cellPositionand customStyleId:

cellPosition: Cell position information, supports configuring individual cells and cell ranges.
- Single cell: {row: number, col: number}
- Cell range: {range: {start: {row: number, col: number}, end: {row: number, col: number}}}
customStyleId: Custom style id, the same as the id defined when registering custom styles

There are two ways to allocate, configure in optionand configure using API:

The customCellStyleArrangementproperty in option receives an array of custom assignment style objects:

// init option
const option = {
  // ......
  customCellStyleArrangement: [
    {
      cellPosition: {
        col: 3,
        row: 4
      },
      customStyleId: 'custom-1'
    },
    {
      cellPosition: {
        range: {
          start: {
            col: 5,
            row: 5
          },
          end: {
            col: 7,
            row: 7
          }
        }
      },
      customStyleId: 'custom-2'
    }
  ]
}

The API can assign custom styles through the arrangeCustomCellStylemethods provided by the VTable instance:

instance.arrangeCustomCellStyle(cellPosition, customStyleId)

Update and delete styles

Custom style After registration, you can update the custom style of the same id through registerCustomCellStylemethod. After the update, the cell style of the assigned custom style will be updated; if newStyleis undefined| null, it means to delete the custom style. After deletion, the cell style of the assigned custom style will restore the default style

instance.registerCustomCellStyle(id, newStyle)

The assigned custom style cell area can be updated by arrangeCustomCellStylemethod, and the style of the cell area will be updated after the update; if the customStyleIdis undefined| null, it means that the restored cell style is the default style

Code example

demo：https://visactor.io/vtable/demo/custom-render/custom-style

How to set the text style of the VTable table component?

Ray — Thu, 04 Jul 2024 03:28:13 +0000

Question title

How to set text style for VTable component?

Problem description

What text styles are supported and how to configure them when using the VTable table component?

Solution

VTable supports the following text styles:

fontSize: The font size of the text.
FontFamily: Font used for text. Multiple fonts can be specified, such as Arial, sans-serif, and the browser will search and use them in the specified order.
FontWeight: Set font thickness.
FontVariant: Sets the font variant.
fontStyle: Set font style.

The places where VTable supports setting text styles are:

Column (row/indicator), configure the style corresponding to the column (row/indicator)
- Style: The style corresponding to the content cell
- headerStyle: the style corresponding to the header cell
In theme, configure the theme style
- defaultStyle: default style
- bodyStyle: table content area style
- headerStyle: header (list)/list header (pivot table) style
- rowHeaderStyle: Row header style
- cornerHeaderStyle: corner head style
- bottomFrozenStyle: Bottom frozen cell style
- rightFrozenStyle: Freeze cell style on the right

Code example

You can paste it into the official website editor for testing: https://visactor.io/vtable/demo/table-type/list-table

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto",
        style: {
            fontSize: 14
        },
        headerStyle: {
            fontSize: 16,
            fontFamily: 'Verdana'
        }
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  theme: VTable.themes.DEFAULT.extends({
    bodyStyle: {
        fontSize: 12
    },
    headerStyle: {
        fontSize: 18
    }
  })
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

# VTable usage issue: How to set multi-level table headers

Ray — Fri, 07 Jun 2024 09:10:20 +0000

Question title

How to set up multi-level headers

Problem description

How to configure headers to achieve multi-level header grouping effect

Solution

In the columnconfiguration in VTable, it supports specifying the subordinate table header of the column through the columnsconfiguration, and this rule can be used for multi-level nesting

Code example

const columns = [
  {
    field: 'id',
    title: 'ID',
    width: 100
  },
  {
    title: 'Name',
    columns: [
      {
        field: 'name1',
        title: 'name1',
        width: 100
      },
      {
        title: 'name-level-2',
        width: 150,
        columns: [
          {
            field: 'name2',
            title: 'name2',
            width: 100
          },
          {
            title: 'name3',
            field: 'name3',
            width: 150
          }
        ]
      }
    ]
  }
];

const option = {
  records,
  columns,
  // ......
};

Results show

Complete example: https://www.visactor.io/vtable/demo/basic-functionality/list-table-header-group

# VTable usage issue: How to manually control the tooltip display

Ray — Fri, 07 Jun 2024 09:01:13 +0000

Question title

How to manually control the tooltip display

Problem description

How to manually control the display content, display style, and display timing of tooltips

Solution

VTable provides a showTooltipmethod for manually triggering tooltip display

showTooltip: (col: number, row: number, tooltipOptions?: TooltipOptions) => voild

Col & row: limit the cell position of tooltip
tooltipOptions: Detailed configuration of tooltip:

type TooltipOptions = {
/** tooltip content */
content: string;
/** tooltip box position has higher priority than referencePosition */
position?: { x: number; y: number };
/** tooltip box reference position. If position is set, this configuration will not take effect */
referencePosition?: {
/** reference position is set to a rectangular boundary. Set placement to specify the position at the boundary position */
rect: RectProps;
/** specify the position at the boundary position */
placement?: Placement;
};
/** custom style needs to specify className dom tooltip to take effect */
className?: string;
/** set tooltip style */
style?: {
bgColor?: string;
fontSize?: number;
fontFamily?: string;
color?: string;
padding?: number[];
arrowMark?: boolean;
};
};

Code example

tableInstance.showTooltip(col, row, {
content: 'custom tooltip',
    referencePosition: { rect, placement: VTable.TYPES.Placement.right }, //TODO
    className: 'defineTooltip',
    style: {
      bgColor: 'black',
      color: 'white',
      font: 'normal bold normal 14px/1 STKaiti',
      arrowMark: true,
    },
});

Results show

Complete example: https://www.visactor.io/vtable/demo/component/tooltip

VTable usage issue: How to set only one column to not be selected for operation

Ray — Fri, 07 Jun 2024 08:58:24 +0000

Question title

How to set only one column that cannot be selected for operation

Problem description

How to click a cell in a column of a table without selecting it?

Solution

VTable provides disableSelectand disableHeaderSelectconfigurations in the column:

DisableSelect: The content of this column is partially disabled
disableHeaderSelect: Disable the selection of the header section of the list

Code example

const options = {
    columns: [
        {
            field: 'name',
            title: 'name',
            disableSelect: true,
            disableHeaderSelect: true
        },
        // ......
    ],
    //......
};

Full sample code (you can try pasting it into the editor ):

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto",
        disableSelect: true,
        disableHeaderSelect: true
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  columnWidthComputeMode: 'only-header'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

VTable usage issue: How to listen to table area selection and cancellation events

Ray — Fri, 07 Jun 2024 08:57:05 +0000

Question title

How to listen to the table area selection cancellation event

Problem description

Hope to be able to select and cancel events through events (click other areas of the table or click outside the table).

Solution

VTable provides SELECTED_CLEARevents that are triggered after an operation is deselected (and there are no selected areas in the current chart area)

Code example

const tableInstance = new VTable.ListTable(option);
tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
    console.log("selected clear!");
});

Full sample code (you can try pasting it into the editor ):

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;

tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
    console.log("selected clear!");
});
    })

VTable usage issue: How to add column total information to the list

Ray — Tue, 28 May 2024 03:38:24 +0000

Question title

How to add column total information to the list

Problem description

In the list, you hope to display the total information of a column, such as sum, average, etc.

Solution

VTable provides aggregationconfiguration for configuring data aggregation rules and display positions in the table. You can configure aggregationto specify global rules for aggregation in options, or configure aggregationto specify aggregation rules for each column. The following properties need to be configured in aggregation:

aggregationType:
- Sum, set aggregationTypeto AggregationType. SUM
- Average, set aggregationTypeto AggregationType. AVG
- Maximum value, set aggregationTypeto AggregationType. MAX
- Minimum, set aggregationTypeto AggregationType. MIN
- Count, set aggregationTypeto AggregationType. COUNT
- Custom function, set aggregationTypeto AggregationType. CUSTOM, set custom aggregation logic through aggregationFun
aggregationFun: Custom aggregation logic when aggregationType is AggregationType. CUSTOM
showOnTop: Controls the display position of the aggregated results. The default is false, which means the aggregated results are displayed at the bottom of the body. If set to true, the aggregated results are displayed at the top of the body.
FormatFun: Set the formatting function of aggregate values, and customize the display format of aggregate values.

Code example

const options = {
    //......
    columns: [
      {
        aggregation: [
          {
            aggregationType: VTable.TYPES.AggregationType.MAX,
            // showOnTop: true,
            formatFun(value) {
              return '最高薪资:' + Math.round(value) + '元';
            }
          }
        ]
      },
      // ......
    ]
};

Results show

Example code: https://www.visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple

VTable usage issue: How to make the table automatically calculate column width based only on the table header

Ray — Mon, 27 May 2024 12:35:44 +0000

Question title

How to make the table automatically calculate column width based only on the content width of the table header

Problem description

In automatic width mode, you want the width of a column to be determined only by the content width of the header cell and not affected by the content cell.

Solution

VTable provides columnWidthComputeModeconfiguration for specifying the bounded areas that are involved in content width calculations:

'Only-header ': Only the header content is calculated.
'Only-body ': Only calculate the content of the body cell.
'Normal ': Calculate normally, that is, calculate the contents of the header and body cells.

Code example

const options = {
    //......
    columnWidthComputeMode: 'only-header'
};

Results show

Full sample code (you can try pasting it into the editor ):

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  columnWidthComputeMode: 'only-header'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

VTable usage issue: How to set the border style around cells separately

Ray — Mon, 20 May 2024 10:55:13 +0000

Question title

How to set the border style around cells separately

Problem description

How to set the border styles around cells separately to achieve a border with only upper and lower cell borders, without left and right borders.

Solution

The cell styles in the table, whether in the column style or theme, support configuring the cell border-related configurations as arrays, representing the border styles in the top, right, bottom, and left directions, respectively

Code example

const option = {
  columns: [
    {
      // ...
      style: {
        cellBorderLineWidth: [1, 0, 1, 0]
        // ...
      }
    }
  ]
  // ...
}

Results show

Complete sample code (you can try pasting it into the editor ):

let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
  .then(res => res.json())
  .then(data => {
    const columns = [
      {
        field: 'Order ID',
        title: 'Order ID',
        width: 'auto'
      },
      {
        field: 'Customer ID',
        title: 'Customer ID',
        width: 'auto'
      },
      {
        field: 'Product Name',
        title: 'Product Name',
        width: 'auto'
      },
      {
        field: 'Category',
        title: 'Category',
        width: 'auto'
      },
      {
        field: 'Sub-Category',
        title: 'Sub-Category',
        width: 'auto'
      },
      {
        field: 'Region',
        title: 'Region',
        width: 'auto'
      },
      {
        field: 'City',
        title: 'City',
        width: 'auto'
      },
      {
        field: 'Order Date',
        title: 'Order Date',
        width: 'auto'
      },
      {
        field: 'Quantity',
        title: 'Quantity',
        width: 'auto'
      },
      {
        field: 'Sales',
        title: 'Sales',
        width: 'auto'
      },
      {
        field: 'Profit',
        title: 'Profit',
        width: 'auto'
      }
    ];

    const option = {
      records: data,
      columns,
      widthMode: 'standard',
      theme: {
        headerStyle: {
          borderLineWidth: [1, 0, 1, 0]
        },
        bodyStyle: {
          borderLineWidth: [1, 0, 1, 0]
        }
      }
      // theme: VTable.themes.SIMPLIFY
    };
    tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
    window['tableInstance'] = tableInstance;
  });

How to implement text type buttons

Ray — Mon, 20 May 2024 10:53:34 +0000

Question title

How to implement text type buttons

Problem description

Hope to display text type buttons in the cell, click to operate.

Solution

You can use the customLayoutfeature to customize button elements and bind corresponding events

Code example

  const option: VTable.ListTableConstructorOptions = {
    columns: [
      // ......
      {
        field: 'worksCount',
        title: 'operation',
        width: 110,
        customLayout: (args: VTable.TYPES.CustomRenderFunctionArg) => {
          const { table, row, col, rect } = args;
          const { height, width } = rect ?? table.getCellRect(col, row);

          const container = new VTable.CustomLayout.Group({
            height,
            width,
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap'
          });

          const editText = new VTable.CustomLayout.Text({
            text: '编辑',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          editText.stateProxy = (stateName: string) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          editText.addEventListener('mouseenter', e => {
            editText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('mouseleave', e => {
            editText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('click', e => {
            console.log('edit click');
          });
          container.add(editText);

          return {
            rootContainer: container,
            renderDefault: false
          };
        }
      }
    ],
    // ......
  };

Results show

Complete sample code (you can try pasting it into the editor ):

  const option = {
    container: document.getElementById(CONTAINER_ID),
    columns: [
      {
        field: 'bloggerId',
        title: 'index'
      },
      {
        field: 'worksCount',
        title: 'operation',
        style: {
          fontFamily: 'Arial',
          fontSize: 12,
          fontWeight: 'bold'
        },
        width: 110,
        customLayout: (args) => {
          const { table, row, col, rect } = args;
          const { height, width } = rect ?? table.getCellRect(col, row);

          const container = new VTable.CustomLayout.Group({
            height,
            width,
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap'
          });

          const editText = new VTable.CustomLayout.Text({
            text: '编辑',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          editText.stateProxy = (stateName) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          editText.addEventListener('mouseenter', e => {
            editText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('mouseleave', e => {
            editText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          editText.addEventListener('click', e => {
            console.log('edit click');
          });
          container.add(editText);

          const deleteText = new VTable.CustomLayout.Text({
            text: '删除',
            fontSize: 13,
            fontFamily: 'sans-serif',
            fill: '#2440b3', // #315efb
            boundsPadding: [10, 0, 0, 10],
            underline: 0,
            cursor: 'pointer'
          });
          deleteText.stateProxy = (stateName) => {
            if (stateName === 'hover') {
              return {
                fill: '#315efb',
                underline: 1
              };
            }
          };
          deleteText.addEventListener('mouseenter', e => {
            deleteText.addState('hover', true, false);
            table.scenegraph.updateNextFrame();
          });
          deleteText.addEventListener('mouseleave', e => {
            deleteText.removeState('hover', false);
            table.scenegraph.updateNextFrame();
          });
          deleteText.addEventListener('click', e => {
            console.log('delete click');
          });
          container.add(deleteText);

          return {
            rootContainer: container,
            renderDefault: false
          };
        }
      }
    ],
    records: [
      {
        bloggerId: 1,
      },
      {
        bloggerId: 2,
      },
      {
        bloggerId: 3,
      },
      {
        bloggerId: 4,
      },
      {
        bloggerId: 5,
      },
      {
        bloggerId: 6,
      }
    ],
    defaultRowHeight: 40
  };

  const instance = new VTable.ListTable(option);

DEV Community: Ray

How the VTable component progressively loads sub-nodes in a list?

Question title

Problem description

Solution

Code example

Related Documents

How the VTable component progressively loads sub-nodes in pivot tables

Question title

Problem description

Solution

Code example

Related Documents

How to customize highlighted cells in the VTable component

Question title

Problem description

Solution

Registration style

Assignment style

Update and delete styles

Code example

Related Documents

How to set the text style of the VTable table component?

Question title

Problem description

Solution

Code example

Related Documents

# VTable usage issue: How to set multi-level table headers

Question title

Problem description

Solution

Code example

Results show

Related Documents

# VTable usage issue: How to manually control the tooltip display

Question title

Problem description

Solution

Code example

Results show

Related Documents

VTable usage issue: How to set only one column to not be selected for operation

Question title

Problem description

Solution

Code example

Related Documents

VTable usage issue: How to listen to table area selection and cancellation events

Question title

Problem description

Solution

Code example

Related Documents

VTable usage issue: How to add column total information to the list

Question title

Problem description

Solution

Code example

Results show

Related Documents

VTable usage issue: How to make the table automatically calculate column width based only on the table header

Question title

Problem description

Solution

Code example

Results show

Related Documents

VTable usage issue: How to set the border style around cells separately

Question title

Problem description

Solution

Code example

Results show

Related Documents

How to implement text type buttons

Question title

Problem description

Solution

Code example