htmlcssvue.jsbootstrap-4draw.io

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


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?

enter image description here


Solution

  • 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(',');
        }