Detailed explanation of nested header of grid manager


After several adjustments, the nested header function was finally released in v2.13.0.

Effect display

Let’s start with a nested header

Detailed explanation of nested header of grid manager

How to use it

Configuration is quite simple. You only need thecolumnDataMedium increasechildrenProperty.

childrenProperty is array type, andcolumnDataThey are used in the same way,childrenIt can be nested infinitely.

<table id='table-demo-nestedCode'></table>
new GridManager(document.querySelector('table'), {
    gridManagerName: 'demo-nestedCode',
        //The unique index of the column. String type, required
        key: 'title',
        //The display text of the column. [string or function] type. Required.
        //If the angular, Vue and react versions are used, the framework template can be used directly here
        Text: 'title',
        //Sub item configuration, through which nested headers can be implemented
        //When it exists, it will be disabled: supportconfig, supportdrag, supportadjust columnData.fixed
        //Array objects are configured the same as columndata objects and can be nested in multiple layers.
        //Note: in the existing version, the width of the last layer is bisected by the width of the previous layer
        children: []

In the example above, the nested header is specified by configuring children in the columndata array element.
However, it should be noted that when using nested headers, the following is disabled:

  • Supportconfig: display and hide function of columns
  • Supportdrag: column mobility
  • Supportadjust: column width adjustment function
  • columnData.fixed : column fixed function

Other features of gridmanager

function describe
Width adjustment The column width of the table can be adjusted by dragging and dropping
Position change Drag and drop the column position of the table
Configuration column Columns can be displayed and hidden by configuration
Head suction In cases where the table has a visible region, the header will always be at the top
Column fixation Specifies that a column is pinned to the left or right
sort Single or combined sorting of tables
paging Table Ajax paging, including the function of selecting the total number of items per page and jumping to the specified page
User preference memory Remember user behavior, including user adjusted column width, column order, column visual status and the number of displayed items per page
Serial number Automatically generate sequence number column
Select all Automatically generate all selected columns
export Static data export, dynamic data export, selected data export
Printing Current page printing
Right click menu Common functions can be shortcut operated in the menu
filter Filter the column to achieve fast search effect
merge Cells with the same value in the same column can be merged automatically
Tree table The tree table structure can be quickly realized by configuration
Line move The line position can be moved quickly through configuration
Nested header Configuration of complex table instances without hierarchical restrictions

Related links

  • api
  • github

At the end:

Since the maintenance of the project in early 2015, the original idea has never changed: instantiate the table tag quickly and flexibly, so that the table tag is full of vitality.