Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Allow column options to be defined per column instead of globally

Aperta
  • Qualcosa non va?
#116 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
42/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
JavaScript
Stelle
173
Fork
40
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di observablehq/inputs

Tutte le issue di observablehq/inputs

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.