Interface ColumnOptions

Hierarchy

  • ColumnOptions

Properties

cellAttrsFunction?: ((node: VirtualTreeNode) => Record<string, unknown>)

Type declaration

    • (node: VirtualTreeNode): Record<string, unknown>
    • A function that can be used to customize the attributes of each cell in this column. If this function is null or returns null, the cell will have the default attributes. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return an object of attributes.

      Example

      cellAttrsFunction: (node) => {
      if (node.rowPosition.data.name === 'John') {
      return { 'data-test': 'my-test' };
      }
      return {};
      }

      Parameters

      Returns Record<string, unknown>

cellClassNamesFunction?: ((node: VirtualTreeNode) => string)

Type declaration

    • (node: VirtualTreeNode): string
    • A function that can be used to customize the class names of each cell in this column. If this function is null or returns null, the cell will have the default class names. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return a string of class names.

      Example

      cellClassNamesFunction: (node) => {
      if (node.rowPosition.data.name === 'John') {
      return 'my-class-name';
      }
      return '';
      }

      Parameters

      Returns string

cellDisabledFunction?: ((node: VirtualTreeNode) => boolean)

Type declaration

    • (node: VirtualTreeNode): boolean
    • A function that can be used to control the enabled flag of each cell in this column. If this function is null or returns null, the cell will be enabled, selectable, and rollovers will work. If this function returns false, the cell will not be selectable, the item renderers will be disabled and it will have no rollovers. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should true or false.

      Parameters

      Returns boolean

cellSelectableFunction?: ((node: CellSelelection) => boolean)

Type declaration

    • (node: CellSelelection): boolean
    • A function that can be used to control the selectable flag of each cell in this column. If this function is null or returns null, the cell will be selectable will work. If this function returns false, the cell will not be selectable, This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should true or false.

      Parameters

      Returns boolean

cellStyleFunction?: ((node: VirtualTreeNode) => Record<string, unknown>)

Type declaration

    • (node: VirtualTreeNode): Record<string, unknown>
    • A function that can be used to customize the style of each cell in this column. If this function is null or returns null, the cell will have the default style. This function should take a VirtualTreeNode object, which has a pointer to the row data ((well) data) as other related information found in the documentation of the VirtualTreeNode interface. This function should return a style object.

      Example

      cellStyleFunction: (node) => {
      if (node.rowPosition.data.name === 'John') {
      return {color: 'red'};
      }
      return {};
      }

      Parameters

      Returns Record<string, unknown>

children?: ColumnOptions[]
dataField: string

The name of the field or property in the data provider item associated with the column. Each DataGridColumn control requires this property and/or the labelFunction property to be set in order to calculate the displayable text for the item renderer. If the dataField and labelFunction properties are set, the data is displayed using the labelFunction and sorted using the dataField. If the property named in the dataField does not exist, the sortCompareFunction must be set for the sort to work correctly. This value of this property is not necessarily the String that is displayed in the column header. This property is used only to access the data in the data provider. For more information, see the headerText property.

dragOptions?: DragOptions
editOptions?: EditOptions
enableCellClickRowSelect?: boolean

Flag to enable selection of a row when a cell within that row is clicked. You may choose to set this to false when you have an explicit selection checkbox in the row. Setting this flag to false will disable the row selection when any cell within this column is clicked.

enableColumnMenu?: boolean

enableColumnMenu is used to enable the column menu for this column. Default value is true.

enableDrag?: boolean

enableDrag is used to enable drag the drag indicator on this column. Default value is true.

enableFocus?: boolean

enableFocus is used to enable focus on this column. Default value is true.

enableHierarchy?: boolean

For grouped datagrids, when a single column represents entities from various nest levels, its nice to visually indent them. Set this parameter to true for such columns If you wish to programatically control the padding, you could do so via the rendererInitialized event on the grid.

Default

true

Property

See

http://www.reactdatagrid.com/examples?example=Grouping

enableMove?: boolean

enableDrag is used to enable drag move on this column. Default value is true.

enableResize?: boolean

enableDrag is used to enable resize on this column. Default value is true.

enableSort?: boolean

Flag that indicates whether the user can click on the header of this column to sort the data provider.

Property

Default

true

excludeFromExcel?: boolean
excludeFromPdf?: boolean
excludeFromSettings?: boolean
filterOptions?: FilterOptions

Options for the header of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/filters

footerOptions?: FooterOptions

Options for the footer of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/footers

format?: "string" | "number" | "boolean" | "date" | "dateTime" | "currency" | ((value: unknown) => string)

Options for the formatting a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/body#formatters

formatterPrecision?: number
headerOptions?: HeaderOptions

Options for the header of a column. For a full explanation of the options, please see the user guide at https://reactdatagrid.com/docs/tutorial-basics/headers

headerText: string
hidden?: boolean
itemRenderer?: ((props: RendererProps) => unknown)

Type declaration

