Table | Notion

Componente que permite plasmar en una tabla un conjunto de datos. Admite slots en cada celda para poder añadir elementos a necesidad.

Tiene soporte para “v-model”, en el cual se guardan todos los campos de la tabla. Es útil si se desea generar una tabla modificable.

Además, mediante una funcionalidad integrada, permite obtener un clon de la tabla en formato HTML con los valores asignados a las cabeceras y a las celdas (en etiquetas “span”) siempre y cuando los elementos usados en cada slot sean de tipo input o textArea, para poder extraer su valor. Esta funcionalidad se explica en el apartado “Functions”.

Importación:

import Searcher from "roachcat-components-library/table";

Propiedades

Nombre	Descripción	Tipo de dato
fields	Lista de objetos con los campos que llevará la tabla en el header o cabecera. Es un dato opcional. La estructura de cada objeto es la siguiente:

const fields = [ {label: "Mode", propName: "mode"}, {label: "Equipment", propName: "equipment"}, {label: "Transit Time", propName: "transit_time"}, {label: "Rate", propName: "rate"}, ]

Cada objeto tiene dos propiedades:

label: es el título de la columna dentro de la tabla.
propName: es el nombre del dato dentro del array “data”. Es decir: si dentro del array “data” hay un dato llamado “mode”, esta propiedad del objeto fields (propName) debe llamarse exactamente igual. | Array de Strings | | data | Lista de objetos que contiene los datos a mostrar en cada celda de la tabla. Cada de una de las valores de los objetos que contiene el array representa el valor de cada celda. Un ejemplo de la estructura a usar es la siguiente:

const rows: [ { mode: "Mode1", equipment: "Something", transit_time: "Days", rate: 888, }, { mode: "Mode2", equipment: "", transit_time: "Days", rate: "", } ] En el ejemplo anterior, el valor para la celda “mode” de la primera fila sería “Mode1”, y para la celda “mode” en la segunda fila sería “Mode2”. { | Array de Objects | | addRows | Habilita el botón para añadir más filas. La fila que añade es una copia sin valores de los elementos de la fila anterior. Por defecto es false. | Boolean | | deleteRows | Habilita la opción para eliminar filas. El valor por defecto es false. | Boolean | | tableStyles | Objeto de estilos que permite estilizar diferentes elementos de la tabla. La estructura que debe manejarse para modificar elementos específicos es la siguiente:

const tableStyles = { table: { "border-collapse": "collapse", border: "1px solid #e6e6fa", width: "830px", //Modifica los estilos de la etiqueta “table” }, th: { //Modifica los estilos de las celdas del header que contiene los campos pasados en la propiedad “fields”. }, td: { //Modifica los estilos de cada una de las celdas que muestran los valores } } | Object |

Slots

Nombre	Descripción
table-header	Permite ubicar headers o cabeceras por encima del header de los campos de la tabla. Es necesario que contenga la estructura de una fila HTML:

<tr><th colspan="2">Mi campo</th></tr>

Nótese que se añade el atributo “colspan”. Es necesario otorgarlo en función de la cantidad de columnas (campos) que se vayan a mostrar. En caso de habilitar la función de borrador de filas, el colspan debe ser igual a la cantidad de columas + 1, para así abarcar todo el ancho de la tabla. | | field | El nombre de este slot se asigna de manera dinámica, y adquiere el nombre de la celda a la cual se le añadirá el slot. Recordar que el nombre de cada celda se asigna en función del nombre de propiedad que se agregue en cada uno de los objetos de la lista data. Para mayor claridad, considérese el siguiente slot:

<template #mode="slotProps"> <input type="text" cell-type="editable-cell" v-model="slotProps.row.mode"/> </template>

En este ejemplo, se está accediendo al slot mode, el cual hace referencia a la propiedad mode pasada como data en ejemplos anteriores (revisar la tabla de propiedades).

Nótese que el input añadido dentro del slot posee soporte v-model lo cual permite guardar los datos modificados dentro del v-model general de la tabla. Para ello, es importante que el nombre del slot (en este caso #mode) tenga asignado el valor slotProps (#mode=”slotProps”). slotProps hace referencia a los valores de cada fila (objeto) especificadas en la propiedad data de la tabla. Teniendo esto preparado, el v-model del input solo recibiría el valor de la propiedad deseada, de la siguiente forma: v-model=”slotProps.row.mode" En el presente ejemplo, en el input se mostrará el valor de la propiedad mode.

IMPORTANTE: la etiqueta input del slot contiene un atributo llamado cell-type con el valor editable-cell. Este atributo es de vital importancia si se desea extraer la tabla en formato HTML con la funcionalidad integrada con este fin (se explicará en el siguiente apartado). Si el atributo cell-type=”editable-cell” no se agrega, la funcionalidad de extracción de HTML puede no funcionar correctamente. |

Functions

Estableciendo una referencia al componente, se pueden ejecutar las siguientes funciones al interior del mismo:

Nombre	Descripción
getTableHtml	Función que retorna un clon de la tabla en formato HTML con el valor de cada uno de los campos en etiquetas span. Es útil en caso de querer la tabla si se le especificaron campos editables. La tabla es retornada sin elementos inputs y sin los botones de borrado.

En caso de hacer editables los campos de la tabla, es MUY IMPORTANTE se usen solo elementos tipo input en los slots. Los elementos nativos textArea y datalist también están soportados. De momento la tabla no soporta listas seleccionables u otro tipo de elementos.

Para ejecutar la función, primero creamos una referencia al componente:

<MyTable ref=”my-table”></MyTable>

Y posteriomente ejecutamos la función mediante la referencia. En este caso, se guarda el clon de la tabla en la constante tableHtml:

const tableHtml = this.$refs[”my-table”].getTableHtml(); |