Cómo añadir Tabla con células de cabecera en la fila superior y primera columna usando la tabla Buefy

Me gustaría hacer una mesa usando buefy que se parece a esta.

enter image description here

Pregunta hecha hace 3 años, 4 meses, 27 días - Por coderchampion

3 Respuestas:

  • Creo que el componente de diseño de mesa no se puede ver en el sitio web de docs buefys. Hay three cosas que puedes hacer.

    En primer lugar, puede anular el estilo css del componente de mesa buefy, en segundo lugar, puede añadir un cuerpo y un encabezado dentro de la ranura predeterminada de componentes de mesa buefy, o simplemente puede crear su propio.

    table, td, th {
  border: 1px solid black;
}

th {
  background-color: #ccc;
}

table {
  width: 100%;
  border-collapse: collapse;
}
    
  
    
    
    Monday
    Tuesday
    Wednesday
    Thrusday
    Friday
  
    
  
    
    
      9:00 - 11:00
      Closed
      Open
      Open
      Closed
      Closed
    
    
    
    
      11:00 - 13:00
      Open
      Open
      Closed
      Closed
      Closed
    
    
    
    
      13:00 - 15:00
      Open
      Open
      Closed
      Closed
      Closed
    
    
    
    
      15:00 - 17:00
      Closed
      Closed
      Closed
      Open
      Open

    Respondida el Dec 18, 2020 a las 02:48 - por pixelprodigy50bb

    Votos positivos: 0 | Votos negativos: 0

  • Para crear una tabla con celdas de cabecera en la fila superior y en la primera columna utilizando la librería Buefy, puedes seguir este ejemplo de código:

    html

    En este código, se crea una tabla con la librería Buefy donde se especifica tableData con los datos de la tabla y tableColumns con las columnas de la tabla. Para insertar una celda vacía en la esquina superior izquierda de la tabla (esquina donde se unen las cabeceras de fila y columna), se especifica un objeto en tableColumns con un label vacío y un field vacío.

    Al renderizar la tabla, verás que se ha creado una celda vacía en la esquina superior izquierda de la tabla. Puedes ajustar el estilo de la tabla y las celdas según tus necesidades con las clases y propiedades de Buefy.

    Espero que esta información te sea útil. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 02:49 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Claro, aquí tienes cómo añadir una tabla con celdas de cabecera en la fila superior y la primera columna usando la tabla Buefy:

    html

    En este ejemplo, tableData es un array de objetos que representan los datos de la tabla, y tableColumns es un array de objetos que definen las columnas de la tabla. Cada objeto de columna tiene un campo field que corresponde al nombre de la propiedad del objeto de datos, un label que se muestra como el encabezado de la columna y un width opcional que especifica el ancho de la columna.

    Para añadir celdas de cabecera en la fila superior y la primera columna, puedes utilizar la propiedad sticky en los objetos de columna. Establece sticky: 'top' para fijar una columna en la parte superior y sticky: 'start' para fijarla en el lado izquierdo.

    Aquí tienes un ejemplo actualizado:

    html

    Espero que esto te ayude. Avísame si tienes otras preguntas.

    Respondida el Dec 19, 2020 a las 02:56 - por Gemini

    Votos positivos: 0 | Votos negativos: 0