Is there a way to add an arrow in front of a table row in angular without shifting the contents to the right?

Issue

I'm working on a table which sometimes can be expanded when a row is clicked. I want to add arrows in front of the expandable rows, to signal to the user that it can be opened; however I can't seem to place the icon in front of the row without it pushing the entire row one step to the right. The table is dynamically populated, so I don't know how many rows and columns it will have.

I have tried using a simple ::before, but again, everything gets shifted to the right. I was thinking of placing the icons outside the table itself, but I don't really know how I would implement it in a way that would make sense...

Does anyone have experience with something similar?

Solution

You can add an arrow icon in front of a table row without shifting the contents to the right by using CSS and HTML structure. One common approach is to use a pseudo-element like ::before on the table cell and set it to position: absolute.

HTML:

<table>
  <tr class="expandable-row">
    <td class="expand-icon">
      <!-- Add your expand/collapse icon here, e.g., a FontAwesome icon -->
      <i class="fas fa-chevron-right"></i>
    </td>
    <td>Row content goes here</td>
  </tr>
  <!-- Other rows -->
</table>

CSS:

table {
  border-collapse: collapse;
  width: 100%;
}

.expandable-row .expand-icon {
  position: relative;
  width: 30px; /* Set a fixed width for the icon cell */
}

.expandable-row .expand-icon i {
  position: absolute;
  left: 0;
  top: 50%; /* Vertically center the icon */
  transform: translateY(-50%);
  cursor: pointer;
  /* Add styling for your expand icon, e.g., color, font-size, etc. */
}

/* Add styles for expanded content if needed */
.expandable-row.expanded .expand-icon i {
  transform: translateY(-50%) rotate(90deg); /* Rotate the icon when expanded */
}

Answered By - Chintan Dhokai