DevExtreme React Grid - Fixed Columns and Customization Enhancements (v1.8.0)

Version 1.8.0 of the DevExtreme Reactive controls is now available! Here is an overview of the new features for the React Grid:

Fixed Columns

The biggest new feature in the React Grid is Fixed Columns. As you would expect, this feature enables you to set up columns so that they “stick” to the left and right edges of the grid, staying in place when the horizontal scrolling position changes. Fixed Columns work smoothly in conjunction with other functionality (for instance Banded Columns or Virtual Scrolling) and it is easy to set up using the TableFixedColumns plugin:

<Grid>
  ...
  <TableFixedColumns
    leftColumns={[TableSelection.COLUMN_TYPE, 'region']}
    rightColumns={['amount']}
  />
</Grid>

Documentation and samples are available here.

New visual customization components

Two new component customization properties have been added to the TableHeaderRow plugin. The sortLabelComponent renders the sort label,

A demo is available here (Custom Sort Label).

The property groupButtonComponent allows you to supply a custom component for the group button that shows next the column header if you set showGroupingControls.

For the TableFilterRow, the new customization property toggleButtonComponent has been introduced. This component renders the button next to a filter entry field, where the end user can select a filter type from a menu.

Your feedback is valuable!

As always, we appreciate any comments left on this post or sent to us via the Support Center or the GitHub Repository. To provide quick feedback, please submit your replies to this small survey:

Free DevExpress Products – Get Your Copy Today