require(["esri/widgets/FeatureTable/Grid/Column"], (Column) => { /* code goes here */ });
import Column from "@arcgis/core/widgets/FeatureTable/Grid/Column.js";
esri/widgets/FeatureTable/Grid/Column
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.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
Indicates if the column width will automatically adjust to account for large content. | Column | ||
The name of the class. | Accessor | ||
Controls the sort order of the column. | Column | ||
The sanitized label string safe for display in the header cell. | Column | ||
The unique field name as defined by the data source. | Column | ||
Controls the flex-grow property for the column. | Column | ||
Custom function for rendering cell content that is called when the column is rendered in the table. | Column | ||
Indicates if the the column is frozen in place at the beginning of the table. | Column | ||
Indicates if the column is frozen in place at the end of the table. | Column | ||
The string value indicating the icon displayed in the header cell of the column. | Column | ||
Indicates the initial sort priority of the column when first rendered. | Column | ||
Indicates whether the column is in an invalid state. | Column | ||
The default label displayed in the column header cell. | Column | ||
The element representing the field column's menu. | Column | ||
Configuration options for the column's menu. | Column | ||
Indicates whether the Column's menu is currently open. | Column | ||
Indicates whether the Column's menu will be displayed. | Column | ||
Indicates whether the column is resizable. | Column | ||
Indicates whether the column is sortable. | Column | ||
Aligns the columns cell content horizontally. | Column | ||
Indicates cell content should be wrapped and displayed on multiple lines within the cell. | Column | ||
The storage IANA time zone of the column. | Column | ||
The visible elements of the column's associated FeatureTable. | Column | ||
Width of the column in pixels. | Column |
Property Details
-
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. Possible Values:"asc" |"desc"
-
fieldName
fieldName Stringreadonly
-
The unique field name as defined by the data source.
-
formatFunction
formatFunction FormatFunctionreadonly
-
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 isundefined
, 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; };
-
initialSortPriority
initialSortPriority Numberreadonly
-
Indicates the initial sort priority of the column when first rendered.
-
invalid
invalid Boolean
-
Indicates whether the column is in an invalid state.
- Default Value:undefined
-
label
label String
-
The default label displayed in the column header cell.
-
menu
menu HTMLElementreadonly
-
The element representing the field column's menu.
-
menuConfig
menuConfig ColumnTableMenuConfigreadonly
-
Configuration options for the column's menu.
-
menuIsOpen
menuIsOpen Booleanreadonly
-
Indicates whether the Column's menu is currently open.
-
menuIsVisible
menuIsVisible Booleanreadonly
-
Indicates whether the Column's menu will be displayed.
-
resizable
resizable Booleanreadonly
-
Indicates whether the column is resizable.
- Default Value:true
-
sortable
sortable Boolean
-
Indicates whether the column is sortable.
- Default Value:false
-
textAlign
textAlign String
-
Aligns the columns cell content horizontally.
Possible Values:"start" |"center" |"end"
- Default Value:"start"
-
textWrap
textWrap 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
timeZone Stringreadonly
-
The storage IANA time zone of the column.
-
visibleElements
visibleElements VisibleElements
-
The visible elements of the column's associated FeatureTable.
-
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 to0
.- Default Value:200
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
Convenience method for closing the column menu. | Column | ||
Emits an event on the instance. | Column | ||
Indicates whether there is an event listener on the instance that matches the provided event name. | Column | ||
Returns true if a named group of handles exist. | Accessor | ||
Registers an event handler on the instance. | Column | ||
Convenience method for opening the column menu. | Column | ||
Removes a group of handles owned by the object. | Accessor | ||
Convenience method for sorting the current column. | Column |
Method Details
-
Inherited from Accessor
-
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); this.addHandles(handle); // Destroy the object this.destroy();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
-
Convenience method for closing the column menu.
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from Accessor -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns true
if a named group of handles exist.Example// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
on
on(type, listener){Object}
-
Registers an event handler on the instance. Call this method to hook an event with a listener.
ParametersReturnsType Description Object Returns an event handler with a remove()
method that should be called to stop listening for the event(s).Property Type Description remove Function When called, removes the listener from the event. Exampleview.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint); });
-
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.
-
Inherited from Accessor
-
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
Convenience method for sorting the current column. It has no effect if column sorting is disabled.
- See also
Type Definitions
-
- Properties
-
disabled Boolean
Indicates whether the menu is disabled. Default value is
false
.items TableMenuItemConfig[]The menu items within the table menu.
open BooleanIndicates whether the menu is open. Default value is
false
.icon StringThe string value indicating the icon displayed in the header cell of the column.
selectionMode StringThe selection mode of the menu items.
Possible Values:"none"|"single"|"multiple"
-
FormatFunction
FormatFunction(params){String |Number |HTMLElement |null}
-
Custom function for rendering cell content. Accepts a string, number, an HTML element or equivalent node type (e.g. a Calcite component).
ParametersSpecificationparams ObjectAn object containing information about the associated row and feature.
ReturnsType Description String | Number | HTMLElement | null Formatted content to be displayed in the cell.