diff --git a/desktop/modal/eqLogic.configure.php b/desktop/modal/eqLogic.configure.php
index 96df24d676..27ee787c0c 100644
--- a/desktop/modal/eqLogic.configure.php
+++ b/desktop/modal/eqLogic.configure.php
@@ -411,13 +411,14 @@
             </div>
           </form>
 
-          <div class="widget_layout table" style="display: none;">
+          <div id="divCmdLayoutConfiguration" class="widget_layout table" style="display: none;">
             <legend><i class="fas fa-th-large"></i> {{Mise en forme détaillée}}</legend>
             <div class="table-responsive">
               <table class="table table-condensed" id="tableCmdLayoutConfiguration">
                 <tbody>
                   <?php
                   $table = array();
+                                    
                   foreach (($eqLogic->getCmd(null, null, true)) as $cmd) {
                     $line = $eqLogic->getDisplay('layout::dashboard::table::cmd::' . $cmd->getId() . '::line', 1);
                     $column = $eqLogic->getDisplay('layout::dashboard::table::cmd::' . $cmd->getId() . '::column', 1);
@@ -429,10 +430,29 @@
                     }
                     $table[$line][$column][] = $cmd;
                   }
+                                    
                   $getDisplayDasboardNbLine = $eqLogic->getDisplay('layout::dashboard::table::nbLine', 1);
                   $getDisplayDasboardNbColumn = $eqLogic->getDisplay('layout::dashboard::table::nbColumn', 1);
+
+                  $tr = '<tr>';
+                  $tr .= '<td data-line="0" data-column="0">&nbsp;</td>';
+				  for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
+                    $tr .= '<td data-line="0" data-column="' . $j . '" style="text-align: center;">';
+                    $tr .= '<a class="bt_removeCol"  style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>';
+                    $tr .= $j;
+                    $tr .= '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>';
+                    $tr .= '</td>';
+				  }
+                  $tr .= '</tr>';
+                  echo $tr;
+                  
                   for ($i = 1; $i <= $getDisplayDasboardNbLine; $i++) {
                     $tr = '<tr>';
+                    $tr .= '<td data-line="' . $i . '" data-column="0" style="text-align: center; width: 70px;">';
+                    $tr .= '<a class="bt_removeRow"  style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>';
+                    $tr .= '<span class="counterReorder">' . $i . '</span>';
+                    $tr .= '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>';
+                    $tr .= '</td>';
                     for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
                       $tr .= '<td data-line="' . $i . '" data-column="' . $j . '">';
                       $string_cmd = '<div class="cmdLayoutContainer text-center" style="min-height:30px;">';
@@ -658,7 +678,8 @@
           document.querySelector('#div_pageContainer input.eqLogicAttr[data-l1key="isVisible"]').checked = document.querySelector('#eqLogic_information input.eqLogicAttr[data-l1key="isVisible"').checked
         }
       },
-      setTableLayoutSortable: function() {
+	  setTableLayoutSortable: function() {
+        // sortable cmds
         let containers = document.querySelectorAll('#md_eqLogicConfigure #tableCmdLayoutConfiguration tbody td .cmdLayoutContainer')
         containers.forEach(_container => {
           new Sortable(_container, {
@@ -670,6 +691,34 @@
             preventOnFilter: false,
           })
         })
+        // sortable rows
+	    new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
+          delay: 50,
+          delayOnTouchOnly: true,
+          draggable: 'tr:not(:first-child)', //exclude the first row (row for column manage)
+          filter: 'input, a',
+          preventOnFilter: false,
+          direction: 'horizontal',
+          chosenClass: 'dragSelected',
+          onUpdate: function(evt) {
+            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
+            let row = 1
+            tableLayout.querySelectorAll('tr:not(:first-child)').forEach(_cLay => { //exclude the first row (row for column manage)
+              let col = 1
+              _cLay.querySelectorAll('td').forEach(_td => {
+                _td.setAttribute('data-line', row)
+                if (is_object(_td.querySelector('.counterReorder'))) {
+                  _td.querySelector('span').innerHTML = row
+                } else {
+                  _td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + row + '::' + col)
+                  _td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + row + '::' + col)
+                  col++
+                }
+              })
+              row++
+            })
+          }        
+        })
       },
       getNewLayoutTd: function(row, col) {
         var newTd = '<td data-line="' + row + '" data-column="' + col + '">'
@@ -679,14 +728,13 @@
         newTd += '</td>'
         return newTd
       },
