Abrir Linha de Opçõoes em Tabela

css

a i {
  transform: rotate(0deg);
  transition: 200ms transform ease;
}

a[data-tem-row="1"] i {
  transform: rotate(180deg);
}

html

<template id="template-file-row-panel">
  <td class="has-background-grey-lighter">
    <span class="button icon">
      <i class="fas fa-car"></i>
    </span>
    <span class="button icon">
      <i class="fas fa-leaf"></i>
    </span>
    <span class="button icon">
      <i class="fas fa-fighter-jet"></i>
    </span>
  </td>
</template>

<table id="tbl-row-panel">
<thead>
  <tr>
    <th>col0</th><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <a href="#" class="button">
        <span class="icon"><i class="fas fa-chevron-down"></i></span>
      </a>
    </td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>
      <a href="#" class="button">
        <span class="icon"><i class="fas fa-chevron-down"></i></span>
      </a>
    </td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
  </tr>
</tbody>
</table>

Javascript

let openPanelFromTable = (function () {
  let table;

  let btnAddRowOnClick = function () {
    let clone = document.getElementById('template-file-row-panel').content.cloneNode(true);
    let row = clone.querySelector('td');
    let cell = this.parentNode;
    let tr = cell.parentNode;
    let tbody = table.querySelector('tbody');
    let novoTr = tbody.insertRow(tr.rowIndex);
    let tds = tr.querySelectorAll('td');
    row.setAttribute('colspan', tds.length);
    novoTr.appendChild(clone);
    this.dataset.temRow = 1;
  };

  let btnRemoveRowOnClick = function (btnAddRow) {
    let cell = this.parentNode;
    let tr = cell.parentNode;
    table.deleteRow(tr.rowIndex + 1);
    this.dataset.temRow = 0;
  };

  let btnHandleOnClick = function () {
    if (this.dataset.temRow && this.dataset.temRow > 0) {
      btnRemoveRowOnClick.bind(this)();
    } else {
      btnAddRowOnClick.bind(this)();
    }
  };

  let init = function (tableSelector) {
    table = document.querySelector(tableSelector);
    let btns = document.querySelectorAll('.button');
    btns.forEach(function (btn) {
      btn.addEventListener('click', btnHandleOnClick.bind(btn));
    });
  };

  return {init};
})();
openPanelFromTable.init('#tbl-row-panel');