Column | References | ArcGIS Maps SDK for JavaScript

import Column from "@arcgis/core/widgets/FeatureTable/Grid/Column.js";

Inheritance:: Column→Accessor

Subclasses:: ActionColumn, AttachmentsColumn, EditorColumn, RelationshipColumn, GroupColumn

Since: ArcGIS Maps SDK for JavaScript 4.30

The Column class works with the FeatureTable and provides much of the underlying logic for column behavior. Column and its subclasses, ie. FieldColumn, GroupColumn, ActionColumn, AttachmentsColumn, and RelationshipColumn, contain information about the current table state after it has been rendered. This includes the column's header, cell content, and any associated menu items.

This class should be used for observing potential changes. Any configuration and changes to the columns should be handled via the TableTemplate and the ColumnTemplate class.

See also

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`ColumnProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`autoWidth`	`boolean`
`declaredClass` readonly inherited	`string`	Accessor
`description`	`string \| null \| undefined`
`direction`	`Direction`
`effectiveDescription` readonly	`string \| null \| undefined`
`effectiveLabel` readonly	`string`
`fieldName` readonly	`string`
`flexGrow`	`number`
`formatFunction` readonly	`FormatFunction \| null \| undefined`
`frozen` readonly	`boolean`
`frozenToEnd` readonly	`boolean`
`hidden`	`boolean`
`icon`	`Icon["icon"] \| null \| undefined`
`iconText`	`string \| null \| undefined`
`initialSortPriority` readonly	`number \| null \| undefined`
`invalid`	`boolean`
`label`	`string \| null \| undefined`
`labelTooltipText`	`string \| null \| undefined`
`menu` readonly	`HTMLElement`
`menuConfig` readonly	`ColumnTableMenuConfig \| null \| undefined`
`menuIsOpen` readonly	`boolean`
`menuIsVisible` readonly	`boolean`
`resizable` readonly	`boolean`
`sortable`	`boolean`
`tableTimeZone` readonly	`TimeZone \| null \| undefined`
`textAlign`	`TextAlign`
`textWrap`	`boolean`
`timeZone`	`TimeZone \| null \| undefined`
`visibleElements`	`VisibleElements \| null \| undefined`
`width`	`number \| string`

autoWidth

Property

Type: boolean

Indicates if the column width will automatically adjust to account for large content. The column ignores the current width property when autoWidth is true.

Default value: false

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

description

Property

Type: string | null | undefined

Contains information describing the purpose of each column.

direction

Property

Type: Direction

Controls the sort order of the column. This property will only be honored on one column in the FeatureTable widget. If direction is specified on more than one column in the same FeatureTable, it will only be honored on the column with the highest index.

This is used in combination with the initialSortPriority and FeatureTable.multiSortEnabled properties to set sorting functionality for multiple columns.

Possible Value	Description
asc	Sorts the column in ascending order.
desc	Sorts the column in descending order.
null	No sort is applied to the column.

See also

effectiveDescription

readonly Property

Type: string | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.31

The sanitized description string, describing the purpose of each column.

effectiveLabel

readonly Property

Type: string

The sanitized label string safe for display in the header cell. Defaults to using fieldName if a label is not defined on the column.

fieldName

readonly Property

Type: string

The unique field name as defined by the data source.

flexGrow

Property

Type: number

Controls the flex-grow property for the column. When set to 0, cell width is fixed.

Default value: 1

formatFunction

readonly Property

Type: FormatFunction | null | undefined

Custom function for rendering cell content that is called when the column is rendered in the table. The function should return the formatted content to display within a table's cell. This can be a string, number, an HTML element, or equivalent node type (e.g. a Calcite component). If the content is an HTML element, it is appended to the root element. If the content is a string or number, it is set as the innerHTML of the root element. If the content is null, the root element is cleared. If the content is undefined, the root element is not modified. This property is useful when you want to customize the cell content. For example, you can use this property to create a custom cell renderer that displays a progress bar in the cell. The progress bar can be used to show the progress of a task.

Example

// The following example demonstrates how to use the formatFunction property to create a custom cell renderer that displays a progress bar in the cell. The progress bar can be used to show the progress of a task.
column.formatFunction = ({ column, feature, index, value })=> {
  const progress = document.createElement("progress");
  progress.max = 100;
  progress.value = value;
  return progress;
};

frozen

readonly Property

Type: boolean

Indicates if the the column is frozen in place at the beginning of the table. Column must be first in the FeatureTable's column's, or next to other frozen columns.

Default value: false

frozenToEnd

readonly Property

Type: boolean

Indicates if the column is frozen in place at the end of the table. Column must be last in the FeatureTable's column's, or next to other columns with frozenToEnd set to true.

Default value: false

hidden

Property

Type: boolean

Indicates whether the column is visible.

Default value: false

icon

Property

Type: Icon["icon"] | null | undefined

The string value indicating the icon displayed in the header cell of the column.

See also

Calcite Icon Search

iconText

Property

Type: string | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.32

The string value displayed when hovering over the associated icon displayed in the header cell of the column. When a value is not provied, the column label is displayed instead. A value for 'icon' must also be set on the column.

See also

Calcite Icon Search

initialSortPriority

readonly Property

Type: number | null | undefined

Indicates the initial sort priority of the column when first rendered.

invalid

autocast Property

Type: boolean

Indicates whether the column is in an invalid state.

label

Property

Type: string | null | undefined

The default label displayed in the column header cell.

labelTooltipText

Property

Type: string | null | undefined

Text displayed when hovering over the column header label. Defaults to the typical column label when a value is not provided.

readonly Property

Type: HTMLElement

The element representing the field column's menu.

menuConfig

readonly Property

Type: ColumnTableMenuConfig | null | undefined

Configuration options for the column's menu.

FeatureTable.tableTemplate.

menuIsOpen

readonly Property

Type: boolean

Indicates whether the column's menu is currently open.

menuIsVisible

readonly Property

Type: boolean

Indicates whether the Column's menu will be displayed.

resizable

readonly Property

Type: boolean

Indicates whether the column is resizable.

Default value: true

sortable

Property

Type: boolean

Indicates whether the column is sortable.

Default value: false

tableTimeZone

readonly Property

Type: TimeZone | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.31

The FeatureTable.timeZone of the parent table widget.

textAlign

Property

Type: TextAlign

Aligns the columns cell content horizontally.

Default value: "start"

textWrap

Property

Type: boolean

Indicates cell content should be wrapped and displayed on multiple lines within the cell. Warning: this causes rows to expand when tall content is visible in the viewport. Scrolling tall cells into the viewport may cause the table to visually jump depending on the height of the expanding rows.

Default value: false

timeZone

Property

Type: TimeZone | null | undefined

The storage IANA time zone of the column.

See also

visibleElements

Property

Type: VisibleElements | null | undefined

The visible elements of the column's associated FeatureTable.

width

Property

Type: number | string

Width of the column in pixels. If providing value as a string, the string must include "px" suffix. This value is only honored when there are enough columns to fill the viewport, or flexGrow has been set to 0.

Default value: 200

Methods

Method	Signature	Class
`closeMenu`	`closeMenu(): void`
`openMenu`	`openMenu(): void`
`sort`	`sort(): void`

closeMenu

Method

Signature: closeMenu (): void

Convenience method for closing the column menu.

See also

Returns: void

openMenu

Method

Signature: openMenu (): void

Convenience method for opening the column menu. This has no effect if the menu is not visible or has no menu items. It follows the direction pattern of ascending, to descending, then no sort order.

See also

Returns: void

sort

Method

Signature: sort (): void

Convenience method for sorting the current column. It has no effect if the column is not sortable.

See also

initialSortPriority

Returns: void