How to vertically and horizontally center messages

Question

I'd like having my 'no data available' message centered. Any suggestions?

Answer 1

This should do it:

.v-data-table {
  --table-min-height: 100vh;  /* or 600px or any other concrete value */
  min-height: var(--table-min-height);
}
.v-data-table__empty-wrapper {
  height: calc(var(--table-min-height) - 107px);
}

Notes:

• change the value of --table-min-height to whatever makes sense in your case
• you can enable/disable it (on mobile!? - or based on any other criteria) by setting :style={'--table-min-height': dynamicExpression } on <v-data-table> (e.g: setting it to 100% would disable it)
• change .v-data-table to a more specific selector if you only want it applied to one particular table.
• 107px is the sum of header and footer heights. Depending on what features you enabled/disabled on the table it might vary, so change it accordingly. Note you can read this value from a CSS variable as well and, just like with the other one, it can be set dynamically, from the model, through a dynamic js expression (e.g: a computed).