Allow column options to be defined per column instead of globally

[mootari]

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.

[mootari]

Among the per-column options that may be added in the near future are:

• data acessor for derived columns (https://github.com/observablehq/inputs/issues/83)
• comparator to sort complex values (https://github.com/observablehq/inputs/issues/84)
• header formatter (https://github.com/observablehq/inputs/issues/103)
• potentially: default sort order (https://github.com/observablehq/inputs/issues/114)

[mootari]

I'll have to rethink the proposed replacement of the columns option:

• columns only controls column visibility, defaulting to all available columns.
• Redefining the behavior as described above would mean that users would have to always list all columns - which is of course unacceptable.

[hellonearthis]

How would you add sort ordering. To say, sort by likes and then sort that ordered list by version for example. Would each column could have a sort associated with it as well as a order key to state which column is sorted first and which 2nd...

[mootari]

@hellonearthis This issue is about grouping column-specific options. What you're describing are global options that affect the table as a whole.