The flex-grid component may contain the following child components: wijmo.react.grid.detail.FlexGridDetail , wijmo.react.grid.filter.FlexGridFilter , wijmo.react.grid.immutable.ImmutabilityProvider , wijmo.react.grid.FlexGridColumn , wijmo.react.grid.FlexGridColumnGroup and wijmo.react.grid.FlexGridCellTemplate.

The component supports all properties and events of the pure JavaScript wijmo.grid.FlexGrid control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The example below shows how to instantiate and initialize a wijmo.grid.FlexGrid control in JSX:

<Wj.FlexGrid
  autoGenerateColumns={ false }
  columns={[
    { binding: 'name', header: 'Name' },
    { binding: 'sales', header: 'Sales', format: 'c0' },
    { binding: 'expenses', header: 'Expenses', format: 'c0' },
    { binding: 'active', header: 'Active' },
    { binding: 'date', header: 'Date' }
  ]}
  itemsSource={ this.state.data } />

The code sets the autoGenerateColumns property to false, then sets the columns property, and finally sets the itemsSource property. This order is important, it prevents the grid from automatically generating the columns.

The FlexGridCellTemplate component defines a template for a certain cell type in FlexGrid. The template element must contain a cellType property that specifies the {@link wijmo.react.grid.CellTemplateType}. Depending on the template's cell type, the FlexGridCellTemplate element must be a child of either wijmo.react.grid.FlexGrid or wijmo.react.grid.FlexGridColumn components.

Column-specific cell templates must be contained in FlexGridColumn components, and cells that are not column-specific (like row header or top left cells) must be contained in the FlexGrid component.

The content of cells is defined using the template render prop, which receives a render function that should return a virtual element tree representing the cell content. The function has the context parameter where the data context of each certain cell is passed. This is an object with the col, row, and item properties, which refer to the Column, Row, and Row.dataItem objects pertaining to the cell.

For cell types like Group and CellEdit, an additional value context property containing an unformatted cell value is provided.

For example, here is a FlexGrid control with templates for row header cells and, regular and column header cells of the Country column:

<!-- component.html -->
<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeader"
      template={ (context) => context.row.index + 1 } />
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '...' } />

  <wjGrid.FlexGridColumn header="Country" binding="country">
    <wjGrid.FlexGridCellTemplate
          cellType="ColumnHeader"
          template={ (context) => {
              return <React.Fragment>
                  <img src="resources/globe.png" />
                  {context.col.header}
              </React.Fragment>
              }
          }
     />
    <wjGrid.FlexGridCellTemplate
          cellType="Cell"
          template={ (context) => {
              return <React.Fragment>
                 <img src={`resources/${context.item.country}.png`} />
                 {context.item.country}
              </React.Fragment>
          } }
      />
  </wjGrid.FlexGridColumn>
  <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn>
</wjGrid.FlexGrid>

The FlexGridCellTemplate directive supports the following properties:

cellType

The CellTemplateType value defining the type of cell to which the template is applied.

autoSizeRows

Indicates whether the cell template will increase grid's default row height to accomodate cells content. Defaults to true.

cellOverflow

Defines the style.overflow property value for cells.

forceFullEdit

For cell edit templates, indicates whether cell editing forcibly starts in full edit mode, regardless of how the editing was initiated. In full edit mode pressing cursor keys don't finish editing. Defaults to true.

The cellType attribute takes any of the following enumerated values:

Cell

Defines a regular (data) cell template. Must be a child of the wijmo.react.grid.FlexGridColumn component. For example, this cell template shows flags in the cells of Country column:

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
      cellType="Cell"
      template={ (context) => {
          return <React.Fragment>
             <img src={`resources/${context.item.country}.png`} />
             {context.item.country}
          </React.Fragment>
      }
   }
  />
</wjGrid.FlexGridColumn>

If Group template is not provided for a hierarchical FlexGrid (that is, one with the childItemsPath property specified), non-header cells in group rows of this Column also use this template.

CellEdit

Defines a template for a cell in edit mode. Must be a child of the wijmo.react.grid.FlexGridColumn component. This cell type has an additional context.value property. It contains the original cell value before editing, and the updated value after editing.

For example, here is a template that uses the Wijmo InputNumber control as an editor for the "Sales" column:

<wjGrid.FlexGridColumn header="Sales" binding="sales">
  <wjGrid.FlexGridCellTemplate
      cellType="CellEdit"
      template={ (context) => {
           return <wjInput.InputNumber
               step={1}
               value={context.value}
               valueChanged={(inpNum: wjcInput.InputNumber) =>
                   context.value = inpNum.value
               } />
           }
      }
  />
</wjGrid.FlexGridColumn>

ColumnHeader

