Adding new columns, JavaScript Programming Example of adding new columns in File Manager

JavaScript Adding new columns in File Manager

You can use an onViewInit to add columns to Webix File Manager. This event will allow you to customize the existing view and insert column configuration into the columns array of the table. Check out a programming example of how you can do it. Note, you can download this free coding sample for your project.

JS Code

webix.ready(function(){

  webix.ui({
    view:"filemanager",
    id:"files",
    on:{
      "onViewInit": function(name, config){
        if (name == "table"){
          var columns = config.columns;
          var newColumn1 = {
            id: "date",
            header:"Date",
            fillspace: 1,
            css: "my_style",
            template: function(obj,common){
              var date = new Date(obj.date*1000);
              return webix.i18n.dateFormatStr(date);
            }
          };
          webix.toArray(columns).removeAt(1);
          webix.toArray(columns).insertAt(newColumn1,1);
          var newColumn2 = {
            id: "time",
            header:"Time",
            fillspace: 1,
            css: "my_style",
            template: function(obj,common){
              var date = new Date(obj.date*1000);
              return webix.i18n.timeFormatStr(date);
            }
          };

          webix.toArray(columns).insertAt(newColumn2,2);

        }
      }
    }
  });

  $$("files").load("https://docs.webix.com/filemanager/samples/server/");
});

HTML Code

<style>
  .my_style{
  	background-color:#f5f5f5;
  }
</style>