Cookie Consent by Free Privacy Policy Generator 📌 VTable usage problem: How to set the expanded and collapsed state of the tree structure


✅ VTable usage problem: How to set the expanded and collapsed state of the tree structure


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Question title

How to set the expanded and collapsed state of the tree structure in a tree-structured table.

Problem Description

Through configuration, set the expanded and collapsed state of the tree structure table and customize the display style of the tree structure.

Solution

  1. hierarchyExpandLevel can be configured in the option of table initialization. This configuration item is defined as follows: When displayed as a tree structure, the number of levels is expanded by default. The default setting is 1 to display only the root node, and the configuration of Infinity will expand all nodes.

  2. You can also obtain the expanded and collapsed status of a certain cell through the API after the table is initialized, and set the expanded and collapsed status of a certain cell through the API.

    // Get the tree-shaped expanded or collapsed state of a certain cell
    getHierarchyState(col: number, row: number) : HierarchyState | null;
    enum HierarchyState {
      expand = 'expand',
      collapse = 'collapse',
      none = 'none'
    }
    
    // Header switch level status
    toggleHierarchyState(col: number, row: number): viod;
    

Code example

const option = {
  records:data,
  columns,
  widthMode:'standard',
  hierarchyExpandLevel: 2,
};
const tableInstance = new VTable.ListTable(container, option);

const state = tableInstance.getHierarchyState(0,1);
if (state === 'expand') {
    tableInstance.toggleHierarchyState(0,1);
}

Results display

Image description

Complete sample code (you can paste it into the editor to try it out):

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

const columns =[
    {
        "field": "group",
        "title": "department",
        "width": "auto",
         tree: true,
         fieldFormat(rec){
            return rec['department']??rec['group']??rec['name'];
         }
    },
    {
        "field": "total_children",
        "title": "memebers count",
        "width": "auto",
        fieldFormat(rec){
          if(rec?.['position']){
            return `position:  ${rec['position']}`
          }else
          return rec?.['total_children'];
        }
    },
    {
        "field": "monthly_expense",
        "title": "monthly expense",
        "width": "auto",
        fieldFormat(rec){
          if(rec?.['salary']){
            return `salary:  ${rec['salary']}`
          }else
          return rec?.['monthly_expense'];
        }
    },
    {
        "field": "new_hires_this_month",
        "title": "new hires this month",
        "width": "auto"
    },
    {
        "field": "resignations_this_month",
        "title": "resignations this month",
        "width": "auto"
    },
    {
        "field": "complaints_and_suggestions",
        "title": "recived complaints counts",
        "width": "auto"
    },

];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  hierarchyExpandLevel: 2,
};

tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;

const state = tableInstance.getHierarchyState(0,1);
if (state === 'expand') {
    tableInstance.toggleHierarchyState(0,1);
}
    })

Related documents

Tree mode demo:https://www.visactor.io/vtable/demo/table-type/list-table-tree

Related api:https://www.visactor.io/vtable/option/ListTable#hierarchyExpandLevel

github:https://github.com/VisActor/VTable

...

✅ VTable usage problem: How to set the expanded and collapsed state of the tree structure


📈 124.65 Punkte

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


📈 39.76 Punkte

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


📈 39.76 Punkte

✅ VTable usage problem: How to display table row numbers


📈 39.52 Punkte

✅ Tree data structures in Rust with tree-ds (#2: Tree Operations)


📈 38.25 Punkte

✅ Facebook Usage Has Collapsed After Privacy Scandals, Data Shows


📈 36.57 Punkte

✅ VTable usage issue: How to implement drag-and-drop adjustment of line-height


📈 34.16 Punkte

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


📈 34.16 Punkte

✅ How to set the order in subnodes of a tree structure?


📈 33.83 Punkte

✅ VTable usage issue: How to implement hover to a cell to show or hide part of the content


📈 32.63 Punkte

✅ VTable usage issue: How to implement scrollbar DOM container boundary display


📈 32.63 Punkte

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


📈 32.63 Punkte

✅ How to dynamically set the min and max values of the progressBar type in the VTable component?


📈 30.53 Punkte

✅ How to manually update the state when using the Checkbox in the VTable component?


📈 29.01 Punkte

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


📈 28.99 Punkte

✅ Tree structure of glibc character sets and their aliases.


📈 28.23 Punkte

✅ Structure is Structure


📈 27.9 Punkte

✅ C# - Flatter structure vs Nested structure


📈 27.9 Punkte

✅ iPhone Sales Collapsed in China and We All Know Why


📈 27.34 Punkte

✅ How do I modify state values in React with MobX-State-Tree?


📈 27.04 Punkte

✅ Let's Tree-Shake It... (aka Demystifying Tree-Shaking and Dead Code Elimination)


📈 27.03 Punkte

✅ Difference between Binary Search Tree and AVL Tree


📈 27.03 Punkte

✅ BST (Binary Search Tree) and AVL Tree, Data Structures: (Trees, Part II)


📈 27.03 Punkte

✅ The Maple Tree: Storing Ranges and Dumping the Tree


📈 27.03 Punkte

✅ AZ: command launcher organised in a tree structure with autocompletion


📈 26.7 Punkte

✅ Introduction to Splay tree data structure


📈 26.7 Punkte

✅ Decision Tree Structure: A Comprehensive Guide


📈 26.7 Punkte

✅ Understanding Code Structure: A Beginner's Guide to Tree-sitter


📈 26.7 Punkte

✅ Engineering Experts Knew Italian Bridge Had Corrosion Problems Before It Collapsed, Report Says


📈 25.81 Punkte











matomo

Datei nicht gefunden!