Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Columns definition #1250

Open
jossmac opened this issue Jul 30, 2024 · 0 comments · May be fixed by #1249
Open

Columns definition #1250

jossmac opened this issue Jul 30, 2024 · 0 comments · May be fixed by #1249
Assignees
@jossmac

Comments

@jossmac
Copy link
Member

jossmac commented Jul 30, 2024

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';
}
@jossmac jossmac self-assigned this Jul 30, 2024
@jossmac jossmac linked a pull request Jul 30, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jossmac jossmac

Labels
None yet
Projects
Keystatic Roadmap
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Collection view: table columns definition Thinkmill/keystatic
1 participant
@jossmac