fleet/frontend/components/queries/QueryResultsTable/QueryResultsRow.jsx

import React, { Component } from 'react';
import { isEqual, omit } from 'lodash';

import queryResultInterface from 'interfaces/query_result';

class QueryResultsRow extends Component {
  static propTypes = {
    queryResult: queryResultInterface.isRequired,
  };

  shouldComponentUpdate (nextProps) {
    return !isEqual(this.props.queryResult, nextProps.queryResult);
  }

  render () {
    const { queryResult } = this.props;
    const { host_hostname: hostHostname } = queryResult;
    const queryColumns = omit(queryResult, ['host_hostname']);

    return (
      <tr>
        <td>{hostHostname}</td>
        {Object.keys(queryColumns).map((col) => {
          return <td key={col}>{queryColumns[col]}</td>;
        })}
      </tr>
    );
  }
}

export default QueryResultsRow;