1771 Technologies Logo

Core Grid Types

ColumnDefinition<T>

Represents a core type for defining columns in Graphite Grid, influencing almost all aspects of grid behavior. The only mandatory property is id, with numerous optional properties to customize column behavior.

Type parameters

Type parameterValue
Tunknown

Properties

  • Name
    aggregatable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Indicates if the column is aggregatable, used by external components interfacing with the grid.

  • Name
    aggregation?
    Type
    null | BuiltInFunctions | ColumnMeasure<T>
    Description

    Specifies the aggregation function for the column, accepting built-in functions or a custom column measure.

  • Name
    autosizeCalc?
    Type
    (p: CellParamsUsingRow<T>) => number
    Description

    Defines a custom function for autosizing the column, returning the calculated width in pixels for a cell.

  • Name
    autosizeHeaderCalc?
    Type
    (p: HeaderParams<T>) => number
    Description

    Defines a custom function for autosizing the column header, returning the calculated width in pixels.

  • Name
    cellCanvasRenderer?
    Type
    CellCanvasRendererDefinition<T>
    Description

    Defines a custom canvas renderer for drawing cells when GraphiteGridCanvas is used for display.

  • Name
    cellRenderer?
    Type
    (params: CellRendererParams<T>) => ReactNode
    Description

    Specifies a custom component for rendering cells within the column, required to return a valid ReactNode.

  • Name
    cellTheme?
    Type
    CellThemeOverride | (params) => CellThemeOverride | None
    Description

    Specifies the theme for cells within the column, overriding base cell theme values.

  • Name
    editable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Determines if cells within the column are editable, either directly as a boolean or through a function. Editable cells render an input element when edited, with customization available through editableCellRenderer.

  • Name
    editableCellRenderer?
    Type
    (params: EditableCellRendererParams<T>) => Element | None
    Description

    Specifies a custom renderer for editable cells, used when a cell is being edited.

  • Name
    field?
    Type
    string | number | (params) => unknown
    Description

    Determines the cell value based on row data, specified as a property path, array index, or function.

  • Name
    fieldFormatter?
    Type
    (params: CellRendererParams<T>) => string
    Description

    Formats the cell value, accepting a function that takes the calculated field value and returns a formatted string.

  • Name
    filterable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Indicates if the column is filterable, used by external components interfacing with the grid.

  • Name
    flashColor?
    Type
    string
    Description

    Specifies the color used for a cell flash animation.

  • Name
    flashDurationMs?
    Type
    number
    Description

    Specifies the duration in milliseconds for a cell flash animation to fade away.

  • Name
    flashOnChange?
    Type
    boolean
    Description

    Determines if a cell should visually respond to value changes by flashing.

  • Name
    floatingCellRenderer?
    Type
    (params: HeaderParams<T>) => ReactNode
    Description

    Specifies a custom React component for the floating cell of the header, used when floating rows are enabled.

  • Name
    freeWidthRatio?
    Type
    number
    Description

    Determines the proportion of free space the column should occupy when the total width of all visible columns is less than the viewport width.

  • Name
    groupId?
    Type
    string[]
    Description

    Specifies a path for grouping columns, which Graphite Grid joins to determine the column group.

  • Name
    groupVisibility?
    Type
    "always-visible" | "visible-when-closed" | "visible-when-open"
    Description

    Controls column visibility based on the state of the column group:

    • "always-visible": Column remains visible regardless of group state.
    • "visible-when-closed": Column only visible when the group is collapsed.
    • "visible-when-open": Column only visible when the group is expanded (default setting).
  • Name
    headerClassName?
    Type
    string | (params) => string
    Description

    Adds additional CSS classes to the column header, specified directly or through a function. Functions are invoked each time the column is displayed.

  • Name
    headerLabel?
    Type
    string | (params) => string
    Description

    Specifies the header label for the column, either directly or through a function returning a string. Functions are invoked for each display and various grid calculations, such as autosizing.

  • Name
    headerMenuRenderer?
    Type
    (params: HeaderParams<T>) => ReactNode
    Description

    Specifies a component for a header menu (popover), useful for interactive elements related to a column.

  • Name
    headerMenuTriggerRenderer?
    Type
    (params: HeaderParams<T>) => ReactNode
    Description

    Customizes the button to trigger the header menu popover, overriding the default provided by Graphite Grid.

  • Name
    headerRenderer?
    Type
    (params: HeaderParams<T>) => ReactNode
    Description

    Specifies a custom header renderer, accepting a React Component and returning a valid ReactNode.

  • Name
    headerTheme?
    Type
    HeaderThemeOverride | (params) => HeaderThemeOverride
    Description

    Applies a specific theme to the column header, overriding base theme values. Accepts either a partial theme or a function returning a partial theme.

  • Name
    headerTooltipPlacement?
    Type
    Placement
    Description

    Determines the placement of the header tooltip, ensuring visibility within viewport bounds.

  • Name
    headerTooltipRenderer?
    Type
    (params: HeaderParams<T>) => ReactNode
    Description

    Specifies a component for the header tooltip, displayed when the header is hovered.

  • Name
    hidable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Indicates if the column is hidable, used by external components interfacing with the grid.

  • Name
    hidden?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Determines if the column is visible, either directly as a boolean or through a function returning a boolean. Hidden columns are not displayed but can still be used for pivots, sorts, and filters.

  • Name
    id
    Type
    string
    Description

    Assigns a unique id for the column definition

  • Name
    inFilterKey?
    Type
    string | number | (params) => string
    Description

    Specifies a key for filtering rows based on column data, necessary for inFilter operations.

  • Name
    maxWidth?
    Type
    number
    Description

    Specifies the maximum allowable width for the column

  • Name
    measure?
    Type
    null | BuiltInFunctions | ColumnMeasure<T>
    Description

    Specifies the measure function for the column, used when the column's id is part of the grid's measure model.

  • Name
    minWidth?
    Type
    number
    Description

    Specifies the minimum allowable width for the column

  • Name
    moveable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Determines if the column is movable, either directly as a boolean or through a function returning a boolean.

  • Name
    onCellClick?
    Type
    (p: CellClickEvent<T>) => void
    Description

    Triggers when a cell is clicked.

  • Name
    onCellEdit?
    Type
    (p: OnCellEditParams<T>) => void
    Description

    Triggers at the conclusion of a successful cell edit, allowing changes to cell values in the row data.

  • Name
    onCellKeyDown?
    Type
    (p: CellKeyboardEvent<T>) => void
    Description

    Triggers when a key is pressed down on a cell.

  • Name
    onCellKeyUp?
    Type
    (p: CellKeyboardEvent<T>) => void
    Description

    Triggers when a key is released on a cell.

  • Name
    onCellPointerDown?
    Type
    (p: CellPointerEvent<T>) => void
    Description

    Triggers when the pointer is down on a cell.

  • Name
    onCellPointerUp?
    Type
    (p: CellPointerEvent<T>) => void
    Description

    Triggers when the pointer is up on a cell.

  • Name
    onHeaderClick?
    Type
    (p: HeaderClickEvent<T>) => void
    Description

    Triggers an event when the column header is clicked.

  • Name
    onHeaderKeyDown?
    Type
    (p: HeaderKeyboardEvent<T>) => void
    Description

    Triggers an event when a key is pressed down on the column header.

  • Name
    onHeaderKeyUp?
    Type
    (p: HeaderKeyboardEvent<T>) => void
    Description

    Triggers an event when a key is released on the column header.

  • Name
    onHeaderPointerCancel?
    Type
    (p: HeaderPointerEvent<T>) => void
    Description

    Triggers an event when the pointer is cancelled on the column header.

  • Name
    onHeaderPointerDown?
    Type
    (p: HeaderPointerEvent<T>) => void
    Description

    Triggers an event when the pointer is down on the column header.

  • Name
    onHeaderPointerMove?
    Type
    (p: HeaderPointerEvent<T>) => void
    Description

    Triggers an event when the pointer moves over the column header.

  • Name
    onHeaderPointerUp?
    Type
    (p: HeaderPointerEvent<T>) => void
    Description

    Triggers an event when the pointer is up on the column header.

  • Name
    pinnable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Indicates if the column is pinnable, used by external components interfacing with the grid.

  • Name
    pinned?
    Type
    ColumnPin
    Description

    Determines the pin state of the column, affecting its visibility relative to the scrolling position.

  • Name
    pivotColumnKey?
    Type
    string | number | (params) => string
    Description

    Specifies a key for column pivoting, similar to rowPivotKey, used for grouping columns during pivot operations.

  • Name
    quickSearchKey?
    Type
    string | number | (params) => string
    Description

    Specifies a key for quick searching within the column, used when filtering rows based on user search input.

  • Name
    resizable?
    Type
    BooleanOrBooleanCalc<T>
    Description

    Determines if the column is resizable, either directly as a boolean or through a function returning a boolean.

  • Name
    rowPivotKey?
    Type
    string | number | (params) => string
    Description

    Specifies a key for row pivoting, based on the column's data, specified as a property path, array index, or function.

  • Name
    sortComparator?
    Type
    "string" | "number" | (params) => number
    Description

    Defines a comparator for sorting cells within this column, making the column sortable. Accepts built-in comparators for strings and numbers or a custom function.

  • Name
    sortCycle?
    Type
    (null | "desc" | "asc")[]
    Description

    Specifies the sort cycle for the column, determining the order of sort direction transitions.

  • Name
    width?
    Type
    number
    Description

    Specifies the default width of the column.