@arcgis/core/widgets/FeatureTable/support/ColumnTemplateBase.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { ClonableMixin } from "../../../core/Clonable.js";
import type { JSONSupport } from "../../../core/JSONSupport.js";
import type { TimeZone } from "../../../time/types.js";
import type { TextAlign, ColumnTableMenuConfig, Direction } from "../Grid/types.js";
import type { FormatFunction } from "./types.js";

export interface ColumnTemplateBaseProperties extends Partial<Pick<ColumnTemplateBase, "autoWidth" | "description" | "direction" | "fieldName" | "flexGrow" | "formatFunction" | "icon" | "iconText" | "initialSortPriority" | "invalid" | "label" | "labelTooltipText" | "menuConfig" | "resizable" | "sortable" | "textAlign" | "textWrap" | "timeZone" | "visible" | "width">> {}

/**
 * The base class for all column templates used by the [TableTemplate](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/TableTemplate/) within the [FeatureTable](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/) widget.
 *
 * `ColumnTemplateBase` is a base class which has no constructor.
 *
 * @since 4.24
 * @see [FeatureTable](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/)
 * @see [FeatureTableViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/FeatureTableViewModel/)
 * @see [Column](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/Grid/Column/)
 * @see [ColumnTemplate](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplate/)
 * @see [FieldColumnTemplate](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/FieldColumnTemplate/)
 * @see [GroupColumnTemplate](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/GroupColumnTemplate/)
 */
export default abstract class ColumnTemplateBase extends ColumnTemplateBaseSuperclass {
  /**
   * Indicates if the column width will automatically adjust to account for large content.
   * The column ignores the current [width](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplateBase/#width) property when `autoWidth` is `true`.
   *
   * @default false
   * @since 4.30
   */
  accessor autoWidth: boolean;
  /**
   * A string description of the column to give context to what it represents.
   *
   * @since 4.31
   * @see [FieldColumn.description](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/FieldColumn/#description)
   * @see [FieldColumn.effectiveDescription](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/FieldColumn/#effectiveDescription)
   */
  accessor description: string | null | undefined;
  /**
   * 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](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplateBase/#initialSortPriority) and [FeatureTable.multiSortEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/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 [FeatureTable.multiSortEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#multiSortEnabled)
   * @see [initialSortPriority](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplateBase/#initialSortPriority)
   */
  accessor direction: Direction;
  /** The unique field name as defined by the data source. */
  accessor fieldName: string;
  /**
   * Controls the [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) property for the column. When set to `0`, cell width is fixed.
   *
   * @default 1
   * @since 4.30
   */
  accessor flexGrow: number;
  /**
   * 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](https://developers.arcgis.com/calcite-design-system/components/)). 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. 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.
   *
   * @since 4.30
   * @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;
   * };
   */
  accessor formatFunction: FormatFunction | null | undefined;
  /**
   * 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](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#columns), or next to other frozen columns.
   *
   * @default false
   */
  get frozen(): 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](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#columns), or next to other columns with `frozenToEnd` set to `true`.
   *
   * @default false
   * @since 4.30
   */
  get frozenToEnd(): boolean;
  /**
   * The string value indicating the [icon](https://developers.arcgis.com/calcite-design-system/icons/) displayed in the header cell of the column.
   *
   * @since 4.30
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  accessor icon: Icon["icon"] | null | undefined;
  /**
   * The string value displayed when hovering over the associated [icon](https://developers.arcgis.com/calcite-design-system/icons/) 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.
   *
   * @since 4.32
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  accessor iconText: string | null | undefined;
  /**
   * Use this in combination with [FeatureTable.multiSortEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#multiSortEnabled) and [direction](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplateBase/#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()](https://developers.arcgis.com/javascript/latest/references/core/widgets/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.
   *
   * @see [FeatureTable.multiSortEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#multiSortEnabled)
   * @see [direction](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/support/ColumnTemplateBase/#direction)
   * @see [FeatureTable.sortColumn()](https://developers.arcgis.com/javascript/latest/references/core/widgets/FeatureTable/#sortColumn)
   * @see [Sample - FeatureTable widget](https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable/)
   * @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"
   * });
   */
  accessor initialSortPriority: number | null | undefined;
  /**
   * Indicates whether the column is in an invalid state.
   *
   * @default false
   * @since 4.30
   */
  accessor invalid: boolean;
  /** The default label displayed in the column header cell. */
  accessor label: string | null | undefined;
  /**
   * Text displayed when hovering over the column header label.
   * Defaults to the typical column label when a value is not provided.
   */
  accessor labelTooltipText: string | null | undefined;
  /**
   * Configuration options for the column menu.
   *
   * @since 4.30
   */
  accessor menuConfig: ColumnTableMenuConfig | null | undefined;
  /**
   * Indicates whether the column is resizable.
   *
   * @default true
   * @since 4.30
   */
  accessor resizable: boolean;
  /**
   * Indicates whether the column can be sorted. Columns based on custom content will not be sortable.
   *
   * @default false
   */
  accessor sortable: boolean;
  /**
   * Aligns the columns cell content horizontally.
   *
   * @default "start"
   */
  accessor textAlign: TextAlign;
  /**
   * 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 false
   */
  accessor textWrap: boolean;
  /**
   * The time zone of the specific column.
   *
   * @since 4.31
   * @see [MapView.timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone)
   */
  accessor timeZone: TimeZone | null | undefined;
  /** The type of column that the template represents. */
  get type(): "column" | "field" | "group" | "attachment" | "relationship";
  /**
   * Indicates whether the column is visible.
   *
   * @default true
   */
  accessor visible: boolean;
  /**
   * Default width of the column in pixels.
   *
   * @default 200
   * @since 4.30
   */
  accessor width: number | string;
}
declare const ColumnTemplateBaseSuperclass: typeof JSONSupport & typeof ClonableMixin