constantin-p / cp-react-tree-table

A fast, efficient tree table component for ReactJS.
https://constantin.software/cp-react-tree-table
MIT License
94 stars 27 forks source link

Scroll to specific node Highlighting #20

Closed praveennetcity closed 2 years ago

praveennetcity commented 5 years ago

I have implemented a search functionality, by using scroll to specific node option by the below example https://jsfiddle.net/constantin_p/bksfxe61/11/?utm_source=website&utm_medium=embed&utm_campaign=bksfxe61

is there any parameter/option for highlighting the specific node (row) in the table when using scroll to specific node.

constantin-p commented 2 years ago

The library defers the job of rendering cells to the consumer code - you can provide a custom flag property in the tree data and use it in the cell renderer to dictate whether they should apply style/layout changes to highlight the corresponding row.

const MOCK_DATA = [
  ...
  {
    data: { name: 'Company I', expenses: '105,000' },
    children: [
      { 
        data: { name: 'Department 1', expenses: '75,000', isHighlighted: true },
      },
      ...
    ]
  },
  ...
];
<TreeTable
  value={treeValue}
  onChange={this.handleOnChange}>

  <TreeTable.Column
    renderCell={(row) => <span className={row.data.isHighlighted ? "highlight" : ""}>{row.data.name}</span>}
    renderHeaderCell={() => <span>Name</span>}/>
  ...
</TreeTable>