DevExtreme - React Grid - UI & API Enhancements (v19.2)

As you may already know, our most recent update includes column sizing support for the React Grid and scrolling enhancements for our Virtual Table plugin.

Column Sizing

You can now specify column widths using the following CSS units: auto, px, %, em, rem, vw, vh, vmin, vmax. Here is the documentation for the width property. The TableColumnResizing plugin also supports these units, and users can resize columns with CSS widths at runtime (if resizing is enabled).

You can change the mode used for column resizing by setting resizingMode on TableColumnResizing. The default is widget mode, where columns can be resized without limits and the overall layout is contained by the grid widget. In nextColumn mode, a change to the width of one column also influences the column to the right. Please see this page for demos which illustrate the two modes.

Note that you can only use px to specify column widths for the Virtual Table. Due to the way the grid is rendered for the Virtual Table, we can’t calculate the widths of columns for relative CSS units like em, %, auto and others.

Virtual Table Enhancements

The Virtual Table now supports banded columns using the TableBandHeader plugin. This guide page demonstrates the setup require for banded columns.

Scroll-To-Row

We added an API that enables you to scroll the Virtual Table to a specific row. It is necessary to use a React Ref to call the scrollToRow function. Here’s a code sample:

const MyComponent = () => {
  const virtualTableRef = React.useRef();

  // This function can be called from an event handler.
  const scrollToRow = rowId => {
    virtualTableRef.current.scrollToRow(rowId);
  };

  return (
    <Grid rows={rows} columns={columns} getRowId={getRowId}>
      <VirtualTable ref={virtualTableRef} />
    </Grid>
  );
};

In addition to specific row IDs, you can pass the static values VirtualTable.TOP_POSITION and VirtualTable.BOTTOM_POSITION to scrollToRow.

Click this link for a demo that scrolls to newly inserted rows after a Save operation.

Note that you can’t use scrollToRow with row ID values at this time if you implement lazy loading with VirtualTableState. We will add this functionality in the future.

Top Row Tracking

We implemented the event onTopRowChange for the Virtual Table. You can use it to track the ID of the top row currently visible in the table.

<Grid rows={rows} columns={columns} getRowId={getRowId}>
  <VirtualTable onTopRowChange={ ... } />
</Grid>

Your Feedback Counts

Please let us know your thoughts about the new features. Follow this link to our GitHub repository, where you can take part in discussions or submit issues.