Columns definition

[Joss Mackison]

Overview

Currently we accept a "columns" option (string[]) against each collection to influence table columns within the list page. This enhancement would add support for a more complete "columns definition", allowing consumers to optimise column behaviour depending on the expected values of field types.

Proposal

The TableView component already supports column configuration props, so this work would largely be surfacing that to consumers.

Usage

collection({
  ...
  columns: {
    defaultSort: { column: 'name', direction: 'ascending' },
    definition: [
      { key: 'name', minWidth: '33%' },
      { key: 'type' },
      { key: 'price', align: 'right', width: 120 },
    ]
  }
})

Considerations

• Concerns around defaultSort behaviour:
  • block the table until data loads, OR
  • re-sort the rows once data loads
• Omit defaultSort from config and always use the slug for initial load. Keep user sort preferences in local storage (and URL?), per collection.
• Width definitions could yield poor experiences for users esp. on small devices. Ensure that TableView supports adequate scroll behaviour.

Spec

type Columns<Key> = {
  /** The default field and direction used to initially sort the data. */
  defaultSort: SortDescriptor<Key>;
  /** Defines which fields to render. */
  definition: Column<Key>[];
};
type Column<Key> = {
  /**
   * The alignment of the column's contents relative to its allotted width.
   * @default 'start'
   */
  align?: 'start' | 'center' | 'end' | 'left' | 'right';
  /** Whether the column allows sorting. */
  allowsSorting?: boolean;
  /** The key of the column. */
  key: Key;
  /** The maximum width of the column. */
  maxWidth?: ColumnWidth;
  /** The minimum width of the column. */
  minWidth?: ColumnWidth;
  /** The width of the column. */
  width?: ColumnWidth;
};
type ColumnWidth = number | `${number}%`;

type SortDescriptor<Key> = {
  /** The key of the column to sort by. */
  column: Key;
  /** The direction to sort by. */
  direction: 'ascending' | 'descending';
}