Devextreme-reactive: Styling the "parent" rows of a TreeData table

[thehig]

I've created a TreeData table using getCellValue to calculate numeric values and DataTypeProviders to style the cells based on the columns data type.

What I would like is to be able to style the "parent" rows with some bolding or background to make the tree data easier to see, especially when horizontally scrolling. Is this possible in the current implementation?

[MaximKudriavtsev]

Hi,

To achieve custom behavior, we recommend you create a custom plugin. All plugins are based on our React Core components. Follow this guide for more information.
 
Create a custom plugin TreeDataColoring that changes a background color of child rows.
 
First, find how you can change a row's background. For example, you can override a tableRow's template and pass custom styles to its params property.
 
Then, obtain the row's level in the hierarchy. For this, you can use the getTreeRowLevel getter. The CustomTreeData plugin exports this getter.
 
Calculate the row's background color within the tableRow template.
 
See this example.

[thehig]

You sir, are an absolute legend. No chance I would have figured this out myself

[MaximKudriavtsev]

My answer contains a wrong example link. The correct one - https://codesandbox.io/s/0y5nl764w0

[thehig]

Just in case anyone ends up here 'after the fact', here's what I've ended up with:

// https://github.com/DevExpress/devextreme-reactive/issues/1427#issuecomment-424287892
import React from 'react';
import cn from 'classnames';
import { TemplateConnector } from '@devexpress/dx-react-core';
import { Table } from '@devexpress/dx-react-grid-material-ui';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  child: {},
  even: {},
  odd: {
    backgroundColor: theme.palette.grey[100]
  },
  // Putting parent last here makes it 'override' in the case of an odd-parent
  parent: {
    fontWeight: theme.typography.fontWeightLight
  }
});

const tableRowComponent = ({ className, classes, row, ...restProps }) => (
  <TemplateConnector>
    {({ getRowId, getTreeRowLevel }) => {
      const isParent = getTreeRowLevel(row) === 0;
      const isEven = getRowId(row) % 2 === 0;
      const newClassName = cn(className, {
        [classes.parent]: isParent,
        [classes.child]: !isParent,
        [classes.even]: isEven,
        [classes.odd]: !isEven
      });

      return <Table.Row {...restProps} className={newClassName} />;
    }}
  </TemplateConnector>
);

export default withStyles(styles)(tableRowComponent);

Note: To get the font weight to work I had to override the Material UI default for Table Body

theme.overrides = {
  MuiTableCell: {
    body: {
      ...theme.typography.body1,
      fontWeight: 'inherit'
    }
};

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.