The types of column types are as follows.

• sortable option.
• resizable option.
• movable option.
• autoResizable option.
• autoWidth option.

sortable option

• Column option property invalidation must be null value.
• The default value is true.

// Examples
let columns = [
      { name : "no"         , header: { text:"no"           }, width : 100 }
    , { name : "company"    , header: { text:"Manager"      }, width : 100 }
    , { name : "ceo"        , header: { text:"Customer"     }, width : 100 }
    , { name : "area"       , header: { text:"ceo"          }, width : 100 }
    , { name : "creditamt"  , header: { text:"Credit limit" }, type : 'number', scale : '18,0' }
    , { name : "amt1"       , header: { text:"amt1"         }, type : 'number', scale : '18,2' }
    , { name : "amt2"       , header: { text:"amt2"         }, type : 'number', scale : '18,2' }
    , { name : "amt3"       , header: { text:"amt3"         }, type : 'number', scale : '18,2' }
    , { name : "amt4"       , header: { text:"amt4"         }, type : 'number', scale : '18,2' }
    , { name : "amt5"       , header: { text:"amt5"         }, type : 'number', scale : '18,2' }
];
grid1 = new TbsGrid('grid1');

let options = {}; // This option can only set the default option.
grid1.setGrid(columns, options);
grid1.setData(grid_data);
grid1.setOption('sortable', true, grid1.module_column); // Check

resizable option

• This option specifies whether to adjust the column width.
• The default value is true.

// Examples
let columns2 = [
      { name : "no"         , header: {text:"no"            }, width : 100 }
    , { name : "company"    , header: {text:"Manager"       }, width : 100 }
    , { name : "ceo"        , header: {text:"Customer"      }, width : 100 }
    , { name : "area"       , header: {text:"ceo"           }, width : 100 }
    , { name : "creditamt"  , header: {text:"Credit limit"  }, type : 'number', scale : '18,0' }
    , { name : "amt1"       , header: {text:"amt1"          }, type : 'number', scale : '18,2' }
    , { name : "amt2"       , header: {text:"amt2"          }, type : 'number', scale : '18,2' }
    , { name : "amt3"       , header: {text:"amt3"          }, type : 'number', scale : '18,2' }
    , { name : "amt4"       , header: {text:"amt4"          }, type : 'number', scale : '18,2' }
    , { name : "amt5"       , header: {text:"amt5"          }, type : 'number', scale : '18,2' }
];
grid2 = new TbsGrid('grid2');

let options2 = {};
grid2.setGrid(columns2, options2);
grid2.setData(grid_data);
grid2.setOption('resizable', true, grid2.module_column);  // Check

movable option

• This option allows you to adjust the column order by dragging the columns.
• The default value is true.

// Examples
let columns3 = [
      { name : "no"         , header: { text:"no"          }, width : 100 }
    , { name : "company"    , header: { text:"Manager"     }, width : 100 }
    , { name : "ceo"        , header: { text:"Customer"    }, width : 100 }
    , { name : "area"       , header: { text:"ceo"         }, width : 100 }
    , { name : "creditamt"  , header: { text:"Credit limit"}, type : 'number', scale : '18,0' }
    , { name : "amt1"       , header: { text:"amt1"        }, type : 'number', scale : '18,2' }
    , { name : "amt2"       , header: { text:"amt2"        }, type : 'number', scale : '18,2' }
    , { name : "amt3"       , header: { text:"amt3"        }, type : 'number', scale : '18,2' }
    , { name : "amt4"       , header: { text:"amt4"        }, type : 'number', scale : '18,2' }
    , { name : "amt5"       , header: { text:"amt5"        }, type : 'number', scale : '18,2' }
];
grid3 = new TbsGrid('grid3');

let options3 = {};
grid3.setGrid(columns3, options3);
grid3.setData(grid_data);
grid3.setOption('movable', true, grid3.module_column);  // Check

autoResizable option

• This feature automatically adjusts the column width when you double-click the right line of the column.
• The default value is true.

// Examples
let columns4 = [
      { name : "no"         , header: { text:"no"           }, width : 100 }
    , { name : "company"    , header: { text:"Manager"      }, width : 100 }
    , { name : "ceo"        , header: { text:"Customer"     }, width : 100 }
    , { name : "area"       , header: { text:"ceo"          }, width : 100 }
    , { name : "creditamt"  , header: { text:"Credit limit" }, type : 'number', scale : '18,0' }
    , { name : "amt1"       , header: { text:"amt1"         }, type : 'number', scale : '18,2' }
    , { name : "amt2"       , header: { text:"amt2"         }, type : 'number', scale : '18,2' }
    , { name : "amt3"       , header: { text:"amt3"         }, type : 'number', scale : '18,2' }
    , { name : "amt4"       , header: { text:"amt4"         }, type : 'number', scale : '18,2' }
    , { name : "amt5"       , header: { text:"amt5"         }, type : 'number', scale : '18,2' }
]}
grid4 = new TbsGrid('grid4');

let options4 = {};
grid4.setGrid(columns4, options4);
grid4.setData(grid_data);
grid4.setOption('autoResizable', true, grid4.module_column);  // Check

autoWidth option

• This feature automatically adjusts the column width.
• The default value is true.

// Examples
let columns5 = [
    {name: "no", header: { text: "no"}, width: 100}
    , {name: "company", header: { text: "Manager"}, width: 100}
    , {name: "ceo", header: { text: "Customer"}, width: 100}
    , {name: "area", header: { text: "ceo"}, width: 100}
    , {name: "creditamt", header: { text: "Credit limit"}, type: 'number', scale: '18,0'}
    , {name: "amt1", header: { text: "amt1"}, type: 'number', scale: '18,2'}
    , {name: "amt2", header: { text: "amt2"}, type: 'number', scale: '18,2'}
    , {name: "amt3", header: { text: "amt3"}, type: 'number', scale: '18,2'}
    , {name: "amt4", header: { text: "amt4"}, type: 'number', scale: '18,2'}
    , {name: "amt5", header: { text: "amt5"}, type: 'number', scale: '18,2'}
];
grid5 = new TbsGrid('grid5');

let options5 = {};
grid5.setGrid(columns5, options5);
grid5.setOption('autoWidth', true); // Check
grid5.setData(grid_data);