import FieldColumnTemplate from "@arcgis/core/widgets/FeatureTable/support/FieldColumnTemplate.js";const FieldColumnTemplate = await $arcgis.import("@arcgis/core/widgets/FeatureTable/support/FieldColumnTemplate.js");- Inheritance:
- FieldColumnTemplate→
ColumnTemplateBase→ Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.24
A FieldColumnTemplate formats and defines the structure of a FieldColumn within a FeatureTable widget.
The FieldColumnTemplate is set directly on the table's template or its view model. The FeatureTable's tableTemplate contains a collection of field and/or group column templates.
Example
const fieldColumnTemplate = new FieldColumnTemplate({ fieldName: "full_name", label: "Full name", direction: "asc", // In order to use initialSortPriority, make sure direction is set initialSortPriority: 0 // This field's sort order takes the highest priority.});Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
autoWidth inherited | ||
declaredClass readonly inherited | ||
description inherited | ||
direction inherited | ||
| | ||
editable inherited | ||
fieldName inherited | ||
flexGrow inherited | ||
| | ||
frozen readonly inherited | ||
frozenToEnd readonly inherited | ||
icon inherited | ||
iconText inherited | ||
initialSortPriority inherited | ||
invalid inherited | ||
label inherited | ||
labelTooltipText inherited | ||
menuConfig inherited | ||
required inherited | ||
resizable inherited | ||
| | ||
textAlign inherited | ||
textWrap inherited | ||
timeZone inherited | ||
type readonly | "field" | |
visible inherited | ||
width inherited |
autoWidth
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
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
description
- Since
- ArcGIS Maps SDK for JavaScript 4.31
A string description of the column to give context to what it represents.
direction
- 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. |
domain
- Type
- CodedValueDomain | RangeDomain | null | undefined
The coded value domain or a range domain of the associated field.
editable
- Type
- boolean
Indicates whether the field is editable. Editing permissions can be broken down with the following levels of priority:
- Field - This is derived
from the FeatureLayer or SceneLayer. It takes what is set in the
Field.editable property. This
must always be
truefor editing to be enabled. This can be overridden using a field column template. - Template - The editable permissions on a field can be configured by setting the FieldColumnTemplate.editable property of the FieldColumnTemplate.
- FeatureTable - The FeatureTable.editingEnabled property must be set on the table in order for any type of editing to be enabled.
For example, if table editing is disabled in the widget, i.e. enableEditing is not set,
it is still possible to enable editing for a specific column by setting the
FieldColumnTemplate.editable property. Vice versa
is also true, if table editing is enabled, a field template can be used to disable editing for a specific column.
Ultimately, if the service's field is not editable, it is not possible to override its permissions using one of the options above.
- Default value
- true
fieldName
- Type
- string
The unique field name as defined by the data source.
flexGrow
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Controls the flex-grow property for the column. When set to 0, cell width is fixed.
- Default value
- 1
formatFunction
- Type
- FieldValueFormatFunction | null | undefined
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Custom function for rendering cell content. Accepts a string, number, an HTML element or equivalent node type (e.g. a Calcite component).
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.columnTemplate.formatFunction = ({ column, feature, index, value })=> { const progress = document.createElement("progress"); progress.max = 100; progress.value = value; return progress;}; frozen
- 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
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
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
icon
- Since
- ArcGIS Maps SDK for JavaScript 4.30
The string value indicating the icon displayed in the header cell of the column.
- See also
iconText
- 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 template.
- See also
initialSortPriority
Use this in combination with FeatureTable.multiSortEnabled and direction properties to set sorting functionality on multiple columns. This property indicates the index of the sorted column when compared to other columns, with lower numbers taking a higher priority.
If no sort priority is set, the priority defaults to the most recently-sorted column. This occurs when sorting via the UI, or programmatically by calling FeatureTable.sortColumn(). For example, using the example snippet below, the sort order priority is set for three columns, with "Status" having the least priority. Calling table.sortColumn("Status", "asc") would update the Status column to the highest priority. This would also occur if manually sorting via the column's UI.
Example
const table = new FeatureTable({ layer: featureLayer, multiSortEnabled: true, tableTemplate: { // autocastable to TableTemplate columnTemplates: [{ // autocastable to FieldColumnTemplate type: "field", fieldName: "ObjectId", direction: "asc", initialSortPriority: 1, // This field's sort order takes second-highest priority. }, { type: "field", fieldName: "Name", direction: "asc", initialSortPriority: 0, // This field's sort order takes the highest priority. }, { type: "field", fieldName: "Status", direction: "asc", initialSortPriority: 2 // This field's sort order is prioritized after Name and ObjectId, respectively. }] } container: "tableDiv"}); invalid
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Indicates whether the column is in an invalid state.
- Default value
- false
label
The default label displayed in the column header cell.
labelTooltipText
Text displayed when hovering over the column header label. Defaults to the typical column label when a value is not provided.
menuConfig
- Type
- ColumnTableMenuConfig | null | undefined
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Configuration options for the column menu.
required
- Type
- boolean
Indicates whether a field requires a value.
- Default value
- false
resizable
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Indicates whether the column is resizable.
- Default value
- true
textAlign
- Type
- TextAlign
Aligns the columns cell content horizontally.
- Default value
- "start"
textWrap
- Type
- boolean
Indicates cell content should be wrapped and displayed on multiple lines within the cell.
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
- Since
- ArcGIS Maps SDK for JavaScript 4.31
The time zone of the specific column.
- See also
type
- Type
- "field"
The type of column that the template represents.
This property must be set to field when creating a new FieldColumnTemplate within a TableTemplate.
visible
- Type
- boolean
Indicates whether the column is visible.
- Default value
- true
width
- Since
- ArcGIS Maps SDK for JavaScript 4.30
Default width of the column in pixels.
- Default value
- 200
Methods
fromJSON
- Signature
-
fromJSON (json: any): any
Creates a new instance of this class and initializes it with values from a JSON object
generated from an ArcGIS product. The object passed into the input json
parameter often comes from a response to a query operation in the REST API or a
toJSON()
method from another ArcGIS product. See the Using fromJSON()
topic in the Guide for details and examples of when and how to use this function.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| json | A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects. | |
- Returns
- any
Returns a new instance of this class.
clone
- Signature
-
clone (): this
Creates a deep clone of this object. Any properties that store values by reference will be assigned copies of the referenced values on the cloned instance.
- Returns
- this
A deep clone of the class instance that invoked this method.
toJSON
- Signature
-
toJSON (): any
Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.
- Returns
- any
The ArcGIS portal JSON representation of an instance of this class.