How to select rows and columns on dropdown to create table using bootstrap and css

Question

I want a similar kind of functionality like it is in draw.io to select rows and columns to insert a table. Does anyone have an idea what is called or how can I achieve this?

Answer 1

I got the solution, Hope that this will help someone like me from here.

table(border='1', @click='createTable')
    tr(v-for='rowId in rows', :key='rowId')
      td(
        height='15px',
        width='15px',
        v-for='columnId in cols',
        :key='columnId',
        :data-id='rowId + "," + columnId',
        @mouseover='getId(rowId + "," + columnId)',
        :class='rowId <= row && columnId <= column ? "black-bg" : ""'
      )
  span {{ row }} x {{ column }}

function getId(id: string) {
      [row.value, column.value] = id.split(',');
    }