Datatables with three levels, nested datatables, synchronized column widths, and editor integration

This is a nested table with shared headers, a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with the details, with additional child rows for field-based enrichment. The datatables editor integration is commented out since a license is a needed, but it works in my local install. The next step is adding editing to the pattern row, and buttons to add new rows

by Christopher Austin

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-8">
    <input id="search-keywords" type="text" name="keywords"
                       placeholder="Keywords, separated by spaces" class="form-control" 
                       style="width: 100%" data-toggle="tooltip" />
    </div>
  <div class="col-sm-1">
        <button id="search-submit" class="btn btn-primary" type="submit" data-load-text="<i class='fa fa-spinner fa-spin'></i>"><i class="fa fa-search"></i></button>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <table id="messages" class="table table-hover display compact" cellspacing="0" width="100%" style="table-layout: fixed">
      <thead>
      <tr>
        <th>ID</th>
        <th>Group</th>
        <th>Key</th>
        <th>Message</th>
        <th>Namespace</th>
        <th>Category</th>
        <th>Type</th>
        <th>Action</th>
        <th>Object</th>
        <th>Context</th>
        <th>Status</th>
        <th>Reason</th>

      </tr>
      </thead>
    </table>
  </div>
</div>


<table id="width-table" class="table compact row-border order-column"  cellspacing="0" width="100%">
  <thead>
      <tr>
        <th>ID</th>
        <th>Group</th>
        <th>Key</th>
        <th>Namespace</th>
        <th>Category</th>
        <th>Type</th>
        <th>Action</th>
        <th>Object</th>
        <th>Context</th>
        <th>Status</th>
        <th>Reason</th>
      </tr>
  </thead>
</table>

CSS

tr.messageRow            { background-color: #eeeeee}
    td.groupCell             { background-color: #CCCCCC}
    td.keyCell               { background-color: #CCCCCC}
    tr.classification-row    { background-color: #FFFFFF}
    td.pattern-label         { color: #888888; padding-left:  5px}
    td.pattern-text          { font-family: Consolas,Courier}
    td.classification-label  { color: #999999; padding-left: 10px}
    td.field-condition-label { color: #999999; padding-left: 15px}
    .classification-table > tbody > tr > td {
      text-overflow: ellipsis; white-space: nowrap; overflow: hidden
    }
    #messages input {
       padding-top: 8px;
    }

JavaScript

var dataSet = [
    {
      "id": 9973,
      "vendorCategory": "Security-Auditing",
      "key": "4776",
      "message": "The domain controller attempted to validate the credentials for an account.\n\nAuthentication Package: %1\nLogon Account: %2\nSource Workstation: %3\nError Code: %4",
      "patterns": [
        {
          "id": 5237,
          "idx": 1,
          "category": "access",
          "type": "user",
          "action": "login",
          "status": "",
          "pattern": "(?<detail>The domain controller attempted to validate the credentials for an account)\\. Authentication Package: MICROSOFT_AUTHENTICATION_PACKAGE_V1_0 (?:Logon Account: (?<user>.+?)|Logon Account:) Source Workstation: (?:(?<source>.*?) )?Error Code: (?<result>0x[0-9A-Fa-f]+)",
          fieldConditions: [
          	{ id:1,
              field:"result",
              match:"0x0",
              status:"success"
            },
          	{ id:1,
              field:"result",
              match:"0x01",
              status:"failed"
            },
          ]
          
        }
      ],
      "DT_RowId": "row_1"
    },
    {
      "id": 9974,
      "vendorCategory": "Security-Auditing",
      "key": "4776",
      "message": "A Kerberos authentication ticket (TGT) was requested. Account Information: Account Name: %1 Supplied Realm Name: %2 User ID: %3 Service Information: Service Name: %4 Service ID: %5 Network Information: Client Address: %10 Client Port: %11 Additional Information: Ticket Options: %6 Result Code: %7 Ticket Encryption Type: %8 Pre-Authentication Type: %9 Certificate Information: Certificate Issuer Name: %12 Certificate Serial Number: %13 Certificate Thumbprint: %14 Certificate information is only provided if a certificate was used for pre-authentication. Pre-authentication types, ticket options, encryption types and result codes are defined in RFC 4120.",
      "patterns": [
        {
          "id": 5238,
          "idx": 1,
          "category": "access",
   ...