diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js
index 81c0a3d691..cf224cdee5 100644
--- a/apps/common/main/lib/component/DataView.js
+++ b/apps/common/main/lib/component/DataView.js
@@ -223,6 +223,7 @@ define([
             allowScrollbar: true,
             scrollAlwaysVisible: false,
             minScrollbarLength: 40,
+            scrollYStyle: null,
             showLast: true,
             useBSKeydown: false,
             cls: ''
@@ -273,6 +274,7 @@ define([
             me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
             me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
             me.minScrollbarLength = me.options.minScrollbarLength || 40;
+            me.scrollYStyle    = me.options.scrollYStyle;
             me.tabindex = me.options.tabindex || 0;
             me.delayRenderTips = me.options.delayRenderTips || false;
             if (me.parentMenu)
@@ -358,6 +360,7 @@ define([
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
                     minScrollbarLength  : this.minScrollbarLength,
+                    scrollYStyle: this.scrollYStyle,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -598,6 +601,7 @@ define([
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
                     minScrollbarLength  : this.minScrollbarLength,
+                    scrollYStyle: this.scrollYStyle,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -702,10 +706,10 @@ define([
             }
         },
 
-        scrollToRecord: function (record, force) {
+        scrollToRecord: function (record, force, offsetTop) {
             if (!record) return;
             var innerEl = $(this.el).find('.inner'),
-                inner_top = innerEl.offset().top,
+                inner_top = innerEl.offset().top + (offsetTop ? offsetTop : 0),
                 idx = _.indexOf(this.store.models, record),
                 div = (idx>=0 && this.dataViewItems.length>idx) ? $(this.dataViewItems[idx].el) : innerEl.find('#' + record.get('id'));
             if (div.length<=0) return;
@@ -1065,6 +1069,7 @@ define([
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
                     minScrollbarLength  : this.minScrollbarLength,
+                    scrollYStyle: this.scrollYStyle,
                     wheelSpeed: 10,
                     alwaysVisibleY: this.scrollAlwaysVisible
                 });
@@ -1157,6 +1162,7 @@ define([
                 el: $(this.el).find('.inner').addBack().filter('.inner'),
                 useKeyboard: this.enableKeyEvents && !this.handleSelect,
                 minScrollbarLength  : this.minScrollbarLength,
+                scrollYStyle: this.scrollYStyle,
                 wheelSpeed: 10,
                 alwaysVisibleY: this.scrollAlwaysVisible
             });
diff --git a/apps/common/main/lib/component/ListView.js b/apps/common/main/lib/component/ListView.js
index 7b4ed3b154..4265c6e7f8 100644
--- a/apps/common/main/lib/component/ListView.js
+++ b/apps/common/main/lib/component/ListView.js
@@ -52,19 +52,180 @@ define([
                 enableKeyEvents: true,
                 showLast: true,
                 simpleAddMode: false,
+                headers: [],            //{name: 'string', width: 'number'(optional for last), sortType: 'string'(optional), style: 'string'(optional)} ---> example {name:text, width: 100, sortType: name, style: 'margin-left:10px;} 
+                initSort: null,         //{type: 'string', direction: -1 or 1} ---> example {type:name, direction:1}
                 keyMoveDirection: 'vertical',
                 itemTemplate: _.template('<div id="<%= id %>" class="list-item" style=""><%= value %></div>'),
                 cls: ''
             },
 
             template: _.template([
-                '<div class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>></div>'
+                '<div class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>>',
+                '</div>'
             ].join('')),
 
+            initialize : function(options) {
+                if(this.options.initSort != null) {
+                    this.activeSortType = this.options.initSort.type;
+                    this.sortDirection = this.options.initSort.direction;
+                }
+                this.headerEl = null;
+                this.headerHeight = 0;
+
+                Common.UI.DataView.prototype.initialize.call(this, options);
+            }, 
+
+            render: function() {
+                (this.options.headers.length > 0) && (this.insertHeaders());
+                Common.UI.DataView.prototype.render.call(this);
+            },
+
+            insertHeaders: function() {                
+                var template = _.template([
+                    '<div class="listview-table-header-wrapper">',
+                        '<div class="listview-table-header">',
+                            '<% _.each(headers, function(header){ %>',
+                                '<%if (header.sortType) { %>',
+                                    '<div class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
+                                        '<div class="header-sorted-wrapper">',
+                                            '<span class="header-sorted">',
+                                                '<label><%= header.name %></label>',
+                                                '<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>caret-hidden<%}%>"></span>',
+                                            '</span>',
+                                        '</div>',
+                                    '</div>',
+                                '<%} else { %>',
+                                    '<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
+                                '<%}%>',
+                            '<% }); %>',
+                        '</div>',
+                    '</div>'
+                ].join(''))({
+                    headers: this.options.headers, 
+                    activeSortType: this.options.initSort ? this.options.initSort.type : null, 
+                    sortDirection: this.options.initSort ? this.options.initSort.direction : null,
+                });
+                this.$el.before(template);
+
+                var me = this,
+                    headerEl = this.$el.prev().children();
+                
+                //Calculating the width of a multiline label in sort header
+                for(var i = 0, sortHeaderIndex = 0; i < this.options.headers.length; i++){
+                    var header = this.options.headers[i];
+                    if(header.sortType){
+                        var headerWords = header.name.split(' '),
+                            labelEl = $(headerEl.find('.table-header-item .header-sorted label')[sortHeaderIndex]),
+                            tempEl = $('<label>A</label>');
+
+                        me.$el.before(tempEl);
+
+                        if(headerWords.length > 1 && labelEl.height() > Math.ceil(tempEl.height())) {
+                            var maxWidthWord = 0;
+
+                            headerWords.forEach(function(word) {
+                                tempEl.text(word);
+                                (tempEl.width() > maxWidthWord) && (maxWidthWord = tempEl.width());
+                            });
+                            (maxWidthWord < labelEl.width()) && labelEl.width(maxWidthWord);
+                        }
+                        tempEl.remove();
+                        sortHeaderIndex++;
+                    }
+                };
+
+                headerEl.find('.table-header-item .header-sorted').on('click', function(e) {
+                    var selectedSortType = $(e.currentTarget).parent().parent().attr('sort-type'),
+                        curCaretEl = $(e.currentTarget).find('.caret');
+
+                    if(me.activeSortType === selectedSortType){
+                        me.sortDirection = -me.sortDirection
+                    }
+                    else {
+                        me.activeSortType = selectedSortType;
+                        me.sortDirection = 1;
+                    }
+
+                    headerEl.find('.caret').addClass('caret-hidden');
+
+                    if(curCaretEl.removeClass('caret-hidden'));
+                    if(me.sortDirection == -1) 
+                        curCaretEl.addClass('sort-desc');
+                    else 
+                        curCaretEl.removeClass('sort-desc');
+                    
+
+                    me.trigger('header:click', me.activeSortType, me.sortDirection);
+                });
+
+                if(this.tabindex != 0 && this.handleSelect){
+                    headerEl.on('click', function(e) {
+                        me.focus();
+                    });
+                    var onMouseDown = function (e) {
+                        me.$el.find('.inner').addClass('focused');
+                        $(document).on('mouseup',   onMouseUp);
+                    };
+                    var onMouseUp = function (e) {
+                        me.focus();
+                        me.$el.find('.inner').removeClass('focused');
+                        $(document).off('mouseup',   onMouseUp);
+                    };
+                    headerEl.on('mousedown', onMouseDown);
+                }
+
+                this.headerEl = headerEl; 
+                this.calcOffsetFromHeader()
+            },
+
+            setHeaderName: function(index, name) {
+                if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
+
+                var labelEl = $(this.headerEl.find('.table-header-item')[index]);
+                if(labelEl.attr('sort-type')) {
+                    labelEl = labelEl.find('label')[0];
+                }
+
+                this.options.headers[index].name = name;
+                labelEl.text(name);
+            },
+
+            setHeaderWidth: function(index, width) {
+                if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
+
+                var labelEl = $(this.headerEl.find('.table-header-item')[index]);
+                if(labelEl.attr('sort-type')) {
+                    labelEl = labelEl.find('label')[0];
+                }
+
+                this.options.headers[index].width = width;
+                $(labelEl).width(width);
+            },
+
+            calcOffsetFromHeader: function() {
+                if(!this.headerEl) return;
+                var headerHeight = Math.floor(this.headerEl.outerHeight());
+                this.headerHeight = headerHeight;
+                this.scrollYStyle = _.extend({}, this.scrollYStyle, {'margin-top': headerHeight+1 + 'px'});
+            },
+
+            setOffsetFromHeader: function(isCalcNewHeaderHeight) {
+                if(!this.headerEl) return;
+
+                if(isCalcNewHeaderHeight === true){
+                    this.calcOffsetFromHeader();
+                }
+                this.$el.find('.listview').css({'padding-top': this.headerHeight + 'px'});
+                this.scroller.update(isCalcNewHeaderHeight ? {scrollYStyle: this.scrollYStyle} : undefined);
+            },
+
             onResetItems : function() {
                 this.innerEl = null;
                 Common.UI.DataView.prototype.onResetItems.call(this);
                 this.trigger('items:reset', this);
+                if(this.headerEl) {
+                    this.setOffsetFromHeader();
+                }
             },
 
             createNewItem: function(record) {
@@ -87,7 +248,7 @@ define([
                         this.dataViewItems.push(view);
                     } else {
                         var idx = _.indexOf(this.store.models, record);
-                        var innerDivs = this.innerEl.find('> div');
+                        var innerDivs = this.innerEl.find('> .item');
 
                         if (idx > 0)
                             $(innerDivs.get(idx - 1)).after(view.render().el);
@@ -123,7 +284,7 @@ define([
 
             scrollToRecord: function (record, force) {
                 if (!this._fromKeyDown) {
-                    Common.UI.DataView.prototype.scrollToRecord.call(this, record, force);
+                    Common.UI.DataView.prototype.scrollToRecord.call(this, record, force, this.headerHeight);
                     return;
                 }
 
@@ -136,10 +297,12 @@ define([
 
                 var div_top = div.position().top,
                     div_height = div.outerHeight(),
+                    div_first = this.dataViewItems[0].el,
+                    div_first_top = div_first ? div_first.offsetTop : 0,
                     newpos;
 
-                if (force || div_top<0)
-                    newpos = innerEl.scrollTop() + div_top;
+                if (force || div_top<div_first_top)
+                    newpos = innerEl.scrollTop() + div_top - div_first_top;
                 else if (div_top+div_height>innerHeight)
                     newpos = innerEl.scrollTop() + div_top + div_height - innerHeight;
 
diff --git a/apps/common/main/lib/component/Scroller.js b/apps/common/main/lib/component/Scroller.js
index 73508b3901..a8a1c31e4a 100644
--- a/apps/common/main/lib/component/Scroller.js
+++ b/apps/common/main/lib/component/Scroller.js
@@ -63,7 +63,8 @@ define([
                 includePadding          : true,
                 includeMargin           : true,
                 alwaysVisibleX          : false,
-                alwaysVisibleY          : false
+                alwaysVisibleY          : false,
+                scrollYStyle            : null
             },
 
             initialize: function(options) {
@@ -85,6 +86,8 @@ define([
 
                     this.setAlwaysVisibleX(me.options.alwaysVisibleX);
                     this.setAlwaysVisibleY(me.options.alwaysVisibleY);
+
+                    (this.options.scrollYStyle) && (this.setOptionStyleY(this.options.scrollYStyle));
                 }
 
                 return this;
@@ -107,6 +110,8 @@ define([
 
                 this.setAlwaysVisibleX(options.alwaysVisibleX);
                 this.setAlwaysVisibleY(options.alwaysVisibleY);
+                
+                (options.scrollYStyle) && (this.setOptionStyleY(options.scrollYStyle));
 
                 // Emulate capture scroller
                 var mouseDownHandler = function(e) {
@@ -166,6 +171,11 @@ define([
                 }
             },
 
+            setOptionStyleY: function (style) {
+                $(this.el).find('.ps-scrollbar-y-rail').css(style);
+                this.cmpEl.perfectScrollbar('update');
+            },
+
             isVisible: function() {
                 return $(this.el).find('.ps-scrollbar-y-rail').is(':visible');
             }
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index ff462c1f3f..1220ee4865 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -23,13 +23,14 @@
     }
   }
 
-  &:not(.no-focus):focus:not(.disabled) {
+  &:not(.no-focus):focus:not(.disabled),
+  &:not(.no-focus).focused:not(.disabled){
     border-color: @border-control-focus-ie;
     border-color: @border-control-focus;
   }
 
   & > .item {
-//    display: block;
+  //    display: block;
     text-overflow: ellipsis;
     padding: 3px 6px;
     cursor: pointer;
@@ -86,6 +87,64 @@
   }
 }
 
+.listview-table-header-wrapper {
+  width: 100%;
+  position: relative;
+
+  .listview-table-header {
+    z-index: 1;
+    background-color: @background-normal-ie;
+    background-color: @background-normal;
+    border-bottom: @scaled-one-px-value-ie solid @border-regular-control-ie;
+    border-bottom: @scaled-one-px-value solid @border-regular-control;
+    padding: 3px 6px;
+    position: absolute;
+    margin: @scaled-one-px-value;
+    width: calc(100% - 2 * @scaled-one-px-value);
+    display: flex;
+    align-items: center;
+  
+    label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .table-header-item {
+      color: @text-tertiary-ie;
+      color: @text-tertiary;
+      display: inline-block;
+      
+      .header-sorted-wrapper {
+        display: flex;
+
+        .header-sorted {
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          padding-right: 1px;
+          cursor: pointer;
+  
+          label {
+            padding-right: 6px;
+          }
+  
+          .caret {
+            border-color: @text-tertiary-ie;
+            border-color: @text-tertiary;
+            min-width: 4px;
+            min-height: 4px;
+    
+            &.caret-hidden {
+              visibility: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
 .no-borders > .listview .item {
   border-color: transparent;
   border-top-color: transparent;
diff --git a/apps/documenteditor/main/app/view/CustomColumnsDialog.js b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
index 8f0a247a4d..558ec7470b 100644
--- a/apps/documenteditor/main/app/view/CustomColumnsDialog.js
+++ b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
@@ -63,10 +63,7 @@ define([
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num" style="float: right;"></div>',
                     '</div>',
-                    '<label class="input-label" style="width:27px; font-weight: bold; margin-left:6px;">#</label>',
-                    '<label class="input-label" style="width:114px; font-weight: bold;">' + this.textWidth + '</label>',
-                    '<label class="input-label" style="width:105px; font-weight: bold;">' + this.textTitleSpacing + '</label>',
-                    '<div id="custom-columns-list" style="width:100%; height: 91px;"></div>',
+                    '<div id="custom-columns-list" style="width:100%; height: 113px;"></div>',
                     '<div class="input-row" style="margin: 10px 0;">',
                         '<div id="custom-columns-equal-width"></div>',
                     '</div>',
@@ -181,8 +178,13 @@ define([
                 store: new Common.UI.DataViewStore(),
                 showLast: false,
                 handleSelect: false,
-                tabindex: 1,
+                tabindex: 0,
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                headers: [
+                    {name: '#',                     width:26},
+                    {name: this.textWidth,          width:115},
+                    {name: this.textTitleSpacing,   width:113},
+                ],
                 itemTemplate: _.template([
                     '<div id="custom-columns-list-item-<%= index %>" class="list-item" style="display:flex; align-items:center; width=100%;">',
                         '<label class="level-caption" style="padding-right:5px; flex-shrink:0; width:20px;"><%= index + 1 %></label>',
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index 6ea7772326..60336254b5 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -48,14 +48,14 @@ define([
     DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 500,
-            height: 455,
+            height: 460,
             id: 'window-table-contents'
         },
 
         initialize : function(options) {
             var me = this;
 
-            var height = options.type ? 385 : 455;
+            var height = options.type ? 385 : 460;
             _.extend(this.options, {
                 title: options.type ? this.textTitleTOF : this.textTitle,
                 height: height,
@@ -119,13 +119,13 @@ define([
                                                 '<div id="tableofcontents-spin-levels" class="margin-left" style="display: inline-block; width:95px;"></div>',
                                             '</div>',
                                             '<div id="tableofcontents-from-styles" class="hidden">',
-                                                '<table><tr><td style="height: 25px;">',
-                                                        '<label class="input-label label-style" style="width: 144px;">' + me.textStyle + '</label>',
-                                                        '<label class="input-label" style="">' + me.textLevel + '</label>',
-                                                    '</td></tr>',
-                                                    '<tr><td>',
-                                                        '<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 121px;"></div>',
-                                                '</td></tr></table>',
+                                                '<table>',
+                                                    '<tr>',
+                                                        '<td>',
+                                                            '<div id="tableofcontents-styles-list" class="header-styles-tableview" style="width:100%; height: 143px;"></div>',
+                                                        '</td>',
+                                                    '</tr>',
+                                                '</table>',
                                             '</div>',
                                         '<% } %>',
                                         '</td>',
@@ -148,6 +148,7 @@ define([
             this.type       = options.type || 0; // 0 - TOC, 1 - TOF
             this.startLevel = 1;
             this.endLevel = 3;
+            this.isInitStylesListHeaders = false;
             this._noApply = true;
             this._originalProps = null;
 
@@ -333,6 +334,12 @@ define([
                     if (newValue) {
                         this.stylesContainer.toggleClass('hidden', !newValue);
                         this.levelsContainer.toggleClass('hidden', newValue);
+
+                        if(newValue && !this.isInitStylesListHeaders) {
+                            this.initListHeaders();
+                            this.stylesList.setOffsetFromHeader(true);
+                            this.isInitStylesListHeaders = true;
+                        }
                         if (this._needUpdateStyles)
                             this.synchronizeLevelsFromOutline();
                         this.stylesList.scroller.update({alwaysVisibleY: true});
@@ -365,6 +372,10 @@ define([
                         simpleAddMode: true,
                         showLast: false,
                         tabindex: 1,
+                        headers: [
+                            {name: me.textStyle, width: 144, style: 'margin-left: 16px;'},
+                            {name: me.textLevel},
+                        ],
                         template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                         itemTemplate: _.template([
                             '<div id="<%= id %>" class="list-item">',
@@ -506,6 +517,21 @@ define([
             this._noApply = false;
         },
 
+        initListHeaders: function() {
+            var headersArr = this.stylesList.headerEl.find('.table-header-item'),
+                widthHeader = this.stylesList.headerEl.width(),
+                widthFirstHeader = $(headersArr[0]).width(),
+                marginFirstHeader = parseFloat($(headersArr[0]).css('margin-left'));
+            
+            $(headersArr[0]).addClass('hidden');
+            var widthLastHeader = $(headersArr[1]).width();
+            $(headersArr[0]).removeClass('hidden');
+
+            if(marginFirstHeader + widthFirstHeader + widthLastHeader > widthHeader) {
+                this.stylesList.setHeaderWidth(0, widthHeader - widthLastHeader - marginFirstHeader);
+            }
+        },
+
         fillTOCProps: function(props) {
             var me = this,
                 docStyles = this.api.asc_GetStylesArray(),
diff --git a/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template b/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
index 9dae144902..3741cf231c 100644
--- a/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/FormatRulesManagerDlg.template
@@ -7,16 +7,9 @@
                     <div id="format-manager-combo-scope" class="input-group-nr" style="width:185px;"></div>
                 </td>
             </tr>
-            <tr>
-                <td colspan=2>
-                    <label id="format-manager-label-column" class="header" style="width: 186px;"><%= scope.textRules %></label>
-                    <label id="format-manager-label-sort" class="header" style="width: 177px;"><%= scope.textApply %></label>
-                    <label class="header" style=""><%= scope.textFormat %></label>
-                </td>
-            </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="format-manager-rules-list" class="range-tableview" style="width:100%; height: 151px;"></div>
+                    <div id="format-manager-rules-list" class="range-tableview" style="width:100%; height: 173px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index ef016148f4..f31bc01d04 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -7,20 +7,9 @@
                     <div id="name-manager-combo-filter" class="input-group-nr" style="width:210px;"></div>
                 </td>
             </tr>
-            <tr>
-                <td colspan=2>
-                    <div style="width: 169px;display: inline-block;"><span id="name-manager-sort-name" class="header-sorted">
-                        <label class="header"><%= scope.textRanges %></label><div style="width: 6px;height: 6px;"></div><span id="name-manager-sort-name-span" class="sort-direction  caret"></span>
-                    </span></div>
-                    <div style="width: 115px;display: inline-block;"><span id="name-manager-sort-scope" class="header-sorted">
-                        <label class="header"><%= scope.textScope %></label><div style="width: 6px;height: 6px;"></div><span id="name-manager-sort-scope-span" class="sort-direction  caret"></span>
-                    </span></div>
-                    <label class="header" style=""><%= scope.textDataRange %></label>
-                </td>
-            </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 141px;"></div>
+                    <div id="name-manager-range-list" class="range-tableview" style="width:100%; height: 163px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template b/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
index fee4ace453..f7abb351d4 100644
--- a/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ProtectRangesDlg.template
@@ -9,16 +9,9 @@
                     <label><%= scope.textRangesDesc %></label>
                 </td>
             </tr>
-            <tr>
-                <td colspan=2>
-                    <label class="header" style="width: 188px;"><%= scope.textTitle %></label>
-                    <label class="header" style="width: 188px;"><%= scope.textRange %></label>
-                    <label class="header" style=""><%= scope.textPwd %></label>
-                </td>
-            </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="protect-ranges-list" class="range-tableview" style="width:100%; height: 155px;"></div>
+                    <div id="protect-ranges-list" class="range-tableview" style="width:100%; height: 164px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template b/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
index 2aab5e6925..b7067b683d 100644
--- a/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.template
@@ -15,16 +15,9 @@
             <tr>
                 <td colspan=2 class="padding-very-small"></td>
             </tr>
-            <tr>
-                <td colspan=2>
-                    <label class="header" style="width: 188px;"><%= scope.textTitle %></label>
-                    <label class="header" style="width: 188px;"><%= scope.textRange %></label>
-                    <label class="header" style=""><%= scope.textYouCan %></label>
-                </td>
-            </tr>
             <tr>
                 <td colspan=2 class="padding-small">
-                    <div id="protect-edit-ranges-list" class="range-tableview" style="width:100%; height: 130px;"></div>
+                    <div id="protect-edit-ranges-list" class="range-tableview" style="width:100%; height: 141px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/SortDialog.template b/apps/spreadsheeteditor/main/app/template/SortDialog.template
index d67a775073..d0b4f3e3c3 100644
--- a/apps/spreadsheeteditor/main/app/template/SortDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/SortDialog.template
@@ -11,16 +11,9 @@
                     <button type="button" class="btn btn-text-default" id="sort-dialog-btn-options" style="min-width: 100px;"><%= scope.textOptions %></button>
                 </td>
             </tr>
-            <tr>
-                <td>
-                    <label id="sort-dialog-label-column" class="header" style="width: 243px;"><%= scope.textColumn %></label>
-                    <label id="sort-dialog-label-sort" class="header" style="width: 141px;"><%= scope.textSort %></label>
-                    <label class="header" style=""><%= scope.textOrder %></label>
-                </td>
-            </tr>
             <tr>
                 <td class="padding-small">
-                    <div id="sort-dialog-list" class="" style="width:100%; height: 151px;"></div>
+                    <div id="sort-dialog-list" class="" style="width:100%; height: 173px;"></div>
                 </td>
             </tr>
         </table>
diff --git a/apps/spreadsheeteditor/main/app/template/WatchDialog.template b/apps/spreadsheeteditor/main/app/template/WatchDialog.template
index d9dfe4296d..0c555cef6c 100644
--- a/apps/spreadsheeteditor/main/app/template/WatchDialog.template
+++ b/apps/spreadsheeteditor/main/app/template/WatchDialog.template
@@ -7,19 +7,9 @@
                     <div id="watch-dialog-btn-delete" style="display: inline-block;"></div>
                 </td>
             </tr>
-            <tr>
-                <td>
-                    <label class="header" style="width: 76px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textBook %></label><!--
-                    --><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textSheet %></label><!--
-                    --><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textName %></label><!--
-                    --><label class="header" style="width: 70px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textCell %></label><!--
-                    --><label class="header" style="width: 110px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textValue %></label><!--
-                    --><label class="header" style="width: 140px;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;"><%= scope.textFormula %></label>
-                </td>
-            </tr>
             <tr>
                 <td class="padding-small">
-                    <div id="watch-dialog-list" class="range-tableview" style="width:100%; height: 143px;"></div>
+                    <div id="watch-dialog-list" class="range-tableview" style="width:100%; height: 164px;"></div>
                 </td>
             </tr>
         </table>
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index fd970f6766..00e857c7a1 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -94,16 +94,9 @@ define([
                                         '<div id="chart-type-dlg-styles-list" class="" style="width:100%; height: 176px;"></div>',
                                     '</td>',
                                 '</tr>',
-                                '<tr class="combined-chart">',
-                                    '<td>',
-                                        '<label id="chart-type-dlg-label-column" class="header" style="width: 115px;">', me.textSeries, '</label>',
-                                        '<label id="chart-type-dlg-label-sort" class="header" style="width: 100px;">', me.textType, '</label>',
-                                        '<label class="header" style="width: 134px;text-align: center;">', me.textSecondary, '</label>',
-                                    '</td>',
-                                '</tr>',
                                 '<tr class="combined-chart">',
                                     '<td class="padding-small">',
-                                        '<div id="chart-type-dlg-series-list" class="" style="width:100%; height: 180px;"></div>',
+                                        '<div id="chart-type-dlg-series-list" class="" style="width:100%; height: 203px;"></div>',
                                     '</td>',
                                 '</tr>',
                             '</table>',
@@ -193,6 +186,11 @@ define([
                 emptyText: '',
                 enableKeyEvents: false,
                 scrollAlwaysVisible: true,
+                headers: [
+                    {name: me.textSeries, width: 108},
+                    {name: me.textType, width: 105},
+                    {name: me.textSecondary, width: 123, style:'text-align: center;'},
+                ],
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
index 5ea46f0991..433741cafa 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -74,9 +74,7 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-small">',
-                                            '<label class="header" style="display: inline-block; width: 245px;">', me.textSource,'</label>',
-                                            '<label class="header" style="display: inline-block;">', me.textStatus,'</label>',
-                                            '<div id="external-links-list" class="range-tableview" style="width:100%; height: 148px;"></div>',
+                                            '<div id="external-links-list" class="range-tableview" style="width:100%; height: 171px;"></div>',
                                         '</td>',
                                     '</tr>',
                                 '</table>',
@@ -109,6 +107,10 @@ define([
                 el: $('#external-links-list', this.$window),
                 store: new Common.UI.DataViewStore(),
                 simpleAddMode: true,
+                headers: [
+                    {name: me.textSource, width: 240},
+                    {name: me.textStatus, width: 175}
+                ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
                         '<div style="width:240px;padding-right: 5px;"><%= value %></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
index d4334a91be..d9e60f7805 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
@@ -146,6 +146,11 @@ define([  'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
                 el: $('#format-manager-rules-list', this.$window),
                 store: new Common.UI.DataViewStore(),
                 emptyText: '',
+                headers: [
+                    {name: this.textRules, width: 182},
+                    {name: this.textApply, width: 180},
+                    {name: this.textFormat, width: 114},
+                ],
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;display:inline-block;" id="format-manager-item-<%= ruleIndex %>">',
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 55cb15c860..b122feef24 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -119,6 +119,12 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
                 store: new Common.UI.DataViewStore(),
                 simpleAddMode: true,
                 emptyText: this.textEmpty,
+                headers: [
+                    {name: me.textRanges,       width: 166, sortType:'name',        style: 'padding-right: 12px;'},
+                    {name: me.textScope,        width: 117, sortType:'scopeName',   style: 'padding-right: 12px;'},
+                    {name: me.textDataRange,    width: 208},
+                ],
+                initSort:{type: this.sort.type, direction: this.sort.direction},
                 itemTemplate: _.template([
                         '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
                             '<div class="listitem-icon toolbar__icon <% print(isTable?"btn-menu-table":(isSlicer ? "btn-slicer" : "btn-named-range")) %>"></div>',
@@ -158,15 +164,7 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             });
             this.btnDeleteRange.on('click', _.bind(this.onDeleteRange, this));
 
-            $('#name-manager-sort-name').on('click', _.bind(this.onSortNames, this, 'name'));
-            $('#name-manager-sort-scope').on('click', _.bind(this.onSortNames, this, 'scopeName'));
-            this.spanSortName = $('#name-manager-sort-name-span');
-            this.spanSortScope = $('#name-manager-sort-scope-span');
-            (this.sort.type=='name') ? this.spanSortScope.addClass('hidden') : this.spanSortName.addClass('hidden');
-            if (this.sort.direction<0) {
-                (this.sort.type=='name') ? this.spanSortName.addClass('sort-desc') : this.spanSortScope.addClass('sort-desc');
-            }
-
+            this.rangeList.on('header:click',  _.bind(this.onSortNames, this));
             this.afterRender();
         },
 
@@ -360,16 +358,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             this.close();
         },
 
-        onSortNames: function(type) {
-            if (type !== this.sort.type) {
-                this.sort = {type: type, direction: 1};
-                this.spanSortName.toggleClass('hidden');
-                this.spanSortScope.toggleClass('hidden');
-            } else {
-                this.sort.direction = -this.sort.direction;
-            }
-            var sorted = (type=='name') ? this.spanSortName : this.spanSortScope;
-            (this.sort.direction>0) ? sorted.removeClass('sort-desc') : sorted.addClass('sort-desc');
+        onSortNames: function(type, direction) {
+            this.sort = {type: type, direction: direction};
 
             this.rangeList.store.sort();
             this.rangeList.onResetItems();
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
index 086b63c692..4af50fc7a3 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectRangesDlg.js
@@ -97,10 +97,15 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
                 el: $('#protect-ranges-list', this.$window),
                 store: new Common.UI.DataViewStore(),
                 emptyText: this.textEmpty,
+                headers: [
+                    {name: this.textTitle, width:184},
+                    {name: this.textRange, width:180},
+                    {name: this.textPwd,   width:82},
+                ],
                 itemTemplate: _.template([
                         '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
                             '<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
-                            '<div style="width:191px;padding-right: 5px;"><%= range %></div>',
+                            '<div style="width:180px;padding-right: 5px;"><%= range %></div>',
                             '<div style="width:70px;"><% if (pwd) { %>', me.txtYes, '<% } else { %>', me.txtNo, '<% } %></div>',
                             '<% if (lock) { %>',
                                 '<div class="lock-user"><%=lockuser%></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
index 337243290f..a22e71af1a 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectedRangesManagerDlg.js
@@ -107,6 +107,11 @@ define([  'text!spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.te
                 multiSelect: true,
                 simpleAddMode: true,
                 emptyText: this.textEmpty,
+                headers: [
+                    {name: this.textTitle,  width: 184},
+                    {name: this.textRange,  width: 191},
+                    {name: this.textYouCan, width: 70},
+                ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
                     '<div style="width:184px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(name) %></div>',
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index cccb692279..ac67a5f918 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -128,6 +128,11 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                 store: new Common.UI.DataViewStore(),
                 emptyText: '',
                 enableKeyEvents: false,
+                headers: [
+                    {name: me.textColumn,   width: 212},
+                    {name: me.textSort,     width: 157},
+                    {name: me.textOrder,    width: 156},
+                ],
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                         '<div class="list-item" style="width: 100%;display: flex;align-items:center;" id="sort-dialog-item-<%= levelIndex %>">',
@@ -191,9 +196,6 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
             });
             this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
 
-            this.lblColumn = $('#sort-dialog-label-column');
-            this.lblSort = $('#sort-dialog-label-sort');
-
             this.afterRender();
         },
 
@@ -219,7 +221,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                     lockOrientation: !!props.asc_getLockChangeOrientation()
                 };
 
-                this.lblColumn.text(props.asc_getColumnSort() ? this.textColumn : this.textRow);
+                this.sortList.setHeaderName(0, (props.asc_getColumnSort() ? this.textColumn : this.textRow));
 
                 // get name from props
                 this.fillSortValues();
@@ -312,11 +314,22 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
         },
 
         initListHeaders: function() {
-            var pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
-            pos && this.lblColumn.width(Math.floor(pos.left)-3);
+            var firstLabelWidth = 0,
+                secondLabelWidth = 0,
+                thirdLabelWidth = 0,
+                pos = this.sortList.cmpEl.find('#sort-dialog-cmb-sort-0').position();
+
+            pos && (firstLabelWidth = Math.floor(pos.left)-3);
+            
             pos = this.sortList.cmpEl.find('#sort-dialog-btn-color-0').position();
             !pos && (pos = this.sortList.cmpEl.find('#sort-dialog-cmb-order-0').position());
-            pos && this.lblSort.width(Math.floor(pos.left)-5 - this.lblColumn.width());
+            pos && (secondLabelWidth = Math.floor(pos.left)-5 - firstLabelWidth);
+
+            thirdLabelWidth = this.sortList.headerEl.width() - firstLabelWidth - secondLabelWidth;
+            
+            this.sortList.setHeaderWidth(0, firstLabelWidth);
+            this.sortList.setHeaderWidth(1, secondLabelWidth);
+            this.sortList.setHeaderWidth(2, thirdLabelWidth);
         },
 
         addControls: function(listView, itemView, item) {
@@ -413,7 +426,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                 props: me.sortOptions,
                 handler : function(result, settings) {
                     if (result == 'ok' && settings) {
-                        me.lblColumn.text(settings.sortcol ? me.textColumn : me.textRow);
+                        me.sortList.setHeaderName(0, settings.sortcol ? me.textColumn : me.textRow);
                         me.props.asc_setHasHeaders(settings.headers);
                         // me.props.asc_setCaseSensitive(settings.sensitive);
                         me.props.asc_setColumnSort(settings.sortcol);
diff --git a/apps/spreadsheeteditor/main/app/view/WatchDialog.js b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
index 411027cc2d..8c32c9fd65 100644
--- a/apps/spreadsheeteditor/main/app/view/WatchDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/WatchDialog.js
@@ -88,6 +88,14 @@ define([  'text!spreadsheeteditor/main/app/template/WatchDialog.template',
                 multiSelect: true,
                 store: new Common.UI.DataViewStore(),
                 simpleAddMode: true,
+                headers: [
+                    {name: this.textBook, width: 70},
+                    {name: this.textSheet, width: 70},
+                    {name: this.textName, width: 70},
+                    {name: this.textCell, width: 70},
+                    {name: this.textValue, width: 110},
+                    {name: this.textFormula, width: 135},
+                ],
                 itemTemplate: _.template([
                     '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;pointer-events:none;">',
                         '<div style="width:70px;padding-right: 5px;"><%= Common.Utils.String.htmlEncode(book) %></div>',