Set ID on table header columns using WebGrid

Question

I want to set an ID on each column inside the table header, using WebGrid.

Having the code:

@grid.Table
(
    htmlAttributes: new { id = "my-list" },
    tableStyle: "grid hover-rows clickable-rows",
    columns: grid.Columns
    (
        grid.Column(
            columnName: "colName",
            header: "Name",
            style: "col-width-10"),
        grid.Column(
            columnName: "colAge",
            header: "Age",
            style: "col-width-10"),
        grid.Column(
            columnName: "colGender",
            header: "Gender",
            style: "col-width-10")
    )
)

That generates the HTML:

<table class="grid" id="my-list">
    <thead>
        <tr>
            <th scope="col">
                <a href="/MyWebSite?sort=colName&sortdir=ASC">Name</a>
            </th>
            <th scope="col">
                <a href="/MyWebSite?sort=colAge&sortdir=ASC">Age</a>
            </th>
            <th scope="col">
                <a href="/MyWebSite?sort=colGender&sortdir=ASC">Gender</a>
            </th>
        </tr>
    </thead>
    <tbody>
        the body doesn't matter 
    </tbody>
</table>

But I need IDs inside th elements:

<table class="grid" id="my-list">
    <thead>
        <tr>
            <th id="columnHeaderName" scope="col">
                <a href="/MyWebSite?sort=colName&sortdir=ASC">Name</a>
            </th>
            <th id="columnHeaderAge" scope="col">
                <a href="/MyWebSite?sort=colAge&sortdir=ASC">Age</a>
            </th>
            <th id="columnHeaderGender" scope="col">
                <a href="/MyWebSite?sort=colGender&sortdir=ASC">Gender</a>
            </th>
        </tr>
    </thead>
    <tbody>
        the body doesn't matter 
    </tbody>
</table>

The code above does not compile, is just an example to explain the problem.

Thanks in advance!