Get value from DOM element and set to another after that using React.js

Which one of lifecycle steps i can use to get width of column flexible table to set fixed headers like div's. For example:

var dataTable = this.refs.table;
    if (dataTable !== undefined){
        this.headers = [];
        var cells = dataTable.rows[0].cells;
        for (var i = 0; i < cells.length; i++){
            this.headers.push(
                <div style = {{width: cells[i].offsetWidth}} key = {i}>
                    {this.props.DB.activeSchema.fields[i].name}
                </div>
            );
        }

    }

....

render: function() {
 return(
 <div>
   {this.headers}
   <table class='some-fixed-table'>
      ...
   </table>
 </div>

 )

}

This is easy way of realisation, using almost pure js:

$('document').ready(function (){

  var fields = [
    'First',
    'Second',
    'Third'
  ];

  var cells = document.getElementById('table').rows[0].cells;

  for (var i = 0; i < cells.length; i++){

    var container = document.getElementById('tableHeader');
    var header = document.createElement('div');

    header.innerHTML = fields[i];
    header.style.width = cells[i].offsetWidth + 'px';  
    container.append(header);
  };
});