[Vuejs]-Add an icon next to each row in the table using bootstrap vue?

0👍

Based on reading the documentation, the table component wasn’t designed for this use case because you are adding icons that are outside of the table itself.

One alternative would be to use the grid system https://bootstrap-vue.org/docs/components/layout#layout-and-grid-system to create one narrow column on the left for the icons and one wide column on the right for the table. In the narrow column, you could create rows that are exactly the height of each row of the table so that the items stay aligned with each row.

Another alternative would be to use the #cell slot, and put an element inside that uses CSS, possibly the transform property (https://www.w3schools.com/cssref/css3_pr_transform.asp), to make the element appear to the left of where it really is.

Leave a comment