Cómo alinear encabezados en Vuetify v-data-table

Solución:

Esto suele deberse a la inclusión del sortable iconosortable está activado de forma predeterminada), posiblemente junto con no establecer un width. Cada una son propiedades que se pueden configurar en su caso, header_data.

Tú podrías:

• Elimine la clasificación donde no sea necesaria con sortable: false en header_data
• Agregar un fijo width en header_data donde corresponda
• Utilice el header o header.<name> ranuras (por ejemplo, para envolver el texto y el icono en un div y usar algunas de las clases integradas relacionadas con CSS flexbox)
• Crea un CSS personalizado

Las dos primeras opciones son las más fáciles, siempre que esté satisfecho con las limitaciones que ofrecen. La opción de ranura personalizada, es decir header.<name> (consulte los documentos en la sección de ranuras de la API) es bastante fácil de implementar, incluso celda por celda.

No quería tener que establecer un ancho fijo, así que como ejemplo de cómo solucionar esto con CSS:

.v-data-table-header th {
  white-space: nowrap;
}

Dale crédito a este comentario.

---

---

Utiliza Nuestro Buscador