Una idea para una hoja de cálculo receptiva simple | Programar Plus

¿Cómo se hace que una interfaz similar a una hoja de cálculo responda sin el uso de JavaScript? Esta es la pregunta que me he estado haciendo toda la semana mientras trabajaba en un nuevo proyecto y trataba de descubrir cómo hacer la hoja de cálculo más simple posible. Quería evitar el uso de un marco y, en cambio, decidí experimentar con algunas propiedades nuevas para usar nada más que un ligero toque de CSS.

spoilers! Esto es lo que se me ocurrió hasta ahora (ah, y tenga en cuenta que esta demostración actualmente funciona en la última versión de Chrome). Intenta desplazarte un poco:

Consulte Pen A Simple Responsive Spreadsheet – Final de Robin Rendle (@robinrendle) en CodePen.

¿Observa cómo la primera columna se pega a la izquierda y el encabezado se pega a la parte superior de la hoja de cálculo? Esto nos permite escanear muchos datos sin tener que seguir desplazándonos para saber en qué columna o fila estamos; en muchas interfaces como esta es bastante fácil perderse.

Entonces, ¿cómo hice para hacer esto? ¡Saltamos!

Agregar el marcado

Primero, debemos agregar nuestro marcado para la tabla y, solo para asegurarnos de que este ejemplo sea lo más realista posible, agregaremos muchas filas y columnas aquí:

Consulte Pen A Simple Responsive Spreadsheet – 1st by Robin Rendle (@robinrendle) en CodePen.

No está pasando nada realmente complejo. Solo tenemos una vieja mesa normal con un <thead> y un <tbody>, pero envolvemos toda la tabla en el table-wrapper div que explicaré en un momento.

A continuación, agregaremos un estilo básico a ese elemento contenedor para moverlo al centro de la página y también darle un ancho máximo. También tenemos que asegurarnos de que el .table-wrapper tiene el desbordamiento configurado para desplazarse, aunque en tamaños de pantalla más grandes no lo necesitaremos todavía:

body {
  display: flex;
  font-family: -apple-system;
  font-size: 90%;
  color: #333;
  justify-content: center;
}

.table-wrapper {
  max-width: 700px;
  overflow: scroll;
}

Vea Pen A Simple Responsive Spreadsheet – 2nd by Robin Rendle (@robinrendle) en CodePen.

¡Hábil! Ahora podemos agregar estilos para la primera columna de nuestra tabla y el thead así como estilo básico para cada una de las celdas de la tabla:

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
}

Consulte Pen A Simple Responsive Spreadsheet – 3 de Robin Rendle (@robinrendle) en CodePen.

El problema aquí es que ahora hemos creado una tabla bastante inaccesible; aunque podemos desplazarnos por la hoja de cálculo, no podemos leer qué columna o fila está asociada a qué bit de datos. Esto puede conducir a una tabla que es casi completamente ilegible y si tuviéramos que llenar esto con datos reales, sería aún peor:

posición: pegajoso al rescate!

position: sticky es un truco CSS maravillosamente útil con el que he comenzado a experimentar mucho últimamente. Le permite pegar elementos secundarios en sus contenedores principales para que, a medida que se desplaza, el elemento secundario siempre esté visible. Y esto es exactamente lo que necesitamos aquí para la primera columna y el encabezado de nuestro elemento de tabla.

Podemos usar esta función relativamente nueva con CSS de esta manera:

// The heading of our table
th {
  background-color: #eee;
  position: sticky;
  top: -1px;
  z-index: 2;
  
  // The first cell that lives in the top left of our spreadsheet
  &:first-of-type {
    left: 0;
    z-index: 3;
  }
}

// The first column that we want to stick to the left
tbody tr td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  z-index: 1;
}

Estos valores de índice z son importantes aquí porque queremos que el encabezado se superponga a la primera columna de la izquierda que también será pegajosa. ¡Sin embargo! También queremos que la celda vacía en la parte superior izquierda se superponga tanto a nuestro encabezado como a nuestra columna de la izquierda, así:

Consulte Pen A Simple Responsive Spreadsheet – Final de Robin Rendle (@robinrendle) en CodePen.

¡Pero ahí lo tenemos! Una hoja de cálculo receptiva simple donde puede ver tanto el encabezado como la primera columna sin importar dónde se encuentre en la tabla. Aunque, vale la pena señalar que su millaje puede variar. position: sticky tiene un soporte relativamente irregular en este momento, por lo que vale la pena probarlo a fondo antes de comenzar a usarlo. O podría usar algo como Stickybits que actuaría como un polirelleno liviano.

Además, si necesita profundizar en las tablas, hemos creado una guía completa bastante útil para el elemento de tabla.

(Visited 4 times, 1 visits today)