Comportamientos

Introducción

Ésta propiedad permite, mediante información de la BD, realizar modificaciones en la renderización y/o funcionalidad de las celdas de una (o varias) columnas de la tabla.

La misma recibe un arreglo de comportamientos, como por ejemplo:

[
  {
    type: 'navigator',
    icon: 'mdi-arrow-right',
    attrs: {color: 'green'},
    id_resolver: '/example?nombres_seleccionados=##',
    tooltip_text: 'navegar',
    id_columna: 'fruta',
    visible: true
  },
  {
    type: 'navigator_row',
    columna: 'fruta',
    component: 'v-btn',
    icon: '',
    attrs: {color: 'green'},
    id_resolver: '/example?nombres_seleccionado=##',
    tooltip_text: 'navegar',
    id_columna: 'peso',
    visible: true
  },
  {
    type: 'modal',
    icon: 'mdi-plus',
    attrs: {color: 'blue'},
    id_resolver: '/example?nombres_seleccionado=##',
    tooltip_text: 'Agregar entrada',
    id_columna: 'fruta',
    visible: true
  }
]

Propiedades

Propiedad	Tipo	Útil para	Descripción
type	String	Todos	Aquí se explican los posibles tipos y sus estructuras
component	String	navigator_row modal_row fcn_executer_row	Nombre del componente que se quiere renderizar para reemplazar una celda. Pueden ser nombres de componentes creados en la aplicación cliente o de componentes que pertenezcan a la librería de Vuetify. En caso de ser un v-avatar se tomará el valor de la celda para renderizar una imagen dentro (como propiedad src).
columna	String	navigator_row modal_row fcn_executer_row icon_row image_row	Nombre de la columna (propiedad del objeto) que va a ser modificada. En las celdas pertenecientes a esa columna se renderizará el componente que contenga la propiedad component.
attrs	Object	Todos	Contendrá los atributos que se le quieran asignar al componente renderizado (component). Por defecto los botones tendrán las propiedades fab y small setteadas en true, esto hará que los mismos tengan forma circular y tamaño pequeño respectivamente. Es posible enviar el atributo style dentro también. El mismo deberá ser enviado como objeto.
Icon	String / Array (icon_row)	fcn_executer fcn_executer_row modal modal_row navigator navigator_row icon_row	Nombre del icono (o de los íconos en caso de utilizar icon_row) que se quiere renderizar dentro del componente (component). El listado de íconos se puede obtener de Íconos.
icon-attrs	Object	fcn_executer modal navigator	Atributos que se aplicarán al icono del botón del comportamiento. Los mismos pueden verse aquí. Por default se aplicara {color: white}
outside	boolean	fcn_executer modal navigator	Por defecto los comportamientos se mostrarán anidados en un menu en la parte superior izquierda de la tabla. Estableciendo outside en true, se mostrará como un botón por fuera del menú de comportamientos
fcn_click	String	fcn_executer fcn_executer_row	Nombre de la función que se quiere ejecutar.
args_fcn_click	Array	fcn_executer fcn_executer_row modal modal_row	Argumentos enviados en la función detallada en fcn_click, o en caso de modal o modal_row en la fn_icl_794256_consulta_componentes. Siempre se enviarán como un arreglo hecho string.
tooltip_text	String	Todos	Texto que aparece cuando se superpone el mouse sobre el componente (component) renderizado.
id_columna	String	fcn_executer fcn_executer_row modal modal_row navigator navigator_row	Nombre de la columna (propiedad del objeto) de los elementos seleccionados (con la propiedad show_select, puede ser uno solo) de los cuales se va a tomar su valor para enviar como argumento de fcn_click (se armará un arreglo junto con args_fcn_click que será enviado como string) en caso de ser tipo fcn_executer, fcn_executer_row, modal o modal_row; o se navegará a la URL detallada en id_resolver reemplazando ## (debe contener ##, en caso de no tenerlo, no se envía) con el siguiente formato valor 1|valor 2|valor 3 en caso de ser tipo navigator o navigator_row.
src	String	image_row	Fuente de la imagen default que se quiere renderizar en caso de que la propiedad (detallada en columna) del item no tenga valor, en caso de tener valor se usa como src. Ejemplo de un posible valor de src: https://example.com/image.jpg
titulo	String	modal modal_row	Título del dialog que se abrirá.
id_resolver	String	modal modal_row navigator navigator_row	id_resolver que se pasará a IrComponentResolver, sirve para identificar desde donde se está consultando a dicha función. Mas detalles en propiedades de ComponenResolver
component_text	String	fcn_executer fcn_executer_row modal modal_row navigator navigator_row	Texto que aparecerá dentro del componente correspondiente al comportamiento.
confirmation	String	fcn_executer fcn_executer_row modal modal_row navigator navigator_row	Texto que aparecerá en un IrDialog el cual aparecerá cuando se hace click sobre el componente de comportamiento. El IrDialog contendrá un botón de cancelar y otro de confirmar. Si se selecciona confirmar se ejecutará la acción correspondiente al comportamiento esperado, en caso contrario se cerrará el IrDialog. En caso de que no se envíe esta propiedad, no aparecerá el IrDialog.
disabled	Boolean	fcn_executer fcn_executer_row modal modal_row navigator navigator_row image_row	Determina si se puede ejecutar la acción del comportamiento al hacer click sobre el mismo. Por default siempre es false.
active	Boolean	Todos	Determina si se activará el comportamiento, es decir, si se envía en true se renderizará el comportamiento con el componente determinado, en cambio, si se envía false se mostrará el valor real del item. Esta propiedad por defecto tiene el valor true, es decir que se renderizará en comportamiento si la misma no se envía.
visible	Boolean	Todos	Determina si se renderizará el comportamiento, en false el mismo no se renderizará. Esta propiedad por defecto tiene el valor true, es decir que se renderizará en comportamiento si la misma no se envía.
is-grouped	Boolean	navigator_row modal_row fcn_executer_row	Determina si el comportamiento de celda se renderizará en una última columna dentro de un menú desplegable.
attached	String	navigator_row modal_row fcn_executer_row	Determina la propiedad (o columna) la cual se va a tomar en cuenta para determinar si el comportamiento (con is-grouped) se renderizará. En caso de que el valor de la celda en la columna indicada (attached) contenga un valor "falso" (false, undefined, null, '', ...), o no exista, entonces el comportamiento no se renderizará. Caso contrario, el comportamiento se renderizará.
falsy-value	undefined	navigator_row modal_row fcn_executer_row	Determina un valor "falso" en específico para la celda correspondiente a la columna attached, es decir, si la celda contiene ese valor en específico, el comportamiento no se renderizará.
colors	Array	chip_row	No es requerido y determina el color que tendrá un IrChip en un comportamiento chip_row según el valor de su celda correspondiente. La estructura de cada elemento debe ser la siguiente: [ { value: 'Activo', color: '#000000' }, { value: 'En espera', color: '#ffffff' } ] En este ejemplo las celdas correspondientes al comportamiento chip_row que contengan el valor igual a algún value del arreglo, tendrá el color determinado en la propiedad color.
position	String	modal modal_row	No es requerido y determina la posición en la cual se ubicará el modal dentro de la pantalla. Por defecto el modal se renderizará en el centro de la pantalla, es decir que valdrá center. Los posibles valores son: center left right fullscreen top bottom
column-mask	String	column_mask	Es requerido y determina la columna que se utilizará para reemplazar los items de la columna definida en la propiedad columna.

