Sortable Tables sort the wrong column when a row header is in place

[pezholio]

Prerequisites

• [ ] Put an X between the brackets on this line if you have done all of the following:
  • [x] Reproduced the problem
  • [x] Followed all applicable steps in the debugging guide
  • [x] Checked the FAQs on the message board for common solutions
  • [x] Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
  • [x] Checked that there is not already a package that provides the described functionality

Description

When the first cell in a row is a header (i.e using the firstCellIsHeader option in the govukTable Nunjucks macro), the index fetched for the column is incorrect (e.g clicking on the second column sorts the third column).

Steps to Reproduce

Create a table with a row header:

{%- from "govuk/components/table/macro.njk" import govukTable -%}

{{ govukTable({
  attributes: {
    'data-module': 'moj-sortable-table'
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      attributes: {
        "aria-sort": "ascending"
      }
    },
    {
      text: "Elevation",
      attributes: {
        "aria-sort": "none"
      }
    },
    {
      text: "Continent",
      attributes: {
        "aria-sort": "none"
      }
    },
    {
      text: "First summit",
      attributes: {
        "aria-sort": "none"
      },
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "Aconcagua"
      },
      {
        text: "6,961 meters",
        attributes: {
          "data-sort-value": "6961"
        }
      },
      {
        text: "South America"
      },
      {
        text: "1897",
        format: "numeric",
        attributes: {
          "data-sort-value": "1897"
        }
      }
    ],
    [
      {
        text: "Denali"
      },
      {
        text: "6,194 meters",
        attributes: {
          "data-sort-value": "6194"
        }
      },
      {
        text: "North America"
      },
      {
        text: "1913",
        format: "numeric",
        attributes: {
          "data-sort-value": "1913"
        }
      }
    ],
    [
      {
        text: "Elbrus"
      },
      {
        text: "5,642 meters",
        attributes: {
          "data-sort-value": "5642"
        }
      },
      {
        text: "Europe"
      },
      {
        text: "1874",
        format: "numeric",
        attributes: {
          "data-sort-value": "1874"
        }
      }
    ],
    [
      {
        text: "Everest"
      },
      {
        text: "8,850 meters",
        attributes: {
          "data-sort-value": "8850"
        }
      },
      {
        text: "Asia"
      },
      {
        text: "1953",
        format: "numeric",
        attributes: {
          "data-sort-value": "1953"
        }
      }
    ],
    [
      {
        text: "Kilimanjaro"
      },
      {
        text: "5,895 meters",
        attributes: {
          "data-sort-value": "5895"
        }
      },
      {
        text: "Africa"
      },
      {
        text: "1889",
        format: "numeric",
        attributes: {
          "data-sort-value": "1889"
        }
      }
    ],
    [
      {
        text: "Puncak Jaya"
      },
      {
        text: "4,884 meters",
        attributes: {
          "data-sort-value": "4884"
        }
      },
      {
        text: "Australia"
      },
      {
        text: "1962",
        format: "numeric",
        attributes: {
          "data-sort-value": "1962"
        }
      }
    ],
    [
      {
        text: "Vinson"
      },
      {
        text: "4,897 meters",
        attributes: {
          "data-sort-value": "4897"
        }
      },
      {
        text: "Antarctica"
      },
      {
        text: "1966",
        format: "numeric",
        attributes: {
          "data-sort-value": "1966"
        }
      }
    ]
  ]
}) }}

Click on a header

Expected behaviour: [What you expect to happen]

The column I click on is the column that gets sorted

Actual behaviour: [What happens]

The next column along gets sorted:

Reproduces how often: [What percentage of the time does it reproduce?]

Every time

Versions

MOJ Frontend Version: 1.6.0

Browser: Firefox (Also reproducible in Chrome and Safari)

Additional Information

I have a fix incoming in a PR

[gregtyler]

Fixed in #442 (v1.6.5)