<Datatable
      url="/activity/ajax"
      order={[[1, "desc"]]}
      staticFilterParameters={{
        referenceType:  this.props.referenceType,
        referenceId:    this.props.referenceId,
        usersOnly:      `${ !!this.props.usersOnly }`,
      }}
    >
      <Column
        title=""
        data="avatarImgUrl"
        orderable={false}
        RenderComponent={({ data }) => <img alt="image" className="img-circle" src={data} style={{
          width:   48,
          height:  48,
        }} />}
      />

      {/**
        * A bit of a cheat. The render is a complex layout with multiple pieces
        * of data, but we only need to be able to order on timestamp. Simple
        * solution is use timestamp as the primary column data and handle the
        * rest in the render function
        */}
      <Column
        title=""
        data="timestamp"
        RenderComponent={({ row }) => <span>
          <small className="pull-right">{row.occurredAgo}</small>
          <strong>{row.userName}</strong>{" "}
          {row.summary}{" "}

          {do{ if (this.props.includeReferences) {
            if (row.referenceTypeSingular) {
              if(row.referenceDetails) {
                ["for ", row.referenceTypeSingular, " ", <a href={row.referenceDetails}>{row.referenceLabel}</a>]
              } else {
                ["for ", row.referenceLabel]
              }
            }
          }}}
          <br />

          <small className="text-muted">{dateUtils.shortFormat(new Date(row.timestamp))}</small>

          {do{ if (row.details) {
            <div className="well">{React.nl2br(row.details)}</div>
          }}}
        </span>}
      />

      {this.props.children}
    </Datatable>