Data grid / foldkit-mixins-data-grid

GridInput

interface · packages/mixins-data-grid/src/view.ts:74

interface GridInput<Row, Id extends string, GridMessage, Message> {
  readonly state: {
    readonly focus: {
      readonly current: Option.Option<CellAddress<Id>>
      readonly header: Option.Option<Id>
    }
    readonly viewport: Viewport
    readonly columns: ColumnState<Id>
    readonly selection: {
      readonly rows: RowSelection
      readonly anchor: Option.Option<string>
      readonly cells: Option.Option<{
        readonly anchor: CellAddress<Id>
        readonly focus: CellAddress<Id>
      }>
    }
    readonly editing: Option.Option<{
      readonly address: CellAddress<Id>
      readonly draft: string
      readonly error: Option.Option<string>
    }>
    readonly dragging: Option.Option<{
      readonly column: Id
      readonly delta: number
    }>
    readonly menu: Option.Option<{
      readonly column: Id
      readonly active: number
    }>
    readonly filling: Option.Option<{
      readonly source: {
        readonly anchor: CellAddress<Id>
        readonly focus: CellAddress<Id>
      }
      readonly to: CellAddress<Id>
    }>
  }
  readonly rows: RowModel<Row>
  readonly wrap: (message: GridMessage) => Message
  readonly label: string
  readonly rowHeight: number
  readonly headerHeight: number
  readonly overscan?: {
    readonly rows?: number
    readonly columns?: number
  }
  readonly direction?: Direction
  readonly cell?: (
    column: Id,
    row: Row,
    h: HtmlBuilder<Message>,
  ) => Html | string
  readonly marks?: (address: CellAddress<Id>) => Option.Option<CellMark>
  readonly choiceEditor?: 'list' | 'native'
  readonly words?: GridWords
  readonly status?: RowStatus
  readonly onRetry?: Message
  readonly onMore?: Message
  readonly columnMenu?: boolean
  readonly sort?: {
    readonly [K in Id]?: ColumnSort<Message>
  }
}

What the grid's view reads, and what the application gives it.

Members

GridInput.state

property · packages/mixins-data-grid/src/view.ts:76

readonly state: {
  readonly focus: {
    readonly current: Option.Option<CellAddress<Id>>
    readonly header: Option.Option<Id>
  }
  readonly viewport: Viewport
  readonly columns: ColumnState<Id>
  readonly selection: {
    readonly rows: RowSelection
    readonly anchor: Option.Option<string>
    readonly cells: Option.Option<{
      readonly anchor: CellAddress<Id>
      readonly focus: CellAddress<Id>
    }>
  }
  readonly editing: Option.Option<{
    readonly address: CellAddress<Id>
    readonly draft: string
    readonly error: Option.Option<string>
  }>
  readonly dragging: Option.Option<{
    readonly column: Id
    readonly delta: number
  }>
  readonly menu: Option.Option<{
    readonly column: Id
    readonly active: number
  }>
  readonly filling: Option.Option<{
    readonly source: {
      readonly anchor: CellAddress<Id>
      readonly focus: CellAddress<Id>
    }
    readonly to: CellAddress<Id>
  }>
}

The DataGrid Model as placed in the parent.

GridInput.rows

property · packages/mixins-data-grid/src/view.ts:104

readonly rows: RowModel<Row>

The application's rows, in its order; the view draws them through state.columns.

GridInput.wrap

property · packages/mixins-data-grid/src/view.ts:106

readonly wrap: (message: GridMessage) => Message

Lifts the grid's own Messages into the parent's: the placement's wrapper.

GridInput.label

property · packages/mixins-data-grid/src/view.ts:108

readonly label: string

The grid's accessible name.

GridInput.rowHeight

property · packages/mixins-data-grid/src/view.ts:109

readonly rowHeight: number

GridInput.headerHeight

property · packages/mixins-data-grid/src/view.ts:110

readonly headerHeight: number

GridInput.overscan

property · packages/mixins-data-grid/src/view.ts:111

readonly overscan?: {
  readonly rows?: number
  readonly columns?: number
}

GridInput.direction

property · packages/mixins-data-grid/src/view.ts:112

readonly direction?: Direction

GridInput.cell

property · packages/mixins-data-grid/src/view.ts:114

readonly cell?: (
  column: Id,
  row: Row,
  h: HtmlBuilder<Message>,
) => Html | string

Draws one cell; by default the column's value, as text.

GridInput.marks

property · packages/mixins-data-grid/src/view.ts:116

readonly marks?: (address: CellAddress<Id>) => Option.Option<CellMark>

A cell's mark, if it has one; asked only for the cells drawn.

GridInput.choiceEditor

property · packages/mixins-data-grid/src/view.ts:123

readonly choiceEditor?: 'list' | 'native'

How a choice column is edited: a list the grid draws, styled with the page (list, the default), or the platform's own select (native), whose picker suits a touch screen better. Pass native from a media fact in the Model, such as a coarse pointer; the view reads no media.

GridInput.words

property · packages/mixins-data-grid/src/view.ts:124

readonly words?: GridWords

GridInput.status

property · packages/mixins-data-grid/src/view.ts:129

readonly status?: RowStatus

Where the rows' source stands (GridCrud.status for a Remote page). Default Ready. The grid holds no loading state: the source's owner does.

GridInput.onRetry

property · packages/mixins-data-grid/src/view.ts:131

readonly onRetry?: Message

Asks again after a failure; given, a failed grid shows a button that sends it.

GridInput.onMore

property · packages/mixins-data-grid/src/view.ts:136

readonly onMore?: Message

Loads more rows; given, a grid whose count is not known yet shows a button that sends it. Attach MoreOnScroll to send it as the end comes into view.

GridInput.columnMenu

property · packages/mixins-data-grid/src/view.ts:142

readonly columnMenu?: boolean

A menu button on each header, opening the column's menu: pin it to the start or the end or unpin it, hide it, or show a hidden column. On a focused header Alt+ArrowDown, Shift+F10 or the menu key opens it.

GridInput.sort

property · packages/mixins-data-grid/src/view.ts:144

readonly sort?: {
  readonly [K in Id]?: ColumnSort<Message>
}

The columns that sort, each with its direction and its Message.