Data grid / foldkit-data-grid

ColumnState

namespace · packages/data-grid/src/columnState.ts:209

const ColumnState = { make }

Its type

interface ColumnState<Id extends string> extends ColumnLayout<Id> {
  readonly widths: ReadonlyArray<{
    readonly column: Id
    readonly width: number
  }>
}

Where each column stands and how wide the resized ones are. Widths list only the columns resized; the rest take their spec's. The grid owns it, and it is plain data, so an application can save it and restore it.

Members

ColumnState.make

function · packages/data-grid/src/columnState.ts:42

make<Row, Specs extends Record<string, ColumnSpec<Row, unknown>>>(
  columns: Columns<Row, Specs>,
): {
  Model: Schema.Struct<{
    readonly start: Schema.$Array<
      Schema.Literals<readonly (keyof Specs & string)[]>
    >
    readonly center: Schema.$Array<
      Schema.Literals<readonly (keyof Specs & string)[]>
    >
    readonly end: Schema.$Array<
      Schema.Literals<readonly (keyof Specs & string)[]>
    >
    readonly hidden: Schema.$Array<
      Schema.Literals<readonly (keyof Specs & string)[]>
    >
    readonly widths: Schema.$Array<
      Schema.Struct<{
        readonly column: Schema.Literals<readonly (keyof Specs & string)[]>
        readonly width: Schema.Number
      }>
    >
  }>
  initial: () => State
  widthOf: (state: State) => (id: Id) => number
  regionOf: (state: State, id: Id) => Region
  resize: (state: State, id: Id, width: number) => State
  hide: (state: State, id: Id) => State
  show: (state: State, id: Id) => State
  move: (state: State, id: Id, region: Region, index: number) => State
  dropAt: (state: State, id: Id, delta: number) => number
  restore: (saved: unknown) => Restored<Id>
}

Column state for one grid's columns: its Schema, which decodes only these columns' ids, and the operations a grid's Messages run. Every operation returns the state it was given when it changes nothing, so a no-op draws nothing.