es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Desplazamiento para un fragmento de tabla de gt en Flexdashboard o Shiny.

14 Jul, 2023 Programación

Tengo el siguiente panel de control:

title: "Sin título"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill

“`{r setup, include=FALSE}
library(flexdashboard)
library(gt)
library(dplyr)
library(tidyr)

<pre><code><br /># Pestaña 1

## Columna

### Gráfico A

“`{r}
mtcars %>%
gt()

enter image description here

Pero no puedo ver toda la tabla generada por gt porque no puedo desplazarme por ella. Así que intenté agregar un fragmento de código CSS:

{css}
.chart-stage {
overflow: auto;
}

Pero no puedo lograr lo que quiero, que es agregar una barra de desplazamiento para ver toda la tabla. Cualquier ayuda será muy apreciada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar una barra de desplazamiento a la tabla generada por gt(), necesitas envolverla dentro de un elemento div con una altura fija y establecer su propiedad de desbordamiento en auto. Aquí está el código modificado:

    “`{r setup, include=FALSE}
    library(flexdashboard)
    library(gt)
    library(dplyr)
    library(tidyr)

    agregar estilos para el contenedor de la tabla

    tags$head(tags$style(“#my-table-container {
    height: 400px;
    overflow: auto;
    }”))


    ```{r}
# envolver la tabla dentro de un elemento div con un id único
div(id = "my-table-container", gt(mtcars))

    Esto creará un contenedor de tabla con una altura fija de 400px y una barra de desplazamiento que te permitirá ver todo el contenido de la tabla. Puedes ajustar la altura según tus necesidades.

    Ten en cuenta que agregamos los estilos CSS dentro de la función tags$head() para incluirlos en la sección de encabezado HTML del cuadro de mando. Esta es la forma recomendada de agregar estilos personalizados en flexdashboard.

Comments are closed.