[Vuejs]-Issues with Adam Lynch's flexible data tables with CSS grid

by

0👍

Okay. Found the answers.

Answer to question # 1… Need to explicitly change the overflow property of the table element from the default value ‘visible’ to ‘auto’ or ‘scroll’.

  overflow: scroll;
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  /* These are just initial values which are overriden using JavaScript when a column is resized */
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

Answer to question # 2…Need to prevent the default behavior of the browser on a mousedown event. I ported this code to Vuejs. In Vuejs, the syntax is @mousedown.prevent="resizeInit"

Leave a comment