-      applyTableLayout: function() {
+      applyTableLayout: function(_action = '', _row = '', _col = '') {
         var nbColumn = document.querySelector('#md_eqLogicConfigure input[data-l2key="layout::dashboard::table::nbColumn"]').value
         var nbRow = document.querySelector('#md_eqLogicConfigure input[data-l2key="layout::dashboard::table::nbLine"]').value
-
         var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
-        var tableRowCount = tableLayout.querySelectorAll('tr').length
-        var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td').length
-
+        var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
+        var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
+		
         if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
           //build new table:
           var newTableLayout = document.createElement('table')
@@ -694,24 +742,63 @@
           newTableLayout.setAttribute('id', 'tableCmdLayoutConfiguration')
           newTableLayout.appendChild(document.createElement('tbody'))
 
+          var newTr = document.createElement('tr')
+          let newFirstCol = '<td data-line="0" data-column="0">&nbsp;</td>'
+          for (j = 1; j <= nbColumn; j++) {
+            newFirstCol += '<td data-line="0" data-column="' + j + '" style="text-align: center;">'
+            newFirstCol += '<a class="bt_removeCol" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>'
+            newFirstCol += j
+            newFirstCol += '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>'
+            newFirstCol += '</td>'           
+          }
+          newTr.insertAdjacentHTML('beforeend', newFirstCol)
+          newTableLayout.tBodies[0].appendChild(newTr)
+          
           for (i = 1; i <= nbRow; i++) {
             var newTr = document.createElement('tr')
+            let newFirstCol = '<td data-line="' + i + '" data-column="0" style="text-align: center; width: 75px;">'
+            newFirstCol += '<a class="bt_removeRow" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'
+            newFirstCol += '<span class="counterReorder">' + i + '</span>'
+            newFirstCol += '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>'
+            newFirstCol += '</td>'
+            newTr.insertAdjacentHTML('beforeend', newFirstCol)
+                        
             for (j = 1; j <= nbColumn; j++) {
               newTd = jeeFrontEnd.md_eqLogicConfigure.getNewLayoutTd(i, j)
               newTr.insertAdjacentHTML('beforeend', newTd)
             }
             newTableLayout.tBodies[0].appendChild(newTr)
-          }
+          }          
 
           //distribute back cmds into new table
-          var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
+          //var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
+          var firstTdLayout = newTableLayout.querySelector('tr td > .cmdLayoutContainer')
           var row, col, newTd, text, style
           tableLayout.querySelectorAll('.cmdLayout').forEach(_cLay => {
-            row = _cLay.closest('td').getAttribute('data-line')
-            col = _cLay.closest('td').getAttribute('data-column')
+            row = parseInt(_cLay.closest('td').getAttribute('data-line'))
+            col = parseInt(_cLay.closest('td').getAttribute('data-column'))
+            
+            // manage adding or removing row or column
+            if (_action == 'add') {
+            	if (row >= _row && _row != 0) {
+                  row++
+                }
+                if (col >= _col && _col != 0) {
+                  col++
+                }
+            } else if (_action == 'remove') {
+            	if (row >= _row && _row != 0) {         
+                  row--
+                }
+                if (col >= _col && _col != 0) {
+                  col--
+                }
+            }
+            
             newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
-            if (newTd) {
-              newTd.querySelector('.cmdLayoutContainer').appendChild(_cLay)
+            
+            if (is_object(newTd = newTableLayout.querySelector('td[data-line="' + Math.max(row, 1) + '"][data-column="' + Math.max(col, 1) + '"] .cmdLayoutContainer'))) {
+              newTd.appendChild(_cLay)
             } else {
               firstTdLayout.appendChild(_cLay)
             }
@@ -719,22 +806,41 @@
 
           //get back tds texts and styles
           tableLayout.querySelectorAll('td').forEach(_td => {
-            row = _td.getAttribute('data-line')
-            col = _td.getAttribute('data-column')
-            text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
-            style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
+            row = parseInt(_td.getAttribute('data-line'))
+            col = parseInt(_td.getAttribute('data-column'))
+              
+            if (col != 0 && row != 0) {
+              text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
+              style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
+            }
+            
+            // manage adding or removing row or column
+            if (_action == 'add') {
+            	if (row >= _row && _row != 0) {
+                  row++
+                }
+                if (col >= _col && _col != 0) {
+                   col++
+                }
+            } else if (_action == 'remove') {
+            	if (row > _row && _row != 0) {         
+                  row--
+                }
+                if (col > _col && _col != 0) {
+                  col--
+                }
+            }
+              
             newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
-            if (newTd) {
+            if (newTd && row !=0 && col != 0) {
               newTableLayout.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value = text
               newTableLayout.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value = style
             }
           })
 
           //replace by new table:
-          tableLayout.replaceWith(newTableLayout)
-          document.querySelectorAll('#tableCmdLayoutConfiguration td').forEach(td => {
-            td.style.width = 100 / nbColumn + '%'
-          })
+          jeedomUtils.initTooltips(newTableLayout)
+          tableLayout.replaceWith(newTableLayout)          
           jeeFrontEnd.md_eqLogicConfigure.setTableLayoutSortable()
         }
       },
@@ -746,6 +852,7 @@
         document.querySelectorAll('#table_widgetParameters tbody tr').forEach(_tr => {
           eqLogic.display.parameters[_tr.querySelector('.key').jeeValue()] = _tr.querySelector('.value').jeeValue()
         })
+          
 
         jeedom.eqLogic.save({
           eqLogics: [eqLogic],
@@ -970,6 +1077,62 @@
     })
 
     //eqLogic layout tab
+      
+    // manage number of lines or columns when inserting or removing
+    function handleDynamicLineColumn(_action) {
+        if (_action !== 'add' && _action !== 'remove') {
+            throw new Error(`Invalid action value : only "add" or "remove" allowed, "${_action}" given`);
+        }
+
+        row = event.target.closest('td').getAttribute('data-line')
+        col = event.target.closest('td').getAttribute('data-column')
+        var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
+
+        if (col == 0) {          
+          var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
+          if (_action === 'remove' && tableRowCount === 1) {
+            return
+          }
+          if (_action === 'add') {
+              tableRowCount++
+          }
+          if (_action === 'remove') {
+              tableRowCount--
+          }
+          document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
+        }
+      
+        if (row == 0) {
+          var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
+          if (_action === 'remove' && tableColumnCount === 1) {
+            return
+          }          
+          if (_action === 'add') {
+              tableColumnCount++
+          }
+          if (_action === 'remove') {
+              tableColumnCount--
+          }
+          document.querySelector('input[data-l2key="layout::dashboard::table::nbColumn"]').value = tableColumnCount
+        }
+        
+        jeeFrontEnd.md_eqLogicConfigure.applyTableLayout(_action, row, col)
+    }
+
+    // listener to add/remove row or column
+    document.getElementById('divCmdLayoutConfiguration')?.addEventListener('click', function(event) {
+        if (event.target.closest('.bt_addRow') || event.target.closest('.bt_addCol')) {
+            handleDynamicLineColumn('add');
+            return;
+        }
+
+        if (event.target.closest('.bt_removeRow') || event.target.closest('.bt_removeCol')) {
+            handleDynamicLineColumn('remove');
+            return;
+        }
+    })
+      
+
     document.getElementById('eqLogic_layout')?.addEventListener('click', function(event) {
       var _target = null
       if (_target = event.target.closest('#bt_eqLogicLayoutApply')) {
@@ -978,6 +1141,7 @@
       }
     })
 
+
     document.getElementById('eqLogic_layout')?.addEventListener('change', function(event) {
       var _target = null
       if (_target = event.target.closest('.sel_layout')) {
diff --git a/desktop/modal/eqLogic.dashboard.edit.php b/desktop/modal/eqLogic.dashboard.edit.php
index cc7bc3c32b..6b0c86b235 100644
--- a/desktop/modal/eqLogic.dashboard.edit.php
+++ b/desktop/modal/eqLogic.dashboard.edit.php
@@ -290,7 +290,7 @@
               </div>
             </form>
 
-            <div class="widget_layout table" style="display: none;">
+            <div id="divCmdLayoutConfiguration" class="widget_layout table" style="display: none;">
               <label><i class="fas fa-th-large"></i> {{Mise en forme détaillée}}</label>
               <div class="table-responsive">
                 <table class="table table-condensed table-responsive" id="tableCmdLayoutConfiguration">
@@ -310,8 +310,26 @@
                     }
                     $getDisplayDasboardNbLine = $eqLogic->getDisplay('layout::dashboard::table::nbLine', 1);
                     $getDisplayDasboardNbColumn = $eqLogic->getDisplay('layout::dashboard::table::nbColumn', 1);
+      
+                    $tr = '<tr>';
+                  	$tr .= '<td data-line="0" data-column="0">&nbsp;</td>';
+                    for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
+                      	$tr .= '<td data-line="0" data-column="' . $j . '" style="text-align: center;">';
+                    	$tr .= '<a class="bt_removeCol"  style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>';
+                    	$tr .= $j;
+                    	$tr .= '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>';
+                    	$tr .= '</td>';
+				  	}
+                  	$tr .= '</tr>';
+                  	echo $tr;
+      
                     for ($i = 1; $i <= $getDisplayDasboardNbLine; $i++) {
                       $tr = '<tr>';
+                      $tr .= '<td data-line="' . $i . '" data-column="0" style="text-align: center; width: 70px;">';
+                      $tr .= '<a class="bt_removeRow"  style="margin-left: 5px;margin-right: 5px;" tooltip="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>';
+                      $tr .= '<span class="counterReorder">' . $i . '</span>';
+                      $tr .= '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" tooltip="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>';
+                      $tr .= '</td>';
                       for ($j = 1; $j <= $getDisplayDasboardNbColumn; $j++) {
                         $tr .= '<td data-line="' . $i . '" data-column="' . $j . '">';
                         $string_cmd = '<div class="cmdLayoutContainer text-center" style="min-height:30px;">';
@@ -542,6 +560,34 @@
             preventOnFilter: false,
           })
         })
+        // sortable rows
+	    new Sortable(document.querySelector('#tableCmdLayoutConfiguration tbody'), {
+          delay: 50,
+          delayOnTouchOnly: true,
+          draggable: 'tr:not(:first-child)', //exclude the first row (row for column manage)
+          filter: 'input, a',
+          preventOnFilter: false,
+          direction: 'horizontal',
+          chosenClass: 'dragSelected',
+          onUpdate: function(evt) {
+            let tableLayout = document.getElementById('tableCmdLayoutConfiguration')
+            let row = 1
+            tableLayout.querySelectorAll('tr:not(:first-child)').forEach(_cLay => { //exclude the first row (row for column manage)
+              let col = 1
+              _cLay.querySelectorAll('td').forEach(_td => {
+                _td.setAttribute('data-line', row)
+                if (is_object(_td.querySelector('.counterReorder'))) {
+                  _td.querySelector('span').innerHTML = row
+                } else {
+                  _td.querySelectorAll('input')[0]?.setAttribute('data-l3key', 'text::td::' + row + '::' + col)
+                  _td.querySelectorAll('input')[1]?.setAttribute('data-l3key', 'style::td::' + row + '::' + col)
+                  col++
+                }
+              })
+              row++
+            })
+          }        
+        })
       },
       getNewLayoutTd: function(row, col) {
         if (jeephp2js.md_eqLogicDashEdit_customLayout == '') return
@@ -552,15 +598,13 @@
         newTd += '</td>'
         return newTd
       },
-      applyTableLayout: function() {
-        if (jeephp2js.md_eqLogicDashEdit_customLayout == '') return
+      applyTableLayout: function(_action = '', _row = '', _col = '') {
         var nbColumn = document.querySelector('#md_eqlogicDashEdit input[data-l2key="layout::dashboard::table::nbColumn"]').value
         var nbRow = document.querySelector('#md_eqlogicDashEdit input[data-l2key="layout::dashboard::table::nbLine"]').value
-
         var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
-        var tableRowCount = tableLayout.querySelectorAll('tr').length
-        var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td').length
-
+        var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
+        var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
+		
         if (nbColumn != tableColumnCount || nbRow != tableRowCount) {
           //build new table:
           var newTableLayout = document.createElement('table')
@@ -568,24 +612,63 @@
           newTableLayout.setAttribute('id', 'tableCmdLayoutConfiguration')
           newTableLayout.appendChild(document.createElement('tbody'))
 
+          var newTr = document.createElement('tr')
+          let newFirstCol = '<td data-line="0" data-column="0">&nbsp;</td>'
+          for (j = 1; j <= nbColumn; j++) {
+            newFirstCol += '<td data-line="0" data-column="' + j + '" style="text-align: center;">'
+            newFirstCol += '<a class="bt_removeCol" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la colonne}}"><i class="fas fa-minus-circle"></i></a>'
+            newFirstCol += j
+            newFirstCol += '<a class="bt_addCol" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une colonne avant}}"><i class="fas fa-plus-circle"></i></a>'
+            newFirstCol += '</td>'           
+          }
+          newTr.insertAdjacentHTML('beforeend', newFirstCol)
+          newTableLayout.tBodies[0].appendChild(newTr)
+          
           for (i = 1; i <= nbRow; i++) {
             var newTr = document.createElement('tr')
+            let newFirstCol = '<td data-line="' + i + '" data-column="0" style="text-align: center; width: 75px;">'
+            newFirstCol += '<a class="bt_removeRow" style="margin-left: 5px;margin-right: 5px;" title="{{Supprimer la ligne}}"><i class="fas fa-minus-circle"></i></a>'
+            newFirstCol += '<span class="counterReorder">' + i + '</span>'
+            newFirstCol += '<a class="bt_addRow" style="margin-left: 5px;margin-right: 5px;" title="{{Inserer une ligne avant}}"><i class="fas fa-plus-circle"></i></a>'
+            newFirstCol += '</td>'
+            newTr.insertAdjacentHTML('beforeend', newFirstCol)
+                        
             for (j = 1; j <= nbColumn; j++) {
               newTd = jeeFrontEnd.md_eqlogicDashEdit.getNewLayoutTd(i, j)
               newTr.insertAdjacentHTML('beforeend', newTd)
             }
             newTableLayout.tBodies[0].appendChild(newTr)
-          }
+          }          
 
           //distribute back cmds into new table
-          var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
+          //var firstTdLayout = newTableLayout.querySelector('tr').querySelector('td > .cmdLayoutContainer')
+          var firstTdLayout = newTableLayout.querySelector('tr td > .cmdLayoutContainer')
           var row, col, newTd, text, style
           tableLayout.querySelectorAll('.cmdLayout').forEach(_cLay => {
-            row = _cLay.closest('td').getAttribute('data-line')
-            col = _cLay.closest('td').getAttribute('data-column')
+            row = parseInt(_cLay.closest('td').getAttribute('data-line'))
+            col = parseInt(_cLay.closest('td').getAttribute('data-column'))
+            
+            // manage adding or removing row or column
+            if (_action == 'add') {
+            	if (row >= _row && _row != 0) {
+                  row++
+                }
+                if (col >= _col && _col != 0) {
+                  col++
+                }
+            } else if (_action == 'remove') {
+            	if (row >= _row && _row != 0) {         
+                  row--
+                }
+                if (col >= _col && _col != 0) {
+                  col--
+                }
+            }
+            
             newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
-            if (newTd) {
-              newTd.querySelector('.cmdLayoutContainer').appendChild(_cLay)
+            
+            if (is_object(newTd = newTableLayout.querySelector('td[data-line="' + Math.max(row, 1) + '"][data-column="' + Math.max(col, 1) + '"] .cmdLayoutContainer'))) {
+              newTd.appendChild(_cLay)
             } else {
               firstTdLayout.appendChild(_cLay)
             }
@@ -593,22 +676,41 @@
 
           //get back tds texts and styles
           tableLayout.querySelectorAll('td').forEach(_td => {
-            row = _td.getAttribute('data-line')
-            col = _td.getAttribute('data-column')
-            text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
-            style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
+            row = parseInt(_td.getAttribute('data-line'))
+            col = parseInt(_td.getAttribute('data-column'))
+              
+            if (col != 0 && row != 0) {
+              text = _td.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value
+              style = _td.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value
+            }
+            
+            // manage adding or removing row or column
+            if (_action == 'add') {
+            	if (row >= _row && _row != 0) {
+                  row++
+                }
+                if (col >= _col && _col != 0) {
+                   col++
+                }
+            } else if (_action == 'remove') {
+            	if (row > _row && _row != 0) {         
+                  row--
+                }
+                if (col > _col && _col != 0) {
+                  col--
+                }
+            }
+              
             newTd = newTableLayout.querySelector('td[data-line="' + row + '"][data-column="' + col + '"]')
-            if (newTd) {
+            if (newTd && row !=0 && col != 0) {
               newTableLayout.querySelector('input[data-l3key="text::td::' + row + '::' + col + '"]').value = text
               newTableLayout.querySelector('input[data-l3key="style::td::' + row + '::' + col + '"]').value = style
             }
           })
 
           //replace by new table:
-          tableLayout.replaceWith(newTableLayout)
-          document.querySelectorAll('#tableCmdLayoutConfiguration td').forEach(td => {
-            td.style.width = 100 / nbColumn + '%'
-          })
+          jeedomUtils.initTooltips(newTableLayout)
+          tableLayout.replaceWith(newTableLayout)          
           jeeFrontEnd.md_eqlogicDashEdit.setTableLayoutSortable()
         }
       },
@@ -724,8 +826,7 @@
     var jeeM = jeeFrontEnd.md_eqlogicDashEdit
     jeeM.init()
 
-    /*Events delegations
-     */
+    /*Events delegations*/
     document.getElementById('md_eqlogicDashEdit')?.addEventListener('click', function(event) {
       var _target = null
       if (_target = event.target.closest('#bt_eqLogicLayoutApply')) {
@@ -810,6 +911,59 @@
       }
     })
 
+    function handleDynamicLineColumn(_action) {
+        if (_action !== 'add' && _action !== 'remove') {
+            throw new Error(`Invalid action value : only "add" or "remove" allowed, "${_action}" given`);
+        }
+
+        row = event.target.closest('td').getAttribute('data-line')
+        col = event.target.closest('td').getAttribute('data-column')
+        var tableLayout = document.getElementById('tableCmdLayoutConfiguration')
+
+        if (col == 0) {          
+          var tableRowCount = tableLayout.querySelectorAll('tr').length - 1
+          if (_action === 'remove' && tableRowCount === 1) {
+            return
+          }
+          if (_action === 'add') {
+              tableRowCount++
+          }
+          if (_action === 'remove') {
+              tableRowCount--
+          }
+          document.querySelector('input[data-l2key="layout::dashboard::table::nbLine"]').value = tableRowCount
+        }
+      
+        if (row == 0) {
+          var tableColumnCount = tableLayout.querySelector('tr').querySelectorAll('td:not(:first-child)').length
+          if (_action === 'remove' && tableColumnCount === 1) {
+            return
+          }          
+          if (_action === 'add') {
+              tableColumnCount++
+          }
+          if (_action === 'remove') {
+              tableColumnCount--
+          }
+          document.querySelector('input[data-l2key="layout::dashboard::table::nbColumn"]').value = tableColumnCount
+        }
+        
+        jeeFrontEnd.md_eqlogicDashEdit.applyTableLayout(_action, row, col)
+    }
+    
+    // listener to add/remove row or column
+    document.getElementById('divCmdLayoutConfiguration')?.addEventListener('click', function(event) {
+        if (event.target.closest('.bt_addRow') || event.target.closest('.bt_addCol')) {
+            handleDynamicLineColumn('add');
+            return;
+        }
+
+        if (event.target.closest('.bt_removeRow') || event.target.closest('.bt_removeCol')) {
+            handleDynamicLineColumn('remove');
+            return;
+        }
+    })
+      
     jeeM.postInit()
   })()
 </script>