the most beautiful react code I have seen, thanks to mobx.

Model.jsx

class AppState {

  @observable raw_ticket_data;

  @observable sort_by = 'Owner';

  @observable group_by = 'Queue';

  constructor(raw_ticket_data) {
    this.raw_ticket_data = raw_ticket_data;
  }

  @computed get tickets () {
    return groupBy(sortBy(this.raw_ticket_data, this.sort_by), this.group_by);
  }

  @observable want_cols = [ 'Queue', 'Owner', 'Subject' ];

  @computed get all_cols () {
    return concat([ this.group_by ], this.body_cols)
  }

  @computed get body_cols () {
    return without(this.want_cols, this.group_by);
  }

}

View.jsx

const TicketList = observer( ({ state }) => {
  const body_cols = state.body_cols;
  const row_body = (t) => map(body_cols, (c) => <td>{ t[c] }</td>);
  const turl = (t) => (
    'http://tools.shadowcat.co.uk/tickets/Ticket/Display.html?id='
      + t.id.match(/[0-9]+/)[0]
  );
  const tickets = mapValues(state.tickets, (gtickets) => (
    map(gtickets, (t) => (
      { ...t, Subject: <a href={ turl(t) }>{ t.Subject }</a> }
    ))
  ));
  const row_group = (group) => {
    const gtickets = tickets[group];
    const [ first, ...rest ] = gtickets;
    return concat(
      [ <tr>
          <td rowSpan={ gtickets.length } style={{'vertical-align': 'top'}}>
            { group }
          </td>
          { row_body(first) }
        </tr>
      ],
      map(rest, (t) => <tr>{ row_body(t) }</tr>),
    );
  };
  return (
    <table>
      <thead><tr>{ map(state.all_cols, (c) => <td>{c}</td>) }</tr></thead>
      <tbody>{ map(sortBy(keys(tickets)), row_group) }</tbody>
    </table>
  );
});