No grid displayed in VueJS 3 project

[eugenevk]

In my VueJS 3 project (@vue/cli 4.5.15), no grid is being displayed, although if I look in the console, I can see the grid html tags. I have created a github repo to reproduce this: https://github.com/eugenevk/revogrid.git

Screenshot:

The VueJS component:

<template>
  <div id="app">
    <v-grid theme="compact" :source="rows" :columns="columns"/>
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "First"
        },
        {
          prop: "details",
          name: "Second"
      }],
      rows: [{
        name: "1",
        details: "Item 1"
      }]
    }
  },
  components: {
    VGrid
  }
}
</script>

[JulienGrv]

Since you are using Vue (and perhaps Vite), you might like to look at this example repository here.

[ghost]

same here

[tobiasBora]

One need to use the style:

revo-grid {
    height: 500px;
}

to make it visible… but can’t the height automatically adapt to the content?

[faltenberg]

Same here. Got it fixed with the absolute height as proposed by @tobiasBora. Still sad, that it still cannot calculate its height automatically. :(

[IvanPrat]

This issue seems to be happening because of a height: 0px; in .main-viewport You can fix it by adding this to your stylesheet:

revo-grid .main-viewport {
  height: auto;
}

[faltenberg]

This issue seems to be happening because of a height: 0px; in .main-viewport You can fix it by adding this to your stylesheet:

revo-grid .main-viewport {
  height: auto;
}

That did not fix it in my case. I got to see the horizontal scrollbar of the table, though.

[revolist]

Should be ok in v4+