Tipos

Nombre	Acción	Estructura
fcn_executer	Genera un botón que al clickearse ejecuta fcn_click enviando como parámetro un arreglo con args_fcn_click y los valores de la columna id_columna de los elementos seleccionados (con la propiedad show_select). Luego actualiza la tabla ejecutando items_fcn nuevamente. Es importante aclarar que previo a la ejecución de esta función, se ejecutará otra consulta. Nombre de la función: `fn_icl_794256_parametros_funciones`. Parámetros: `id_usuario`, `id_resolver`, valores de la propiedad espeficiadad en la propiedad `id_columna` de los items seleccionados y `args_fcn_click`. Luego se ejecutará la función especificada en `fcn_click` con la respuesta de `fn_icl_794256_parametros_funciones` enviada como parámetro (JSON). La respuesta esperada se detalla aquí.	{ type: 'fcn_executer', icon: 'mdi-trash-can', attrs: {color: 'red'}, fcn_click: 'fn_form', args_fcn_click: [], tooltip_text: 'Eliminar filas', id_columna: 'fruta' }
fcn_executer_row	Genera un botón que al clickearse ejecuta fcn_click enviando como parámetro un arreglo con args_fcn_click y el valor de la columna id_columna del elemento seleccionado. Luego actualiza la tabla ejecutando items_fcn nuevamente. Es importante aclarar que previo a la ejecución de esta función, se ejecutará otra consulta. Nombre de la función: `fn_icl_794256_parametros_funciones`. Parámetros: `id_usuario`, `id_resolver`, valor de la propiedad espeficiadad en la propiedad `id_columna` del item seleccionado y `args_fcn_click`. Luego se ejecutará la función especificada en `fcn_click` con la respuesta de `fn_icl_794256_parametros_funciones` enviada como parámetro (JSON). La respuesta esperada se detalla aquí.	{ type: 'fcn_executer_row', columna: 'actions', component: 'v-btn', attrs: {color: 'red'}, icon: 'mdi-trash-can', fcn_click: 'fn_form', args_fcn_click: ['arg1'], tooltip_text: 'Eliminar fila', id_columna: 'fruta', }
modal	Genera un componente que al clickearse abre una ventana modal que dentro tiene un IrComponentResolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por los valores de la columna id_columna de los elementos seleccionados (con la propiedad show_select de la siguiente forma: valor 1|valor 2|valor 3) y se le enviará al IrComponentResolver a través de la propiedad id_resolver. Una vez cerrado el IrDialog se actualiza la tabla ejecutando items_fcn nuevamente. En caso de que el id_resolver contenga la expresión #numero entero# la misma se reemplazará por el valor de la columna id_columna del item con índice igual al indicado entre los ##. En caso de que tal item no exista o que no tenga valor en esa columna se reemplazará por undefined.	{ type: 'modal', icon: 'mdi-plus', attrs: {color: 'blue'}, tooltip_text: 'Agregar entrada', id_columna: 'fruta' titulo:'Modal de prueba', id_resolver:'resolver_modal' }
modal_row	Genera un componente que al clickearse abre una ventana modal que dentro tiene un IrComponentResolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por los valores de la columna id_columna de la fila del comportamiento clickeado y se le enviará al IrComponentResolver a través de la propiedad id_resolver. Una vez cerrado el IrDialog se actualiza la tabla ejecutando items_fcn nuevamente. En caso de que el id_resolver contenga la expresión #numero entero# la misma se reemplazará por el valor de la columna id_columna del item con índice igual al indicado entre los ##. En caso de que tal item no exista o que no tenga valor en esa columna se reemplazará por undefined.	{ type: 'modal_row', columna: 'calorias', component: 'v-btn', attrs: {color: 'blue'}, icon: 'mdi-pencil', tooltip_text: 'Editar fila', id_columna: 'fruta', titulo:'Modal de prueba', id_resolver:'resolver_modal_row' }
navigator	Genera un botón que al clickearse navegará hacia el id_resolver que tenga como valor la propiedad id_resolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por los valores de la columna id_columna de los elementos seleccionados (con la propiedad show_select) de la siguiente forma: valor 1|valor 2|valor 3. Es necesario recalcar que id_resolver se pasará a formato URL, por lo tanto, por ejemplo, los espacios se transformarán a %20. En caso de que el id_resolver contenga la expresión #numero entero# la misma se reemplazará por el valor de la columna id_columna del item con índice igual al indicado entre los ##. En caso de que tal item no exista o que no tenga valor en esa columna se reemplazará por undefined. En caso de que el id_resolver, haciendo los reemplazos de los ## correspondientes, tenga como resultado un valor que sea una URL absoluta (con prefijo http:// o https://), la redirección se hará a dicha URL (fuera del sitio actual) y en la misma pestaña.	{ type: 'navigator', icon: 'mdi-arrow-right', attrs: {color: 'green'}, id_resolver: '/example?nombres_seleccionados=##', tooltip_text: 'navegar', id_columna: 'fruta' }
navigator_row	Genera un componente que al clickearse navegará hacia el id_resolver que tenga como valor la propiedad id_resolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por el valor de la columna id_columna del elemento seleccionado de la siguiente forma: valor 1|valor 2|valor 3. Es necesario recalcar que id_resolver se pasará a formato URL, por lo tanto, por ejemplo, los espacios se transformarán a %20. En caso de que el id_resolver contenga la expresión #numero entero# la misma se reemplazará por el valor de la columna id_columna del item con índice igual al indicado entre los ##. En caso de que tal item no exista o que no tenga valor en esa columna se reemplazará por undefined. En caso de que el id_resolver, haciendo los reemplazos de los ## correspondientes, tenga como resultado un valor que sea una URL absoluta (con prefijo http:// o https://), la redirección se hará a dicha URL (fuera del sitio actual) y en la misma pestaña. En caso de que el componente sea un IrLinkTo, se utilizará el valor de celda como texto del link, o bien podrá enviarse dentro de la propiedad attrs del header la propiedad text del componente. Si contiene ícono, se tomará de los attrs del header o, sino, de la propiedad icon del header.	{ type: 'navigator_row', columna: 'fruta', component: 'v-btn', icon: '', attrs: {color: 'green'}, id_resolver: '/example?nombre_seleccionado=##', tooltip_text: 'navegar', id_columna: 'peso' }
icon_row	Muestra uno o varios íconos, sin funcionalidad, con los atributos que se le pasen en la prop attrs. En caso de enviar un string con el nombre del ícono que se quiere renderizar y el valor de la celda sea un número (o string con número), el ícono se repetirá la cantidad de veces detallada en el valor de la celda. En caso de enviar un array en la propiedad icon se mostrarán los íconos detallados en el array independientemente del valor de la celda. En caso de que el valor de la celda sea un object o un array de objects con value, tooltip_text y attrs, entonces se mostrarán esos íconos, y lo definido en la propiedad icon del comportamiento quedará como default para las celdas que no tengan éstas características. Un ejemplo del valor de la celda sería: { "value": "mdi-car-back", "attrs": { "color": "red" }, "tooltip_text": "Dynamic cell tooltip" }	{ type: 'icon_row', columna: 'grasa', icon: 'mdi-trash-can', attrs: {color: 'green'}, tooltip_text: 'navegar' }
image_row	Muestra una imagen con los atributos que se le pasen en la prop attrs (no es requerida esta propiedad). La misma al ser clickeada se abre en una ventana modal. Utiliza el valor de la propiedad detallada en columna de cada item de la tabla como src (fuente) para renderizar la imagen. En caso de que la propiedad columna de algun item de la tabla no tenga valor, se utiliza src como default. Es importante aclarar que este comportamiento no puede ejecutar acciones como fcn_executer, navigator o modal. Únicamente renderiza imágenes y, si son más de 3, muestra 3 superpuestas y al clickearlas muestra la totalidad de las imágenes.	{ type: 'image_row', columna: 'carbohidratos', attrs: {size: 45}, src: 'https://example.com/image.jpg', tooltip_text: 'navegar' }
chip_row	Muestra un IrChip con los atributos que se le pasen en la prop attrs (no es requerida esta propiedad).	{ type: 'chip_row', columna: 'estado', colors: [ { value: 'Activo', color: '#32a852' }, { value: 'Inactivo', color: '#a84c32' } ], attrs: { "color": "#aeaeae", "outlined": true, "text-color": "#000000", "border-radius": "8px", "text": "Test", }, visible: true, active: true }
column_mask	Reemplaza los valores de las celdas de una columna por los valores de las celdas de otra columna. El cambio es únicamente en la UX. No se modifican los items originales de la tabla.	{ "type": 'column_mask', "columna": 'calorias', "column-mask": 'calorias_bd', "visible": true, "active": true }