Defines a template for a column header cell. Must be a child of the wijmo.react.grid.FlexGridColumn component. For example, this template adds an image to the header of the "Country" column:

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
        cellType="ColumnHeader"
        template={ (context) => {
            return <React.Fragment>
                <img src="resources/globe.png" />
                {context.col.header}
            </React.Fragment>
            }
        }
  />
</wjGrid.FlexGridColumn>

RowHeader

Defines a template for a row header cell. Must be a child of the wijmo.react.grid.FlexGrid component. For example, this template shows row indices in the row headers:

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeader"
      template={ (context) => context.row.index + 1 } />
</wjGrid.FlexGrid>

Note that this template is applied to a row header cell, even if it is in a row that is in edit mode. In order to provide an edit-mode version of a row header cell with alternate content, define the RowHeaderEdit template.

RowHeaderEdit

Defines a template for a row header cell in edit mode. Must be a child of the wijmo.react.grid.FlexGrid component. For example, this template shows dots in the header of rows being edited:

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '...' } />
</wjGrid.FlexGrid>

Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where the RowHeader template applies:

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '\u270e\ufe0e' } />
</wjGrid.FlexGrid>

TopLeft

Defines a template for the top left cell. Must be a child of the wijmo.react.grid.FlexGrid component. For example, this template shows a down/right glyph in the top-left cell of the grid:

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="TopLeft"
      template={ (context) => {
          return <span class="wj-glyph-down-right"></span>
      } }
  />
</wjGrid.FlexGrid>

GroupHeader

Defines a template for a group header cell in a GroupRow. Must be a child of the wijmo.react.grid.FlexGridColumn component.

The context.row property contains an instance of the GroupRow class. If the grouping comes from CollectionView, the context.item property references the CollectionViewGroup object.

For example, this template uses a checkbox element as an expand/collapse toggle:

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
      cellType="GroupHeader"
      template={ (context) => {
         return <React.Fragment>
           <input type="checkbox"
               checked={context.row.isCollapsed}
               onChange={e =>
                   context.row.isCollapsed = e.target.checked as boolean
               } />
           {context.item.name} ({context.item.items.length} items)
         </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>

Group

Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the wijmo.react.grid.FlexGridColumn component. This cell type has an additional context.value property. In cases where columns have the aggregate property specified, it contains the unformatted aggregate value.

For example, this template shows aggregate's value and kind for group row cells in the "Sales" column:

<wjGrid.FlexGridColumn header="Sales" binding="sales" aggregate="Avg">
  <wjGrid.FlexGridCellTemplate
      cellType="Group"
      template={ (context) => {
         return <React.Fragment>
           Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
         </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>

ColumnFooter

Defines a template for a regular cell in a columnFooters panel. Must be a child of the wijmo.react.grid.FlexGridColumn component. This cell type provides an additional context.value property available for binding that contains an aggregated cell value.

For example, this template shows aggregate's value and kind for a footer cell in the "Sales" column:

<wjGrid.FlexGridColumn header="Sales" binding="sales" aggregate="Avg">
  <wjGrid.FlexGridCellTemplate
      cellType="ColumnFooter"
      template={ (context) => {
         return <React.Fragment>
           Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
         </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>

BottomLeft

Defines a template for the bottom left cells (at the intersection of the row header and column footer cells). Must be a child of the wijmo.react.grid.FlexGrid component. For example, this template shows a sigma glyph in the bottom-left cell of the grid:

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="BottomLeft"
      template={(context) => <span>&#931;</span>} />
</wjGrid.FlexGrid>

NewCellTemplate

Defines a cell in a new row template. Must be a child of the wijmo.react.grid.FlexGridColumn component. Note that the context.item property is undefined for this type of a cell. For example, this cell template shows a placeholder in the Date column's cell in the "new row" item:

<wjGrid.FlexGridColumn header="Date" binding="date">
  <wjGrid.FlexGridCellTemplate
      cellType="NewCellTemplate"
      template={ (context) => 'Enter a date here' } />
</wjGrid.FlexGridColumn>

The flex-grid-column component should be contained in a wijmo.react.grid.FlexGrid component.

The flex-grid-column component may contain a wijmo.react.grid.FlexGridCellTemplate child component.

The component supports all properties and events of the pure JavaScript wijmo.grid.Column class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-grid-column-group component should be contained in one of the following components: wijmo.react.grid.FlexGrid or wijmo.react.grid.FlexGridColumnGroup.

The flex-grid-column-group component may contain the following child components: wijmo.react.grid.FlexGridColumnGroup and wijmo.react.grid.FlexGridCellTemplate.

The component supports all properties and events of the pure JavaScript wijmo.grid.ColumnGroup class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.