Personalizar el ancho de columna en cuadrícula de datos

Este tutorial muestra cómo modificar el ancho de la última columna en una cuadrícula de datos.

Requisitos previos: para seguir los pasos de este tutorial, crea una tabla de datos. Asegúrate de que la última columna de la tabla tenga un contenido de más de cinco o seis palabras.

1. Añade una actividad Crear tabla de datos en tu flujo de trabajo.

2. Abre el asistente Crear tabla de datos y añade las columnas deseadas para tu tabla.

   Nota:

   Asegúrate de que las columnas no tengan espacios ni caracteres especiales, ya que más tarde utilizarás estos nombres para vincular las columnas en el formulario a través de Nombres de propiedad.

3. Guarda la tabla de datos en una variable. En este ejemplo, puedes nombrarlo dataTable.

   

4. Añade una cuadrícula de datos a tu formulario y utiliza el nombre de la variable de la tabla de datos (dataTable) como nombre de propiedad del componente.

5. Añade componentes a la cuadrícula de datos, según las columnas y sus valores en la tabla de datos. Los nombres de propiedad de estos componentes son los nombres exactos de las columnas de la tabla de datos.

   Para este ejemplo, añade tres componentes de Campo de texto . Utiliza los siguientes nombres de propiedad para los componentes: column1, column2 y column3.

6. En el panel Propiedades del formulario, introduce el siguiente código en el campo CSS personalizado :

   .mygrid tbody>tr>:nth-child(1){ 
   width: 25%;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

   Nota:

   El elemento nth-child representa una columna en el componente de cuadrícula.

7. Edita el componente Cuadrícula de datos . En la pestaña Visualización , en CSS personalizadointroduce la clase CSS mygrid . Guarda el componente y el formulario. Esto da como resultado una tercera columna más ancha, donde el contenido es más largo que aproximadamente cinco o seis palabras.