Respuesta fcn_executer y fcn_executer_row

Nombre	Descripción
message	mensaje que se mostrará en un IrToast.
color	Color que tendrá el IrToast. Esta propiedad se ignora en caso de que no se envíe la propiedad detallada anteriormente message.
to	Determina la ruta a la cual se va a redirigir.
refresh	Determina si el componente IrDataTable va a volver a renderizarse.
time	Determina el tiempo en milisegundos que el componente IrToast va a estar visible. Por defecto tendrá un valor de 7000.
top	Determina si el componente IrToast va a estar en la parte superior de la pantalla. Por defecto será true.
right	Determina si el componente IrToast va a estar en la parte derecha de la pantalla.
left	Determina si el componente IrToast va a estar en la parte izquierda de la pantalla.
bottom	Determina si el componente IrToast va a estar en la parte inferior de la pantalla.
centered	Determina si el componente IrToast va a estar en el centro de la pantalla.
refreshParent	Determina, en caso de que el IrDataTable se encuentre dentro de un IrDialog, si el componente padre (el que abrió del IrDialog) va a refrescarse.

{
 message: 'Example',
 color: 'example|#cecece|green',
 to: '/example',
 refresh: false,
 time: 7000,
 top: true
}

Múltiples valores por celda

Tanto los comportamientos de celdas como las celdas comúnes soportan múltiples valores en las mismas. En el siguiente ejemplo, uno de los items de la tabla tiene la siguiente estructura con múltiples valores en algunas de sus propiedades:

  {
    "id": 4,
    "fruta": "Mango",
    "calorias": 254,
    "peso": ["704g", "34g"],
    "grasa": 2,
    "actions": "",
    "carbohidratos": [
      "https://blog.ida.cl/wp-content/uploads/sites/5/2020/04/tamano-redes-blog-655x470.png",
      "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg",
      "https://blog.ida.cl/wp-content/uploads/sites/5/2020/04/tamano-redes-blog-655x470.png",
      "https://blog.ida.cl/wp-content/uploads/sites/5/2020/04/tamano-redes-blog-655x470.png",
    ]
  }

En el caso de estar aplicando un comportamiento (por ejemplo image_row) a una columna específica y necesitar tooltips diferentes para cada imagen de cada celda, es necesario enviar un arreglo de objetos detallando el tooltip como se muestra en el siguiente ejemplo:

  {
    "id": 2,
    "fruta": "Pera",
    "calorias": 22,
    "peso": ["73g", "234g"],
    "grasa": "1",
    "carbohidratos": [
      {
        "value": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg",
        "tooltip_text": "tooltip 1"
      },
      {
        "value": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg",
        "tooltip_text": "tooltip 2"
      }
    ]
  }

Ejemplo