Modify Table Summary Rows

How to change or hide summary rows for table groups

Before

Mitigation table, grouped by mitigation location, with modified summary rows

Grouping records in tables is great for usability, organization, and data points. It allows a user to quickly identify averages and totals (sums), or compare and contrast related records. The one downside is that group summary rows duplicate the group name creating a lot of clutter on the table. To simplify this, we remove that group header name from the group summary row and we can either hide it completely or add something that makes more sense. In the mitigation table example above, instead of it being "Header Name (Mitigation Location) + Total (Group Sum)" we set it to "Location Total".

The JS

/*********************************/
/*** Modify Table Summary Rows ***/
/*********************************/

function hideSummaryNameMitigationTable(view_id, replacementText) {
  var $tableRowTotals = $(`#${view_id}`).find("tr.kn-table-totals")
  $tableRowTotals.map(function (index) {
    if (index !== $tableRowTotals.length-1) {
      $(this).find("td:eq(2)").html(`<strong>${replacementText}</strong>`)
    }
  })
}

// Change Summary Name for Mitigation Tables
$(document).on('knack-scene-render.scene_105', (event) => {
  // Waiting for scene to render instead of view
  // View finishes rendering before table data is loaded
  hideSummaryNameMitigationTable("view_322", "Location Total")
  hideSummaryNameMitigationTable("view_321", "Location Total")
})

The CSS

None needed 😎

How to Implement

1️⃣

When setting up your table, you will need to identify a field you like like to group the object records by and of course add the appropriate filters if applicable. For the mitigation table we sort by the mitigation location and filter by mitigation type for example.

2️⃣

3️⃣

4️⃣