Merge pull request #3 from ONLYOFFICE/feature/sse-table-settings

Feature/sse table settings

apps/common/main/resources/less/combo-dataview.less

@@ -157,9 +157,8 @@
     }
 }
 
-.combo-template {
+.combo-template(@combo-dataview-height: 64px) {
     @combo-dataview-button-width: 18px;
-    @combo-dataview-height: 64px;
 
     height: @combo-dataview-height;
 
@@ -196,6 +195,10 @@
     }
 };
 
+.combo-template {
+    .combo-template(64px);
+}
+
 .combo-pattern {
     @combo-dataview-button-width: 15px;
     @combo-dataview-height: 40px;

apps/documenteditor/main/app/view/TableSettings.js

@@ -91,7 +91,6 @@ define([
             this._locked = false;
             this._originalLook = new Asc.CTablePropLook();
 
-            var fullwidth = 218;
             this._originalProps = null;
             this.CellBorders = {};
             this.CellColor = {Value: 1, Color: 'transparent'};  // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -153,6 +153,9 @@ define([
             view.pmiDeleteCells.menu.on('item:click',           _.bind(me.onDeleteCells, me));
             view.pmiSortCells.menu.on('item:click',             _.bind(me.onSortCells, me));
             view.pmiClear.menu.on('item:click',                 _.bind(me.onClear, me));
+            view.pmiSelectTable.menu.on('item:click',           _.bind(me.onSelectTable, me));
+            view.pmiInsertTable.menu.on('item:click',           _.bind(me.onInsertTable, me));
+            view.pmiDeleteTable.menu.on('item:click',           _.bind(me.onDeleteTable, me));
             view.pmiInsFunction.on('click',                     _.bind(me.onInsFunction, me));
             view.menuAddHyperlink.on('click',                   _.bind(me.onInsHyperlink, me));
             view.menuEditHyperlink.on('click',                  _.bind(me.onInsHyperlink, me));
@@ -349,6 +352,33 @@ define([
             }
         },
 
+        onSelectTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_changeSelectionFormatTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Select Table');
+            }
+        },
+
+        onInsertTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_insertCellsInTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Insert to Table');
+            }
+        },
+
+        onDeleteTable: function(menu, item) {
+            if (this.api && this.documentHolder.ssMenu.formatTableName) {
+                this.api.asc_deleteCellsInTable(this.documentHolder.ssMenu.formatTableName, item.value);
+
+                Common.NotificationCenter.trigger('edit:complete', this.documentHolder);
+                Common.component.Analytics.trackEvent('DocumentHolder', 'Delete from Table');
+            }
+        },
+
         onInsFunction: function(item) {
             var controller = this.getApplication().getController('FormulaDialog');
             if (controller && this.api) {
@@ -1147,17 +1177,35 @@ define([
             seltype !== Asc.c_oAscSelectionType.RangeChart && seltype !== Asc.c_oAscSelectionType.RangeChartText && seltype !== Asc.c_oAscSelectionType.RangeShapeText)) {
                 if (!showMenu && !documentHolder.ssMenu.isVisible()) return;
                 
-                var iscelledit = this.api.isCellEdited;
+                var iscelledit = this.api.isCellEdited,
+                    formatTableInfo = cellinfo.asc_getFormatTableInfo(),
+                    isintable = (formatTableInfo !== null);
+                documentHolder.ssMenu.formatTableName = (isintable) ? formatTableInfo.asc_getTableName() : null;
 
                 documentHolder.pmiInsertEntire.setVisible(isrowmenu||iscolmenu);
                 documentHolder.pmiInsertEntire.setCaption((isrowmenu) ? this.textInsertTop : this.textInsertLeft);
                 documentHolder.pmiDeleteEntire.setVisible(isrowmenu||iscolmenu);
-                documentHolder.pmiInsertCells.setVisible(iscellmenu && !iscelledit);
+                documentHolder.pmiInsertCells.setVisible(iscellmenu && !iscelledit && !isintable);
-                documentHolder.pmiDeleteCells.setVisible(iscellmenu && !iscelledit);
+                documentHolder.pmiDeleteCells.setVisible(iscellmenu && !iscelledit && !isintable);
-                documentHolder.pmiSortCells.setVisible((iscellmenu||isallmenu||cansort) && !iscelledit);
+                documentHolder.pmiSelectTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiInsertTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiDeleteTable.setVisible(iscellmenu && !iscelledit && isintable);
+                documentHolder.pmiSortCells.setVisible((iscellmenu||isallmenu||cansort) && !iscelledit && !isintable);
                 documentHolder.pmiInsFunction.setVisible(iscellmenu||insfunc);
                 documentHolder.pmiAddNamedRange.setVisible(iscellmenu && !iscelledit);
 
+                if (isintable) {
+                    documentHolder.pmiInsertTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsInsertRowAbove());
+                    documentHolder.pmiInsertTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsInsertRowBelow());
+                    documentHolder.pmiInsertTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsInsertColumnLeft());
+                    documentHolder.pmiInsertTable.menu.items[3].setDisabled(!formatTableInfo.asc_getIsInsertColumnRight());
+
+                    documentHolder.pmiDeleteTable.menu.items[0].setDisabled(!formatTableInfo.asc_getIsDeleteRow());
+                    documentHolder.pmiDeleteTable.menu.items[1].setDisabled(!formatTableInfo.asc_getIsDeleteColumn());
+                    documentHolder.pmiDeleteTable.menu.items[2].setDisabled(!formatTableInfo.asc_getIsDeleteTable());
+
+                }
+
                 var hyperinfo = cellinfo.asc_getHyperlink();
                 documentHolder.menuHyperlink.setVisible(iscellmenu && hyperinfo && !iscelledit);
                 documentHolder.menuAddHyperlink.setVisible(iscellmenu && !hyperinfo && !iscelledit);
