[onHeaderRow] how to using onHeaderRow

[gladshop]

Hi, I want to custom align header and data but I can't see any example to use "onHeaderRow", does you give me any example using onHeaderRow to style or custom render header?

[Bhanukamax]

@gladshop I had the same issue, there wasn't anything in the docs, and found your issue while searching for that, and I think there's a related issue which might help: #171

And found this on the source HeaderRow.tsx

...
if (onHeaderRow) {
    rowProps = onHeaderRow(
      cells.map(cell => cell.column),
      index,
    );
  }
...

Anyway, I figured it out from all of that 🙂. My use case was, I wanted to set some class names for the table header row, so here's what I did (there could be other ways to do it, but this kind of works for me), hope it helps.

      <Table
        columns={columns}
        data={data}
        onHeaderRow={() => ({
          className: "text-md font-semibold tracking-wide text-left text-gray-900 bg-gray-100 uppercase border-b border-gray-600 ",
        })}
      />

basically, you just need to return a object which has the props for the header row.