ReactTabulator - can't vertically align column header titles - tabulator

Question

Trying to configure grouped columns with ReactTabulator. I can get the groups to work but the header titles of columns outside the groups are aligned to the top of the cell, which to me looks bad. I tried the 'columnHeaderVertAlign' property but it isn't working. In the code below, I have 'columnHeaderVertAlign' in the component itself but I've also tried putting it in the 'columns' definition and got the same results. What am I missing?
Here's all my code:
import React, { Component } from "react";
import 'react-tabulator/lib/css/tabulator.min.css'; // theme
import 'react-tabulator/lib/styles.css';
import { ReactTabulator } from 'react-tabulator'
function TabulatorExample(){
var data = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
const columns = [
{ title: "Name", field: "name" },
{
title:"Age info",
columns:[
{ title: "Age", field: "age", hozAlign: "left", formatter: "progress", width: 150 },
{ title: "Date Of Birth", field: "dob", hozAlign: "center" },
],
},
{ title: "Favourite Color", field: "col" },
{ title: "Rating", field: "rating", hozAlign: "center", formatter: "star" },
{ title: "Passed?", field: "passed", hozAlign: "center", formatter: "tickCross" }
];
return(
<section>
<ReactTabulator
data={data}
columns={columns}
layout={"fitDataTable"}
columnHeaderVertAlign={"bottom"}
/>
</section>
);
}
export default TabulatorExample;
here's the output of the above
I would like 'Name', 'Favourite Color', 'Rating', and 'Passed?' to be aligned to the bottom of their respective cells.