@@ -1170,7 +1218,7 @@ define([
                 documentHolder.pmiFreezePanes.setCaption(this.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? documentHolder.textUnFreezePanes : documentHolder.textFreezePanes);
 
                 /** coauthoring begin **/
-                documentHolder.ssMenu.items[10].setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
+                documentHolder.ssMenu.items[13].setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
                 documentHolder.pmiAddComment.setVisible(iscellmenu && !iscelledit && this.permissions.canCoAuthoring && this.permissions.canComments);
                 /** coauthoring end **/
                 documentHolder.pmiCellMenuSeparator.setVisible(iscellmenu || isrowmenu || iscolmenu || isallmenu || insfunc);
@@ -1188,7 +1236,8 @@ define([
                 documentHolder.pmiClear.menu.items[3].setVisible(!this.permissions.isEditDiagram);
                 documentHolder.pmiClear.menu.items[4].setVisible(!this.permissions.isEditDiagram);
 
-                var filterInfo = cellinfo.asc_getAutoFilterInfo() && cellinfo.asc_getAutoFilterInfo().asc_getIsApplyAutoFilter();
+                var filterInfo = cellinfo.asc_getAutoFilterInfo();
+                filterInfo = (filterInfo) ? filterInfo.asc_getIsApplyAutoFilter() : false;
                 documentHolder.pmiInsertCells.menu.items[0].setDisabled(filterInfo);
                 documentHolder.pmiDeleteCells.menu.items[0].setDisabled(filterInfo);
                 documentHolder.pmiInsertCells.menu.items[1].setDisabled(filterInfo);

apps/spreadsheeteditor/main/app/controller/RightMenu.js

@@ -78,6 +78,7 @@ define([
             this._settings[Common.Utils.documentSettingsType.Shape] =     {panelId: "id-shape-settings",      panel: rightMenu.shapeSettings,    btn: rightMenu.btnShape,       hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.TextArt] =   {panelId: "id-textart-settings",    panel: rightMenu.textartSettings,  btn: rightMenu.btnTextArt,     hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.Chart] =     {panelId: "id-chart-settings",      panel: rightMenu.chartSettings,    btn: rightMenu.btnChart,       hidden: 1, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Table] =     {panelId: "id-table-settings",      panel: rightMenu.tableSettings,    btn: rightMenu.btnTable,       hidden: 1, locked: false};
         },
 
         setApi: function(api) {
@@ -103,19 +104,20 @@ define([
 
         onSelectionChanged: function(info) {
             var SelectedObjects = [],
-                selectType = info.asc_getFlags().asc_getSelectionType();
+                selectType = info.asc_getFlags().asc_getSelectionType(),
+                formatTableInfo = info.asc_getFormatTableInfo();
 
             if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape ||
                 selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) {
                 SelectedObjects = this.api.asc_getGraphicObjectProps();
             }
             
-            if (SelectedObjects.length<=0 && !this.rightmenu.minimizedMode) {
+            if (SelectedObjects.length<=0 && !formatTableInfo && !this.rightmenu.minimizedMode) {
                 this.rightmenu.clearSelection();
                 this._openRightMenu = true;
             }
 
-            this.onFocusObject(SelectedObjects);
+            this.onFocusObject(SelectedObjects, formatTableInfo);
 
             var need_disable = info.asc_getLocked(),
                 me = this;
@@ -128,7 +130,7 @@ define([
             }
         },
 
-        onFocusObject: function(SelectedObjects) {
+        onFocusObject: function(SelectedObjects, formatTableInfo) {
             if (!this.editMode)
                 return;
 
@@ -166,6 +168,12 @@ define([
                 this._settings[settingsType].locked = value.asc_getLocked();
             }
 
+            if (formatTableInfo) {
+                settingsType = Common.Utils.documentSettingsType.Table;
+                this._settings[settingsType].props = formatTableInfo;
+                this._settings[settingsType].hidden = 0;
+            }
+            
             var lastactive = -1, currentactive, priorityactive = -1;
             for (i=0; i<this._settings.length; ++i) {
                 var pnl = this._settings[i];
@@ -256,6 +264,7 @@ define([
                 this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onFocusObject, this));
                 this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onSelectionChanged, this));
                 this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
+                this.onSelectionChanged(this.api.asc_getCellInfo());
             }
         },
 

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -1182,9 +1182,7 @@ define([
                 shortcuts: {
                     'command+l,ctrl+l': function(e) {
                         if (me.editMode) {
-                            var cellinfo = me.api.asc_getCellInfo(),
+                            if (!me.api.asc_getCellInfo().asc_getFormatTableInfo())
-                                filterinfo = cellinfo.asc_getAutoFilterInfo();
-                            if (!filterinfo || filterinfo.asc_getTableName()===null)
                                 me._setTableFormat(me.toolbar.mnuTableTemplatePicker.store.at(23).get('name'));
                         }
 
@@ -1687,7 +1685,8 @@ define([
 //                (coauth_disable !== toolbar.btnClearStyle.isDisabled()) && toolbar.btnClearStyle.setDisabled(coauth_disable);
 //                (coauth_disable !== toolbar.btnCopyStyle.isDisabled()) && toolbar.btnCopyStyle.setDisabled(coauth_disable);
 
-                var filterInfo = info.asc_getAutoFilterInfo();
+                var filterInfo = info.asc_getAutoFilterInfo(),
+                    formatTableInfo = info.asc_getFormatTableInfo();
                 if (!toolbar.mode.isEditMailMerge) {
                     /* read cell horizontal align */
                     fontparam = info.asc_getHorAlign();
@@ -1764,7 +1763,7 @@ define([
                         }
                     }
 
-                    need_disable =  this._state.controlsdisabled.filters || filterInfo && (filterInfo.asc_getTableName()!==null || filterInfo.asc_getIsAutoFilter()===null);
+                    need_disable =  this._state.controlsdisabled.filters || formatTableInfo!==null || filterInfo && filterInfo.asc_getIsAutoFilter()===null;
 //                (need_disable !== toolbar.btnMerge.isDisabled()) && toolbar.btnMerge.setDisabled(need_disable);
                     toolbar.lockToolbar(SSE.enumLock.ruleMerge, need_disable, {array:[toolbar.btnMerge]});
 
@@ -1795,7 +1794,7 @@ define([
                             { array: [toolbar.btnSortDown, toolbar.btnSortUp, toolbar.mnuitemSortAZ, toolbar.mnuitemSortZA,
                                 toolbar.btnTableTemplate,toolbar.btnSetAutofilter,toolbar.mnuitemAutoFilter,toolbar.btnAutofilter] });
 
-                val = (filterInfo) ? filterInfo.asc_getTableStyleName() : null;
+                val = (formatTableInfo) ? formatTableInfo.asc_getTableStyleName() : null;
                 if (this._state.tablestylename !== val && this.toolbar.mnuTableTemplatePicker) {
                     val = this.toolbar.mnuTableTemplatePicker.store.findWhere({name: val});
                     if (val) {
@@ -1807,7 +1806,7 @@ define([
                     }
                 }
 
-                this._state.tablename = (filterInfo) ? filterInfo.asc_getTableName() : undefined;
+                this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
 
                 need_disable =  this._state.controlsdisabled.filters || !filterInfo || (filterInfo.asc_getIsApplyAutoFilter()!==true);
                 toolbar.lockToolbar(SSE.enumLock.ruleDelFilter, need_disable, {array:[toolbar.btnClearAutofilter,toolbar.mnuitemClearFilter]});

apps/spreadsheeteditor/main/app/template/RightMenu.template

@@ -1,5 +1,7 @@
 <div id="view-right-menu" class="tool-menu right">
     <div class="right-panel">
+        <div id="id-table-settings" class="settings-panel">
+        </div>
         <div id="id-shape-settings" class="settings-panel">
         </div>
         <div id="id-image-settings" class="settings-panel">
@@ -13,6 +15,7 @@
     </div>
     <div class="tool-menu-btns">
         <div class="ct-btn-category arrow-left" />
+        <button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><span class="btn-icon img-toolbarmenu btn-menu-table">&nbsp;</span></button>
         <button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><span class="btn-icon img-toolbarmenu btn-menu-shape">&nbsp;</span></button>
         <button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><span class="btn-icon img-toolbarmenu btn-menu-image">&nbsp;</span></button>
         <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><span class="btn-icon img-toolbarmenu btn-menu-chart">&nbsp;</span></button>

apps/spreadsheeteditor/main/app/template/TableSettings.template

@@ -0,0 +1,82 @@
+<table cols="2">
+    <tr>
+        <td width="50%">
+            <label class="header"><%= scope.textRows %></label>
+        </td>
+        <td width="50%">
+            <label class="header"><%= scope.textColumns %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-header"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-first"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-total"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-last"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="table-checkbox-banded"></div>
+        </td>
+        <td class="padding-small">
+            <div id="table-checkbox-col-banded"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div id="table-checkbox-filter"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textTemplate %></label>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <div class="" id="table-combo-template" style="width: 100%; height: 60px;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="hidden">
+        <td colspan=2>
+            <label class="header"><%= scope.textTableName %></label>
+        </td>
+    </tr>
+    <tr class="hidden">
+        <td colspan=2 class="padding-small">
+            <div id="table-txt-name" class="input-row"  style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header" style="margin-top: 3px;"><%= scope.textResize %></label>
+            <button type="button" class="btn btn-text-default" id="table-btn-select-data" style="display: inline-block; float:right; min-width: 100px;"><%= scope.textSelectData %></button>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
+            <div id="table-btn-edit" style="display: inline-block; float:right;"></div>
+        </td>
+    </tr>
+    <tr class="finish-cell"></tr>
+</table>

apps/spreadsheeteditor/main/app/view/DocumentHolder.js

@@ -104,6 +104,19 @@ define([
                 value       : 'paste'
             });
 
+            me.pmiSelectTable = new Common.UI.MenuItem({
+                caption     : me.txtSelect,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: this.selectRowText,      value:  c_oAscChangeSelectionFormatTable.row},
+                        { caption: this.selectColumnText,   value: c_oAscChangeSelectionFormatTable.column},
+                        { caption: this.selectDataText,     value: c_oAscChangeSelectionFormatTable.data},
+                        { caption: this.selectTableText,    value: c_oAscChangeSelectionFormatTable.all}
+                    ]
+                })
+            });
+
             me.pmiInsertEntire = new Common.UI.MenuItem({
                 caption     : me.txtInsert
             });
@@ -130,6 +143,19 @@ define([
                 })
             });
             
+            me.pmiInsertTable = new Common.UI.MenuItem({
+                caption     : me.txtInsert,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: me.insertRowAboveText, value: c_oAscInsertOptions.InsertTableRowAbove},
+                        { caption: me.insertRowBelowText, value: c_oAscInsertOptions.InsertTableRowBelow},
+                        { caption: me.insertColumnLeftText,  value: c_oAscInsertOptions.InsertTableColLeft},
+                        { caption: me.insertColumnRightText, value: c_oAscInsertOptions.InsertTableColRight}
+                    ]
+                })
+            });
+
             me.pmiDeleteEntire = new Common.UI.MenuItem({
                 caption     : me.txtDelete
             });
@@ -156,6 +182,18 @@ define([
                 })
             });
 
+            me.pmiDeleteTable = new Common.UI.MenuItem({
+                caption     : me.txtDelete,
+                menu        : new Common.UI.Menu({
+                    menuAlign   : 'tl-tr',
+                    items: [
+                        { caption: this.deleteRowText,      value: c_oAscDeleteOptions.DeleteRows},
+                        { caption: this.deleteColumnText,   value: c_oAscDeleteOptions.DeleteColumns},
+                        { caption: this.deleteTableText,    value: c_oAscDeleteOptions.DeleteTable}
+                    ]
+                })
+            });
+
             me.pmiClear = new Common.UI.MenuItem({
                 caption     : me.txtClear,
                 menu        : new Common.UI.Menu({
@@ -273,10 +311,13 @@ define([
                     me.pmiCopy,
                     me.pmiPaste,
                     {caption: '--'},
+                    me.pmiSelectTable,
                     me.pmiInsertEntire,
                     me.pmiInsertCells,
+                    me.pmiInsertTable,
                     me.pmiDeleteEntire,
                     me.pmiDeleteCells,
+                    me.pmiDeleteTable,
                     me.pmiClear,
                     me.pmiSortCells,
                     {caption: '--'},
@@ -576,7 +617,19 @@ define([
         direct270Text:          'Rotate at 270°',
         txtAddNamedRange:       'Define Name',
         textFreezePanes:        'Freeze Panes',
-        textUnFreezePanes:      'Unfreeze Panes'
+        textUnFreezePanes:      'Unfreeze Panes',
+        txtSelect:              'Select',
+        selectRowText           : 'Select Row',
+        selectColumnText        : 'Select Entire Column',
+        selectDataText          : 'Select Column Data',
+        selectTableText         : 'Select Table',
+        insertRowAboveText      : 'Insert Row Above',
+        insertRowBelowText      : 'Insert Row Below',
+        insertColumnLeftText    : 'Insert Column Left',
+        insertColumnRightText   : 'Insert Column Right',
+        deleteRowText           : 'Delete Row',
+        deleteColumnText        : 'Delete Column',
+        deleteTableText         : 'Delete Table'
 
     }, SSE.Views.DocumentHolder || {}));
 });

apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -54,6 +54,7 @@ define([
     'spreadsheeteditor/main/app/view/ChartSettings',
     'spreadsheeteditor/main/app/view/ShapeSettings',
     'spreadsheeteditor/main/app/view/TextArtSettings',
+    'spreadsheeteditor/main/app/view/TableSettings',
     'common/main/lib/component/Scroller'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
@@ -108,12 +109,21 @@ define([
                 toggleGroup: 'tabpanelbtnsGroup'
             });
 
+            this.btnTable = new Common.UI.Button({
+                hint: this.txtTableSettings,
+                asctype: Common.Utils.documentSettingsType.Table,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'tabpanelbtnsGroup'
+            });
+
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph]   = {panel: "id-paragraph-settings",  btn: this.btnText};
             this._settings[Common.Utils.documentSettingsType.Image]       = {panel: "id-image-settings",      btn: this.btnImage};
             this._settings[Common.Utils.documentSettingsType.Shape]       = {panel: "id-shape-settings",      btn: this.btnShape};
             this._settings[Common.Utils.documentSettingsType.Chart]       = {panel: "id-chart-settings",      btn: this.btnChart};
             this._settings[Common.Utils.documentSettingsType.TextArt]     = {panel: "id-textart-settings",    btn: this.btnTextArt};
+            this._settings[Common.Utils.documentSettingsType.Table]       = {panel: "id-table-settings",      btn: this.btnTable};
 
             return this;
         },
@@ -134,18 +144,21 @@ define([
             this.btnChart.el        = $('#id-right-menu-chart');    this.btnChart.render();
             this.btnShape.el        = $('#id-right-menu-shape');    this.btnShape.render();
             this.btnTextArt.el      = $('#id-right-menu-textart');  this.btnTextArt.render();
+            this.btnTable.el        = $('#id-right-menu-table');    this.btnTable.render();
 
             this.btnText.on('click',            _.bind(this.onBtnMenuClick, this));
             this.btnImage.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnChart.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnShape.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnTextArt.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnTable.on('click',           _.bind(this.onBtnMenuClick, this));
 
             this.paragraphSettings = new SSE.Views.ParagraphSettings();
             this.imageSettings = new SSE.Views.ImageSettings();
             this.chartSettings = new SSE.Views.ChartSettings();
             this.shapeSettings = new SSE.Views.ShapeSettings();
             this.textartSettings = new SSE.Views.TextArtSettings();
+            this.tableSettings = new SSE.Views.TableSettings();
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
@@ -167,6 +180,7 @@ define([
             this.chartSettings.setApi(api);
             this.shapeSettings.setApi(api);
             this.textartSettings.setApi(api);
+            this.tableSettings.setApi(api);
         },
 
         setMode: function(mode) {
@@ -229,6 +243,7 @@ define([
                 this.shapeSettings.disableControls(disabled);
                 this.imageSettings.disableControls(disabled);
                 this.chartSettings.disableControls(disabled);
+                this.tableSettings.disableControls(disabled);
             } else {
                 var cmp = $("#" + id);
                 if (disabled !== cmp.hasClass('disabled')) {
@@ -255,6 +270,7 @@ define([
         txtImageSettings:           'Image Settings',
         txtShapeSettings:           'Shape Settings',
         txtTextArtSettings:         'Text Art Settings',
-        txtChartSettings:           'Chart Settings'
+        txtChartSettings:           'Chart Settings',
+        txtTableSettings:           'Table Settings'
     }, SSE.Views.RightMenu || {}));
 });

apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js

@@ -63,8 +63,8 @@ define([
 
             this.template = [
                 '<div class="box">',
-                    '<div id="id-dlg-tableoptions-range" class="input-row" style="margin-bottom: 10px;"></div>',
+                    '<div id="id-dlg-tableoptions-range" class="input-row"  style="margin-bottom: 5px;"></div>',
-                    '<div class="input-row" id="id-dlg-tableoptions-title"></div>',
+                    '<div class="input-row" id="id-dlg-tableoptions-title" style="margin-top: 5px;"></div>',
                 '</div>',
                 '<div class="footer right">',
                     '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
@@ -73,6 +73,7 @@ define([
             ].join('');
 
             this.options.tpl = _.template(this.template, this.options);
+            this.checkRangeType = Asc.c_oAscSelectionDialogType.FormatTable;
 
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -114,30 +115,39 @@ define([
             if (settings.api) {
                 me.api = settings.api;
 
+                if (settings.range) {
+                    me.cbTitle.setVisible(false);
+                    me.setHeight(130);
+                    me.checkRangeType = Asc.c_oAscSelectionDialogType.FormatTableChangeRange;
+                    me.inputRange.setValue(settings.range);
+                    me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, settings.range);
+                } else {
                     var options = me.api.asc_getAddFormatTableOptions();
-
+                    me.inputRange.setValue(options.asc_getRange());
-                this.inputRange.setValue(options.asc_getRange());
+                    me.cbTitle.setValue(options.asc_getIsTitle());
-                this.cbTitle.setValue(options.asc_getIsTitle());
-
                     me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.FormatTable, options.asc_getRange());
+                }
+                if (settings.title)
+                    me.setTitle(settings.title);
+
                 me.api.asc_unregisterCallback('asc_onSelectionRangeChanged', _.bind(me.onApiRangeChanged, me));
                 me.api.asc_registerCallback('asc_onSelectionRangeChanged', _.bind(me.onApiRangeChanged, me));
                 Common.NotificationCenter.trigger('cells:range', Asc.c_oAscSelectionDialogType.FormatTable);
             }
 
             me.inputRange.validation = function(value) {
-                var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, value, false);
+                var isvalid = me.api.asc_checkDataRange(me.checkRangeType, value, false);
                 return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.txtInvalidRange : true;
             };
         },
 
         getSettings: function () {
+            if (this.checkRangeType == Asc.c_oAscSelectionDialogType.FormatTable) {
                 var options = this.api.asc_getAddFormatTableOptions(this.inputRange.getValue());
-
-//            options.asc_setRange(this.inputRange.getValue());
                 options.asc_setIsTitle(this.cbTitle.checked);
-
                 return options;
+            } else
+                return this.inputRange.getValue();
         },
 
         onApiRangeChanged: function(info) {
@@ -147,12 +157,16 @@ define([
         },
 
         isRangeValid: function() {
-            var isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.FormatTable, this.inputRange.getValue(), true);
+            var isvalid = this.api.asc_checkDataRange(this.checkRangeType, this.inputRange.getValue(), true);
             if (isvalid == Asc.c_oAscError.ID.No)
                 return true;
             else {
                 if (isvalid == Asc.c_oAscError.ID.AutoFilterDataRangeError) {
                     Common.UI.warning({msg: this.errorAutoFilterDataRange});
+                } else if (isvalid == Asc.c_oAscError.ID.FTChangeTableRangeError) {
+                    Common.UI.warning({msg: this.errorFTChangeTableRangeError});
+                } if (isvalid == Asc.c_oAscError.ID.FTRangeIncludedOtherTables) {
+                    Common.UI.warning({msg: this.errorFTRangeIncludedOtherTables});
                 }
             }
             return false;
@@ -198,10 +212,12 @@ define([
 //        },
 
         txtTitle    : 'Title',
-        txtFormat   : 'Format as table',
+        txtFormat   : 'Create table',
         textCancel  : 'Cancel',
         txtEmpty    : 'This field is required',
         txtInvalidRange: 'ERROR! Invalid cells range',
-        errorAutoFilterDataRange: 'The operation could not be done for the selected range of cells.<br>Select a uniform data range inside or outside the table and try again.'
+        errorAutoFilterDataRange: 'The operation could not be done for the selected range of cells.<br>Select a uniform data range inside or outside the table and try again.',
+        errorFTChangeTableRangeError: 'Operation could not be completed for the selected cell range.<br>Select a range so that the first table row was on the same row<br>and the resulting table overlapped the current one.',
+        errorFTRangeIncludedOtherTables: 'Operation could not be completed for the selected cell range.<br>Select a range which does not include other tables.'
     }, SSE.Views.TableOptionsDialog || {}))
 });

apps/spreadsheeteditor/main/app/view/TableSettings.js

@@ -0,0 +1,457 @@
+/**
+ *  TableSettings.js
+ *
+ *  Created by Julia Radzhabova on 3/28/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/main/app/template/TableSettings.template',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/CheckBox',
+    'common/main/lib/component/ComboDataView',
+    'spreadsheeteditor/main/app/view/TableOptionsDialog'
+], function (menuTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.TableSettings = Backbone.View.extend(_.extend({
+        el: '#id-table-settings',
+
+        // Compile our stats template
+        template: _.template(menuTemplate),
+
+        // Delegated events for creating new items, and clearing completed ones.
+        events: {
+        },
+
+        options: {
+            alias: 'TableSettings'
+        },
+
+        initialize: function () {
+            var me = this;
+
+            this._state = {
+                TableName: '',
+                TemplateName: '',
+                Range: '',
+                CheckHeader: false,
+                CheckTotal: false,
+                CheckBanded: false,
+                CheckFirst: false,
+                CheckLast: false,
+                CheckColBanded: false,
+                CheckFilter: false,
+                DisabledControls: false,
+                TableNameError: false
+            };
+            this.lockedControls = [];
+            this._locked = false;
+
+            this._originalProps = null;
+            this._noApply = false;
+
+            this.render();
+
+            this.chHeader = new Common.UI.CheckBox({
+                el: $('#table-checkbox-header'),
+                labelText: this.textHeader
+            });
+            this.lockedControls.push(this.chHeader);
+
+            this.chTotal = new Common.UI.CheckBox({
+                el: $('#table-checkbox-total'),
+                labelText: this.textTotal
+            });
+            this.lockedControls.push(this.chTotal);
+
+            this.chBanded = new Common.UI.CheckBox({
+                el: $('#table-checkbox-banded'),
+                labelText: this.textBanded
+            });
+            this.lockedControls.push(this.chBanded);
+
+            this.chFirst = new Common.UI.CheckBox({
+                el: $('#table-checkbox-first'),
+                labelText: this.textFirst
+            });
+            this.lockedControls.push(this.chFirst);
+
+            this.chLast = new Common.UI.CheckBox({
+                el: $('#table-checkbox-last'),
+                labelText: this.textLast
+            });
+            this.lockedControls.push(this.chLast);
+
+            this.chColBanded = new Common.UI.CheckBox({
+                el: $('#table-checkbox-col-banded'),
+                labelText: this.textBanded
+            });
+            this.lockedControls.push(this.chColBanded);
+
+            this.chFilter = new Common.UI.CheckBox({
+                el: $('#table-checkbox-filter'),
+                labelText: this.textFilter
+            });
+            this.lockedControls.push(this.chFilter);
+
+            this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowHeader));
+            this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowTotal));
+            this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowBanded));
+            this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnFirst));
+            this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnLast));
+            this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnBanded));
+            this.chFilter.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.filterButton));
+
+            this.cmbTableTemplate = new Common.UI.ComboDataView({
+                itemWidth: 61,
+                itemHeight: 46,
+                menuMaxHeight: 300,
+                enableKeyEvents: true
+            });
+            this.cmbTableTemplate.render($('#table-combo-template'));
+            this.cmbTableTemplate.openButton.menu.cmpEl.css({
+                'min-width': 175,
+                'max-width': 175
+            });
+            this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
+            this.cmbTableTemplate.openButton.menu.on('show:after', function () {
+                me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
+            });
+            this.lockedControls.push(this.cmbTableTemplate);
+
+            this.txtTableName = new Common.UI.InputField({
+                el          : $('#table-txt-name'),
+                name        : 'tablename',
+                style       : 'width: 100%;',
+                validateOnBlur: false
+            });
+            this.txtTableName.on('changed:after', _.bind(this.onTableNameChanged, this));
+            this.lockedControls.push(this.txtTableName);
+
+            this.btnSelectData = new Common.UI.Button({
+                el: $('#table-btn-select-data')
+            });
+            this.btnSelectData.on('click', _.bind(this.onSelectData, this));
+
+            this.btnEdit = new Common.UI.Button({
+                cls: 'btn-icon-default',
+                iconCls: 'btn-edit-table',
+                menu        : new Common.UI.Menu({
+                    menuAlign: 'tr-br',
+                    items: [
+                        { caption: this.selectRowText,      value:  Asc.c_oAscChangeSelectionFormatTable.row,   idx: 0 },
+                        { caption: this.selectColumnText,   value: Asc.c_oAscChangeSelectionFormatTable.column, idx: 1 },
+                        { caption: this.selectDataText,     value: Asc.c_oAscChangeSelectionFormatTable.data,   idx: 2 },
+                        { caption: this.selectTableText,    value: Asc.c_oAscChangeSelectionFormatTable.all,    idx: 3 },
+                        { caption: '--' },
+                        { caption: this.insertRowAboveText, value: Asc.c_oAscInsertOptions.InsertTableRowAbove,     idx: 4 },
+                        { caption: this.insertRowBelowText, value: Asc.c_oAscInsertOptions.InsertTableRowBelow,     idx: 5 },
+                        { caption: this.insertColumnLeftText,  value: Asc.c_oAscInsertOptions.InsertTableColLeft,   idx: 6 },
+                        { caption: this.insertColumnRightText, value: Asc.c_oAscInsertOptions.InsertTableColRight,  idx: 7 },
+                        { caption: '--' },
+                        { caption: this.deleteRowText,      value: Asc.c_oAscDeleteOptions.DeleteRows,      idx: 8 },
+                        { caption: this.deleteColumnText,   value: Asc.c_oAscDeleteOptions.DeleteColumns,   idx: 9 },
+                        { caption: this.deleteTableText,    value: Asc.c_oAscDeleteOptions.DeleteTable,     idx: 10 }
+                    ]
+                })
+            });
+            this.btnEdit.render( $('#table-btn-edit')) ;
+            this.btnEdit.menu.on('show:after', _.bind( function(menu){
+                if (this.api) {
+                    menu.items[5].setDisabled(!this._originalProps.asc_getIsInsertRowAbove());
+                    menu.items[6].setDisabled(!this._originalProps.asc_getIsInsertRowBelow());
+                    menu.items[7].setDisabled(!this._originalProps.asc_getIsInsertColumnLeft());
+                    menu.items[8].setDisabled(!this._originalProps.asc_getIsInsertColumnRight());
+
+                    menu.items[10].setDisabled(!this._originalProps.asc_getIsDeleteRow());
+                    menu.items[11].setDisabled(!this._originalProps.asc_getIsDeleteColumn());
+                    menu.items[12].setDisabled(!this._originalProps.asc_getIsDeleteTable());
+                }
+            }, this));
+            this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
+            this.lockedControls.push(this.btnEdit);
+        },
+
+        onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
+            if (this.api)
+                this.api.asc_changeFormatTableInfo(this._state.TableName, type, newValue=='checked');
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onTableTemplateSelect: function(combo, record){
+            if (this.api && !this._noApply) {
+                if (this._state.TemplateName)
+                    this.api.asc_changeAutoFilter(this._state.TableName, Asc.c_oAscChangeFilterOptions.style, record.get('name'));
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onEditClick: function(menu, item, e) {
+            if (this.api) {
+                if (item.options.idx>=0 && item.options.idx<4)
+                    this.api.asc_changeSelectionFormatTable(this._state.TableName, item.value);
+                else if (item.options.idx>=4 && item.options.idx<8) {
+                    this.api.asc_insertCellsInTable(this._state.TableName, item.value);
+                } else {
+                    this.api.asc_deleteCellsInTable(this._state.TableName, item.value);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onTableNameChanged: function(input, newValue, oldValue) {
+            var oldName = this._state.TableName;
+            this._state.TableName = '';
+
+            if (oldName.toLowerCase() == newValue.toLowerCase()) {
+                Common.NotificationCenter.trigger('edit:complete', this);
+                return;
+            }
+
+            var me = this,
+                isvalid = this.api.asc_checkDefinedName(newValue, null);
+            if (isvalid.asc_getStatus() === true) isvalid = true;
+            else {
+                switch (isvalid.asc_getReason()) {
+                    case Asc.c_oAscDefinedNameReason.IsLocked:
+                        isvalid = this.textIsLocked;
+                    break;
+                    case Asc.c_oAscDefinedNameReason.Existed:
+                        isvalid = this.textExistName;
+                    break;
+                    case Asc.c_oAscDefinedNameReason.NameReserved:
+                        isvalid = this.textReservedName;
+                    break;
+                    default:
+                        isvalid = this.textInvalidName;
+                }
+            }
+            if (isvalid === true) {
+                this.api.asc_changeDisplayNameTable(oldName, newValue);
+                Common.NotificationCenter.trigger('edit:complete', this);
+            } else if (!this._state.TableNameError) {
+                this._state.TableNameError = true;
+                Common.UI.alert({
+                    msg: isvalid,
+                    title: this.notcriticalErrorTitle,
+                    iconCls: 'warn',
+                    buttons: ['ok'],
+                    callback: function(btn){
+                        Common.NotificationCenter.trigger('edit:complete', this);
+                        me._state.TableNameError = false;
+                    }
+                });
+            }
+        },
+
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+        },
+
+        setApi: function(o) {
+            this.api = o;
+            if (o) {
+                this.api.asc_registerCallback('asc_onInitTablePictures',    _.bind(this.onApiInitTableTemplates, this));
+            }
+            return this;
+        },
+
+        ChangeSettings: function(props) {
+            this.disableControls(this._locked);
+
+            if (props )//formatTableInfo
+            {
+                this._originalProps = props;
+
+                var value = props.asc_getTableName();
+                if (this._state.TableName!==value) {
+                    this.txtTableName.setValue(value);
+                    this._state.TableName=value;
+                }
+
+                this._state.Range = props.asc_getTableRange();
+
+                var needTablePictures = false;
+                value = props.asc_getFirstRow();
+                if (this._state.CheckHeader!==value) {
+                    this.chHeader.setValue(value, true);
+                    this._state.CheckHeader=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getLastRow();
+                if (this._state.CheckTotal!==value) {
+                    this.chTotal.setValue(value, true);
+                    this._state.CheckTotal=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getBandHor();
+                if (this._state.CheckBanded!==value) {
+                    this.chBanded.setValue(value, true);
+                    this._state.CheckBanded=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getFirstCol();
+                if (this._state.CheckFirst!==value) {
+                    this.chFirst.setValue(value, true);
+                    this._state.CheckFirst=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getLastCol();
+                if (this._state.CheckLast!==value) {
+                    this.chLast.setValue(value, true);
+                    this._state.CheckLast=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getBandVer();
+                if (this._state.CheckColBanded!==value) {
+                    this.chColBanded.setValue(value, true);
+                    this._state.CheckColBanded=value;
+                    needTablePictures = true;
+                }
+
+                value = props.asc_getFilterButton();
+                if (this._state.CheckFilter!==value) {
+                    this.chFilter.setValue(value, true);
+                    this._state.CheckFilter=value;
+                }
+                if (this.chFilter.isDisabled() == this._state.CheckHeader)
+                    this.chFilter.setDisabled(!this._state.CheckHeader);
+
+                if (needTablePictures)
+                    this.onApiInitTableTemplates(this.api.asc_getTablePictures(props));
+
+                //for table-template
+                value = props.asc_getTableStyleName();
+                if (this._state.TemplateName!==value || this._isTemplatesChanged) {
+                    this.cmbTableTemplate.suspendEvents();
+                    var rec = this.cmbTableTemplate.menuPicker.store.findWhere({
+                        name: value
+                    });
+                    this.cmbTableTemplate.menuPicker.selectRecord(rec);
+                    this.cmbTableTemplate.resumeEvents();
+
+                    if (this._isTemplatesChanged) {
+                        if (rec)
+                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
+                        else
+                            this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
+                    }
+                    this._state.TemplateName=value;
+                }
+                this._isTemplatesChanged = false;
+            }
+        },
+
+        onApiInitTableTemplates: function(Templates){
+            var self = this;
+            this._isTemplatesChanged = true;
+
+            var count = self.cmbTableTemplate.menuPicker.store.length;
+            if (count>0 && count==Templates.length) {
+                var data = self.cmbTableTemplate.menuPicker.store.models;
+                _.each(Templates, function(template, index){
+                    data[index].set('imageUrl', template.asc_getImage());
+                });
+            } else {
+                self.cmbTableTemplate.menuPicker.store.reset([]);
+                var arr = [];
+                _.each(Templates, function(template){
+                    arr.push({
+                        id          : Common.UI.getId(),
+                        name        : template.asc_getName(),
+                        caption     : template.asc_getDisplayName(),
+                        type        : template.asc_getType(),
+                        imageUrl    : template.asc_getImage(),
+                        allowSelected : true,
+                        selected    : false
+                    });
+                });
+                self.cmbTableTemplate.menuPicker.store.add(arr);
+            }
+        },
+
+        onSelectData: function() {
+            var me = this;
+            if (me.api) {
+                var handlerDlg = function(dlg, result) {
+                    if (result == 'ok') {
+                        me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None);
+                        me.api.asc_changeTableRange(me._state.TableName, dlg.getSettings());
+                    }
+
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                };
+                var win = new SSE.Views.TableOptionsDialog({
+                    handler: handlerDlg
+                });
+
+                win.show();
+                win.setSettings({
+                    api     : me.api,
+                    range   : me._state.Range,
+                    title: me.textResize
+                });
+            }
+        },
+        
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+
+        disableControls: function(disable) {
+            if (this._state.DisabledControls!==disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function(item) {
+                    item.setDisabled(disable);
+                });
+            }
+        },
+
+        textEdit:           'Rows & Columns',
+        selectRowText           : 'Select Row',
+        selectColumnText        : 'Select Entire Column',
+        selectDataText          : 'Select Column Data',
+        selectTableText         : 'Select Table',
+        insertRowAboveText      : 'Insert Row Above',
+        insertRowBelowText      : 'Insert Row Below',
+        insertColumnLeftText    : 'Insert Column Left',
+        insertColumnRightText   : 'Insert Column Right',
+        deleteRowText           : 'Delete Row',
+        deleteColumnText        : 'Delete Column',
+        deleteTableText         : 'Delete Table',
+        textOK                  : 'OK',
+        textCancel              : 'Cancel',
+        textTemplate            : 'Select From Template',
+        textRows                : 'Rows',
+        textColumns             : 'Columns',
+        textHeader              : 'Header',
+        textTotal               : 'Total',
+        textBanded              : 'Banded',
+        textFirst               : 'First',
+        textLast                : 'Last',
+        textEmptyTemplate       : 'No templates',
+        textFilter              : 'Filter button',
+        textTableName           : 'Table Name',
+        textResize              : 'Resize table',
+        textSelectData          : 'Select Data',
+        textInvalidName         : 'ERROR! Invalid table name',
+        textExistName           : 'ERROR! Range with such a name already exists',
+        textIsLocked            : 'This element is being edited by another user.',
+        notcriticalErrorTitle   : 'Warning',
+        textReservedName        : 'The name you are trying to use is already referenced in cell formulas. Please use some other name.'
+
+    }, SSE.Views.TableSettings || {}));
+});

apps/spreadsheeteditor/main/locale/en.json

@@ -709,6 +709,7 @@
   "SSE.Views.RightMenu.txtParagraphSettings": "Text Settings",
   "SSE.Views.RightMenu.txtSettings": "Common Settings",
   "SSE.Views.RightMenu.txtShapeSettings": "Shape Settings",
+  "SSE.Views.RightMenu.txtTableSettings": "Table Settings",
   "SSE.Views.RightMenu.txtTextArtSettings": "Text Art Settings",
   "SSE.Views.SetValueDialog.cancelButtonText": "Cancel",
   "SSE.Views.SetValueDialog.okButtonText": "OK",
@@ -825,6 +826,8 @@
   "SSE.Views.TableOptionsDialog.txtFormat": "Create table",
   "SSE.Views.TableOptionsDialog.txtInvalidRange": "ERROR! Invalid cells range",
   "SSE.Views.TableOptionsDialog.txtTitle": "Title",
+  "SSE.Views.TableOptionsDialog.errorFTChangeTableRangeError": "Operation could not be completed for the selected cell range.<br>Select a range so that the first table row was on the same row<br>and the resulting table overlapped the current one.",
+  "SSE.Views.TableOptionsDialog.errorFTRangeIncludedOtherTables": "Operation could not be completed for the selected cell range.<br>Select a range which does not include other tables.",
   "SSE.Views.TextArtSettings.strBackground": "Background color",
   "SSE.Views.TextArtSettings.strColor": "Color",
   "SSE.Views.TextArtSettings.strFill": "Fill",

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -20,6 +20,9 @@
 
         /*menuTextArt*/
         .toolbar-btn-icon(btn-menu-textart, 66, @toolbar-icon-size);
+
+        /*menuTable*/
+        .toolbar-btn-icon(btn-menu-table,   80, @toolbar-icon-size);
     }
 }
 
@@ -79,12 +82,19 @@
     }
 }
 
+.btn-edit-table,
 .btn-change-shape {
     .background-ximage('@{app-image-path}/right-panels/rowscols_icon.png', '@{app-image-path}/right-panels/rowscols_icon@2x.png', 84px);
     margin-right: 2px !important;
     margin-bottom: 1px !important;
 }
 
+.btn-edit-table                  {background-position: 0      0;}
+button.over .btn-edit-table      {background-position: -28px  0;}
+.btn-group.open .btn-edit-table,
+button.active .btn-edit-table,
+button:active .btn-edit-table    {background-position: -56px  0;}
+
 .btn-change-shape                  {background-position: 0      -16px;}
 button.over .btn-change-shape      {background-position: -28px  -16px;}
 .btn-group.open .btn-change-shape,
@@ -284,3 +294,7 @@ button:active .btn-change-shape    {background-position: -56px  -16px;}
 .pie-doughnut{
     background-position: -200px 0;
 }
+
+#table-combo-template .combo-dataview{
+    .combo-template(60px);
+}