Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Allow column options to be defined per column instead of globally

Abierto
  • ¿Algo no está bien?
#116 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
42/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
frontend

Línea de trabajo

Start at the Table input implementation and inspect how the columns, width, format, and align options are currently handled. Update the option handling to support per-column objects while preserving array columns and global-option precedence, then verify the behavior against the examples and suggested rules in this issue.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

question

The Table input presently supports four column related options:

  1. columns, indicating which columns should be displayed, and in which order
  2. width, defining either a global width or per-column widths (in object form)
  3. format, per-column formatters in object form
  4. align, per-column text alignment in object form

It is reasonable to expect that more options will be added in the future, requiring column definitions to be spread across multiple global options.

Suggested solution

Support per-column options objects. The example below has been taken from this notebook and expands the columns option definitions via a custom helper function.

Example:

  const time = {
    width: relTime ? '8em' : '15em',
    format: v => {
      const d = new Date(v).toLocaleString('en-US');
      return html`<span title="${relTime ? d : timeAgo(v)}">${relTime ? timeAgo(v) : d}`;
    }
  };

  const columns = {
    'title': {
      format: (v, i, {[i]: d}) => html`<img height="25" style="display:inline-block;vertical-align:middle;margin-right:.5em" src="https://static.observableusercontent.com/thumbnail/${d.thumbnail}.jpg"><a href="/@${d.owner.login}/${d.slug}" style="font-weight:bold">${DOM.text(v)}`,
    },
    'update_time': time,
    'publish_time': time,
    'likes': {width: '3em', format: v => v || ''},
    'comment_count': {width: '6em', format: v => v || ''},
    'version': {width: '4em', format: v => v},
    'fork_of': {width: '3em', format: v => v ? '✔' : '', align: 'center'},
  };

Suggested Implementation

  1. For the Table option columns, assume an object of per-column options indexed by column names, where the order of property keys defines the column order (as shown in the example above).
  2. If columns is defined as an array, expand each item into an empty options object, as defined in 1.
  3. If specified, merge the global options width, format, and align into the existing options objects, taking precedence over already defined values.
Lenguaje dominante
JavaScript
Estrellas
173
Forks
40
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de observablehq/inputs

Todos los issues de observablehq/inputs

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.