labelFunction?: ((value: unknown, column: ColumnOptions) => string)

Type declaration

    • (value: unknown, column: ColumnOptions): string
    • A function that determines the text to display in this column. By default the column displays the text for the field in the data that matches the column name. However, sometimes you want to display text based on more than one field in the data, or display something that does not have the format that you want. In such a case you specify a callback function using labelFunction.

      For the DataGrid control, the method signature has the following form:

      labelFunction(item:Object, column:ColumnOptions):String

      Where item contains the DataGrid item object, and column specifies the DataGrid column.

      A callback function might concatenate the firstName and lastName fields in the data, or do some custom formatting on a Date, or convert a number for the month into the string for the month.

      Parameters

      Returns string

lockMode?: LockMode

The grid supports the following selection modes:

  1. LOCK_MODE_LEFT
  2. LOCK_MODE_RIGHT
  3. LOCK_MODE_NONE If set to left, the column will be locked to the left and not scroll horizontally. If set to right, the column will be locked to the right, and not scroll horizontally. Please note, column lock modes only make sense if the horizontalScrollMode of the grid is set to "on"
    Please ensure The grid is wide enough to accommodate the left and right locked columns, otherwise the grid will not render correctly. For nested grids, both left and right locked sections are wide enough to accommodate the widest left and right locked columns at each level of the grid.
parent?: ColumnOptions
percentWidth?: number

Please see widthMode for more details.

selectionCheckBoxOptions?: SelectionCheckBoxOptions
sortOptions?: Pick<SortInfo, "sortCompareFunction" | "sortNumeric" | "sortCaseInsensitive">
textAlign?: "right" | "center"
textWidthAdjustment?: number
textWidthMeasurer?: ((text: string) => number)

Type declaration

    • (text: string): number
    • Parameters

      • text: string

      Returns number

uniqueIdentifier: string
variableRowHeightOptions?: VariableRowHeightColumnOptions
width?: number

Please see widthMode for more details.

widthMode?: "percent" | "fixed" | "fitToContent"

The columnWidthMode property on the column specifies how the column widths are applied. This property defaults to "none".

The grid provides a rich mechanism to control column widths. Column widths are a complicated topic because there are a number of scenarios and rules that we need to account for

  • When there is a horizontal scroll (horizontalScrollMode=on default): In this case, the columns are free to (much) take width as they need. Below is how the column widths should handle in this case:
    • When columnWidthMode=none or fixed: The column will basically take the width specified by the width property
    • When columnWidthMode=fitToContent The column will take the width calculated by its contents. The grid identifies the longest string to be displayed in this column, and sets the width of the column to this value.
    • When columnWidthMode=percent. The column will take the percentage of the width specified by the width property of the total grid width.
  • When there is no horizontal scroll (horizontalScrollMode=off ):
    • When columnWidthMode=none: The column will take the width specified by the width property, and adjust for width (see sum of Column Widths exceeds Grid Width below).
    • When columnWidthMode=fixed: The column will take the width specified by the width property, and not adjust for width.
    • When columnWidthMode=fitToContent: The column will take the width calculated by its contents, and adjust for width (see sum of Column Widths exceeds Grid Width below).
    • When columnWidthMode=percent. The column will take the percentage of the width specified by the width property of the total grid width. all fixed and fitToContent columns, on a percentage basis among all columns that have columnWidthMode set to percent. PLEASE NOTE : If you set columnWidthMode='percent', also set percentWidth.

Finally, there are the below calculations once the column widths are allocated:

  • Grid Width exceeds Sum of Column Widths: The situation where the calculated column widths do not add upto the grid with is also handled on basis of the horizontalScrollMode.
    • When there is a horizontal scroll (horizontalScrollMode=on ): Column widths are distributed among all columns that do not have an explicit width set either via percent, or fixed width
    • When there is no horizontal scroll (horizontalScrollMode=off - ): Same as above.
  • Sum of Column Widths exceeds Grid Width: Similarly, The situation where the allocated column widths exceed the width of the grid with is also handled on basis of the horizontalScrollMode.
    • When there is a horizontal scroll (horizontalScrollMode=on or auto): We simply show a scroll bar, and no column widths are changed.
    • When there is no horizontal scroll (horizontalScrollMode=off - ): This excess width is reduced proportionally between columns where among all columns that do not have an explicit width set either via percent, or fixed width.
Left and right locked columns do not need allocation because they dont have horizontal scroll.
Finally, with multi level grids, if the hierarchy's columns width in the top level is smaller than the next level's width (and the horizontal scroll policy of the grid is "on"/default), the horizontal scroller will be calculated only by the top level's width, making some columns in the next level unreachable. The recommendation is to give a large column width to the last top level column, which is large enough so that sum of column widths at top level is larger than the sum of column widths at the bottom level.
Values : none,fixed,percent,fitToContent

Default

auto

See

https://reactdatagrid.com/examples/?example=Column_Width_Mode

Generated using TypeDoc