ONC iQ - UI

DrillDown

icon (id, state, animation, up = 'plus', down = 'minus')

• Updates icon when clicking on a drill down row
• Optional: Set animation to false and link chart to local state (prevent multiple chart animations)

import {DrillDown} from 'onciq-ui'

//...class setup

componentWillMount() {
  this.state = {ids: {}, animation: true}
}

renderRow(items) {
  return items.map(item => {
    return (
      <tr key={item.id}>
        <td><i className={`fa fa-${this.state.ids[item.id] || 'plus'}`}
          onClick={()=> {this.setState(DrillDown.icon(item.id, this.state.ids))}}>
        </i>{item.id}
        </td>
      </tr>
    );
  })
}

//... render a table using renderRow()

row (element, table, items)

• Build content for drill down row

import {DrillDown} from 'onciq-ui'

//...class setup

return items.map(item => {
  //item is an object with some properties to display
  return (
    <tr key={item.id} >
      <td
        onClick={(e) => {DrillDown.row(e, $("#items").DataTable(), item)}}>
        {item.id}
      </td>
    </tr>
  );
})

//... render DataTable with id "items"