Data table
El componente v-data-table se utilizar para mostrar datos tabulares. Sus características incluyen ordenamiento, búsqueda, paginación, edición inline, tooltips en los encabezados y selección de filas..
Uso
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.
API
Filtro de búsqueda personalizado.
Filtro de ordenamiento personalizado.
Aplica la variante del tema dark
Deshabilita el ordenamiento por default en el render inicial.
Denota la tabla como filas que son expandibles.
La función que se utiliza para filtrar los elementos.
Components.DataTables.
Si se utiliza un objeto, el valor del texto para el encabezado
Un arreglo de objetos en el que cada uno describe el encabezado de una columna. Ve el ejemplo de abajo para una definición de todas las propiedades.
{
text: string",
value: string",
align: 'left' | 'center' | 'right'",
sortable: boolean",
class: string[] | string",
width: string"
}Pueden ser utilizados en combinación con hide-headers para especificar el número de columnas en la table que permiten que las filas con expansión y la barra de progreso funcione apropidadamente.
Esconde las acciones de la tabla.
Esconder los encabezados de la tabla
El campo en el objeto dentro de cada elemento que denota una llave única.
El arreglo de filas de la tabla.
Aplica la variante del tema light
Muestra una barra de progreso linear. Puede ser un String que especifica qué color se aplicará a la barra de progreso (cualquier color de material o color de tema primary, secondary, success, info, warning, error) o un Boolean que utilice el color del componente (configurado por la prop color si es soportada por el componente) o el color de tema primary.
Obliga a que al menos una columna siempre esté ordenada en lugar de variar entre los estados sorted ascending(ordenado ascendente)/sorted descending(ordenado descendente)/unsorted(sin orden).
The displayed icon for forcing pagination to the next page
El texto a mostrar cuando no hay datos.
El texto a mostrar cuando no hay resultados filtrados.
Utilizado para controlar la paginación y el ordenamiento desde fuera de la tabla. Puede también ser utilizado para configurar el ordenamiento por default de la columna.
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}The displayed icon for forcing pagination to the previous page
Los valores por default para el dropdown rows-per-page.
EL texto default para rows per page
El modelo de búsqueda para filtrar los resultados.
Agrega el checkbox seleccionar todos a la fila de encabezado. Puede ser ya sea un String que especifica qué color se debe aplicar al botón, o un Boolean (que utiliza el color default).
Utilizar un ícono de ordenamiento personalizado, con la misma sintaxis que para v-icon
Configura manualmente el número de filas, lo que deshabilita el ordenamiento y paginación pre-integrados. Se utiliza en conjunto con la prop de pagination para habilitar ordenamiento y paginación del lado del servidor.
Elementos de fila seleccionados.
Ejemplos
Slot: no-data
El slot no-data puede mostrar HTML personalizado cuando no hay datos.
Slot: items y headers
Los slots items y headers pueden aceptar ya sea una colección de etiquetas td/th, o si quieres controlar toda la fila, una etiqueta tr.
Slot: headerCell
Si sólo quieres aplicar cierto markup común o algún efecto en cada una de las celdas del encabezado, puedes usar el slot headerCell. En este ejemplo se usa para aplicar un tooltip a cada encabezado.
Slot: progress
También hay un slot progress para cuando quieres personalizar la presentación de los datos en el estado loading (cargando) de la tabla. Por default es un estado indeterminate de un v-progress-linear
Slot: footer
Hay también un slot footer para cuando quieres agregar cierta funcionalidad extra a las tablas. Por ejemplo un filtrado por columna o una búsqueda.
Slot: expand
El componente v-data-table también soporta filas expandibles utilizando el slot expand. Por defecto, cuando una fila se expande el resto se cierran. Puedes usar la prop expand en v-data-table para evitar que las filas expandidas se cierren al hacer click en una fila distinta.
Slot: page-text
Puedes personalizar el texto que se muestra en la página para el total de elementos utilizando el slot page-text.
Filas seleccionables
Las filas seleccionables te permiten llevar a cabo acciones en todas las filas o en filas en particular.
Búsqueda con un slot personalizado no-results
La tabla expone una prop search que te permite filtar tus datos..
Íconos personalizados
Los íconos de paginación de anterior/siguiente pueden ser personalizados con las props prev-icon, next-icon y sort-icon.
Paginación externa
La paginación puede ser controlada externamente al utilizar la prop pagination. Recuerda que debes aplicar el modificador .sync.
Ordenamiento externo.
El ordenamiento también puede ser controlado externamente al utilizar la prop pagination. Recuerda que debes aplicar el modificador .sync. Puedes también utilizar esa prop para configurar la columna ordenada por default.
Paginación y ordenamiento del lado del servidor
Si estás cargando datos desde un backend y quieres paginar y ordenar los resultados antes de mostrarlos, puedes utilizar la prop total-items. Al definir esta prop estarás deshabilitando el ordenamiento y paginación que vienen con el componente y en su lugar necesitarás utilizar la prop pagination para que escuche los cambios. Utilizar la prop loading para mosrtar una barra de progreso mientras obtienes los datos.
Tablas sin encabezados
Agregando la prop hide-headers creas una tabla sin encabezados.
Edición Inline
El componente v-edit-dialog se utiliza para la edición inline dentro de los data tables.
CRUD Actions
Un data-table con acciones de Crear, Leer, Actualizar y Borrar (CRUD en inglés) que utiliza un componente v-dialog para editar cada fila