I'm using MaterialTable and I'm passing a columns array in for it to handle setting up the columns and the column header based on the title and sorting fields, among others. The sorting field is what tells it the column is sortable.
However, when a column has the sorting attribute, the rendered html looks like this in the browser:
<th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-4w0mj7" scope="col" style="min-width: 450px; max-width: 450px; box-sizing: border-box; width: calc(7.69231% + 0px);"><span class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-dx096b" tabindex="0" role="columnheader" aria-sort="descending" data-testid="mtableheader-sortlabel">Driver Name<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc css-s6n6v6" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="arrow_downward"><path d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"></path></svg></span><span data-testid="material-table-column-sort-order-indicator" style="width: 1em;"></span></th>
where the role='columnheader' and aria-sort attributes are on the span element instead of the th element. This doesn't comply with accessibility rules and I want this properties to be on the th element.
Is there a way to do this without defining a custom header component prop in my MaterialTable?
I tried creating a custom header to solve this, but the logic gets so complex because I'd still like the sorting logic to work like it does when MaterialTable handles it when I pass columns in as an array like so:
<MaterialTable
columns={columns}
...