ExtColumnView

About Fancytree 'Column View' extension.

• Status: experimental
• example

The ext-columnview extension renders the node structure in parent/child columns, as know from the macOS 'column view' finder mode.

Note: Only one (or no) child per parent node may be expanded at any time. The initial source data should follow this restriction.

Options

• n.a.

Events

• n.a.

Methods

• n.a.

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.columnview.js:

  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="skin-win8/ui.fancytree.css" rel="stylesheet">
  <script src="js/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
  <script src="js/jquery.fancytree.js"></script>
  <script src="js/jquery.fancytree.columnview.js"></script>

$("#tree").fancytree({
  extensions: ["columnview"],
  columnview: {
  },
  ...
});

The fancytree() method must be called on an HTML table that already exists, so to use the above JS code your HTML should look like:

<table id="tree">
    <colgroup>
        <col width="33%" />
        <col width="33%" />
        <col width="33%" />
    </colgroup>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
     </thead>
     <tbody>
         <tr>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </tbody>
 </table>


# Recipes

##### [Howto] ...