Row height (or margin between rows)

[GABuryan]

Hi, thanks for interest component. But I have a problem. Default row height = 26px. VirtualList uses this value for calculation. Сan I change row height? Tried in css-file add margin between rows. cp-react_tree-table_row {margin-bottom:5px} But this margin not included in the calculation height of virtuaList and scrolling wrong. What are the options to change row height or add margin between rows? Thanks, good luck.

[constantin-p]

Hi,

The height property can be set for each row by providing a height property (ref: TreeNode.height)

E.g.:

const DATA: Array<TreeNode> = [
  {
    data: { name: 'Company I', expenses: '105,000', employees: '22', contact: 'Makenzie Higgs' },
    children: [
      { 
        data: { name: 'Department 1', expenses: '75,000', employees: '18', contact: 'Florence Carter' },
        height: 64 // this sets the height of the row corresponding to "Department 1" at 64px
      },
    ],
    height: 40 // this sets the height of the row corresponding to "Company I" at 40px
  }
];

If you want to apply margins between rows, you can either use a wrapper element for each cell renderer and apply margins to it or apply padding to the .cp_tree-table_row class as seen in this JSFiddle: