office-ui-fabric-react/lib/components/DetailsList/DetailsList.Props.ts.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport { DetailsList } from './DetailsList';\nimport {\n  ISelection,\n  SelectionMode\n} from '../../utilities/selection/index';\nimport {\n  IDragDropEvents,\n  IDragDropContext,\n} from './../../utilities/dragdrop/index';\nimport {\n  IGroup,\n  IGroupRenderProps\n} from '../GroupedList/index';\nimport { IDetailsRowProps } from '../DetailsList/DetailsRow';\nimport { IViewport } from '../../utilities/decorators/withViewport';\n\nexport interface IDetailsList {\n  /**\n   * Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list\n   * still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can\n   * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.\n   */\n  forceUpdate: () => void;\n}\n\nexport interface IDetailsListProps extends React.Props<DetailsList> {\n  /** A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes. */\n  setKey?: string;\n\n  /** The items to render. */\n  items: any[];\n\n  /**\n   * Optional default focused index to set focus to once the items have rendered and the index exists.\n   */\n  initialFocusedIndex?: number;\n\n  /** Optional class name to add to the root element. */\n  className?: string;\n\n  /** Optional grouping instructions. The definition for IGroup can be found under the GroupedList component. */\n  groups?: IGroup[];\n\n  /** Optional override properties to render groups. The definition for IGroupRenderProps can be found under the GroupedList component. */\n  groupProps?: IGroupRenderProps;\n\n  /** Optional selection model to track selection state.  */\n  selection?: ISelection;\n\n  /** Controls how/if the details list manages selection. */\n  selectionMode?: SelectionMode;\n\n  /** Controls how the columns are adjusted. */\n  layoutMode?: DetailsListLayoutMode;\n\n  /**\n   * Controls the visibility of selection check box.\n   * @default CheckboxVisibility.onHover\n   */\n  checkboxVisibility?: CheckboxVisibility;\n\n  /**\n   * Controls the visibility of the details header.\n   * @default true\n   */\n  isHeaderVisible?: boolean;\n\n  /** Given column defitions. If none are provided, default columns will be created based on the item's properties. */\n  columns?: IColumn[];\n\n  /** Controls how the list contrains overflow. */\n  constrainMode?: ConstrainMode;\n\n  /** Event names and corresponding callbacks that will be registered to rendered row elements. */\n  rowElementEventMap?: [{ eventName: string, callback: (context: IDragDropContext, event?: any) => void }];\n\n  /** Callback for when the details list has been updated. Useful for telemetry tracking externally. */\n  onDidUpdate?: (detailsList?: DetailsList) => any;\n\n  /** Callback for when a given row has been mounted. Useful for identifying when a row has been rendered on the page. */\n  onRowDidMount?: (item?: any, index?: number) => void;\n\n  /** Callback for when a given row has been mounted. Useful for identifying when a row has been removed from the page. */\n  onRowWillUnmount?: (item?: any, index?: number) => void;\n\n  /** Callback for when the user clicks on the column header. */\n  onColumnHeaderClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => void;\n\n  /** Callback for when the user asks for a contextual menu (usually via right click) from a column header. */\n  onColumnHeaderContextMenu?: (column?: IColumn, ev?: Event) => void;\n\n  /** Callback for when a given row has been invoked (by pressing enter while it is selected.) */\n  onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;\n\n  /** Callback for when the context menu of an item has been accessed. */\n  onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void;\n\n  /**\n   *  If provided, will allow the caller to override the default row rendering.\n   */\n  onRenderRow?: (props: IDetailsRowProps, defaultRender?: (props: IDetailsRowProps) => JSX.Element) => JSX.Element;\n\n  /**\n   * If provided, will be the \"default\" item column renderer method. This affects cells within the rows; not the rows themselves.\n   * If a column definition provides its own onRender method, that will be used instead of this.\n   */\n  onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;\n\n  /** Map of callback functions related to drag and drop functionality. */\n  dragDropEvents?: IDragDropEvents;\n\n  /** Callback for what to render when the item is missing. */\n  onRenderMissingItem?: (index?: number) => React.ReactNode;\n\n  /** Viewport, provided by the withViewport decorator. */\n  viewport?: IViewport;\n\n  /** Callback for when an item in the list becomes active by clicking anywhere inside the row or navigating to it with keyboard. */\n  onActiveItemChanged?: (item?: any, index?: number, ev?: React.FocusEvent<HTMLElement>) => void;\n\n  /** The aria-label attribute to stamp out on the list header */\n  ariaLabelForListHeader?: string;\n\n  /** The aria-label attribute to stamp out on select all checkbox for the list */\n  ariaLabelForSelectAllCheckbox?: string;\n\n  /** Optional callback to get the aria-label string for a given item. */\n  getRowAriaLabel?: (item: any) => string;\n\n  /** Optional callback to get the item key that will be used in the selection. */\n  getKey?: (item: any, index?: number) => string;\n\n  /** A text summary of the table set via aria-label. */\n  ariaLabel?: string;\n\n  /** Check button aria label for details list. */\n  checkButtonAriaLabel?: string;\n\n  /** Aria label for grid in details list. */\n  ariaLabelForGrid?: string;\n\n  /** Boolean value to indicate if the role application should be applied on details list. Set to false by default */\n  shouldApplyApplicationRole?: boolean;\n}\n\nexport interface IColumn {\n  /**\n   * A unique key for identifying the column.\n   */\n  key: string;\n\n  /**\n   * Name to render on the column header.\n   */\n  name: string;\n\n  /**\n   * The field to pull the text value from for the column. This can be null if a custom\n   * onRender method is provided.\n   */\n  fieldName: string;\n\n  /**\n   * An optional class name to stick on the column cell within each row.\n   */\n  className?: string;\n\n  /**\n   * Minimum width for the column.\n   */\n  minWidth: number;\n\n  /**\n   * Optional accessibility label (aria-label) attribute that will be stamped on to the element.\n   * If none is specified, the arai-label attribute will contain the column name\n   */\n  ariaLabel?: string;\n\n  /**\n   * Optional flag on whether the column is a header for the given row. There should be only one column with\n   * row header set to true.\n   * @default false\n   */\n  isRowHeader?: boolean;\n\n  /**\n   * Maximum width for the column, if stretching is allowed in justified scenarios.\n   */\n  maxWidth?: number;\n\n  /**\n   * Defines how the column's header should render.\n   * @default ColumnActionsMode.clickable */\n  columnActionsMode?: ColumnActionsMode;\n\n  /**\n   * Icon name to show in addition to the text.\n   */\n  iconClassName?: string;\n\n  /**\n   * If specified will allow the column to be collapsed when rendered in justified layout.\n   */\n  isCollapsable?: boolean;\n\n  /**\n   * Determines if the column is currently sorted. Renders a sort arrow in the column header.\n   */\n  isSorted?: boolean;\n\n  /**\n   * Determines if the arrow is pointed down (descending) or up.\n   */\n  isSortedDescending?: boolean;\n\n  /**\n   * Determines if the column can be resized.\n   */\n  isResizable?: boolean;\n\n  /**\n   * Determines if the column can render multi-line text.\n   */\n  isMultiline?: boolean;\n\n  /**\n   * If provided uses this method to render custom cell content, rather than the default text rendering.\n   */\n  onRender?: (item?: any, index?: number, column?: IColumn) => any;\n\n  /**\n   * Determines if the column is filtered, and if so shows a filter icon.\n   */\n  isFiltered?: boolean;\n\n  /**\n   * If provided, will be executed when the user clicks on the column header.\n   */\n  onColumnClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => any;\n\n  /**\n   * If provided, will be executed when the user accesses the contextmenu on a column header.\n   */\n  onColumnContextMenu?: (column?: IColumn, ev?: React.MouseEvent<HTMLElement>) => any;\n\n  /**\n   * If set will show a grouped icon next to the column header name.\n   */\n  isGrouped?: boolean;\n\n  /**\n   * Arbitrary data passthrough which can be used by the caller.\n   */\n  data?: any;\n\n  /**\n   * Internal only value.\n   */\n  calculatedWidth?: number;\n\n  /**\n   * An optional class name to stick on the column cell within each header.\n   */\n  headerClassName?: string;\n}\n\n/**\n * Enum to describe how a particular column header behaves.... This enum is used to\n * to specify the property IColumn:columnActionsMode.\n * If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable\n */\nexport enum ColumnActionsMode {\n  /**\n   * Renders the column header as disabled.\n   */\n  disabled,\n\n  /**\n   * Renders the column header is clickable.\n   */\n  clickable,\n\n  /**\n   * Renders the column header ias clickable and displays the dropdown cheveron.\n   */\n  hasDropdown\n}\n\nexport enum ConstrainMode {\n  /** If specified, lets the content grow which allows the page to manage scrolling. */\n  unconstrained,\n\n  /**\n   * If specified, constrains the list to the given layout space.\n   */\n  horizontalConstrained\n}\n\nexport enum DetailsListLayoutMode {\n  /**\n   * Lets the user resize columns and makes not attempt to fit them.\n   */\n  fixedColumns,\n\n  /**\n   * Manages which columns are visible, tries to size them according to their min/max rules and drops\n   * off columns that can't fit and have isCollapsable set.\n   */\n  justified\n}\n\nexport enum CheckboxVisibility {\n  /**\n   * Visible on hover.\n   */\n  onHover,\n\n  /**\n   * Visible always.\n   */\n  always,\n\n  /**\n   * Hide checkboxes.\n   */\n  hidden\n}\n";