pass a class name to specific column headers

[severo]

fixes #61

[severo]

I'm interested in your comments, @bleakley @platypii. I used the same logic to pass class names to inner components as I did in hyperparam (https://github.com/hyparam/hyperparam-cli/blob/master/src/hooks/useConfig.ts).

But if you know a better API or pattern, I would be happy to switch to it.

[severo]

I recommend setting "hide whitespace" for the review

[platypii]

I'm not sure I like the Config and ConfigProvider here.

How is the stuff in config different than any of the other HighTable "config" options like padding, overscan, etc? Config is so generic it's not clear what belongs to it or not.

Adding the provider seems like unnecessary complexity too.

I understand the desire to combine some of the options, there are a lot right now. Would a more logical grouping be a new style prop?

interface StyleProps {
  styled?: boolean
  customClass?: {
    hightable?: string
    columnHeaders?: (string|undefined)[] // array of custom classes for each column header, by "df.header" 0-based index
  }
}

Or maybe just plumb through a columnHeaderStyles prop and skip trying to nest things?

[severo]

You're right; it's much clearer now. I also passed the column class name to the column cells. It's free, and it lets you apply styles to them if needed.

.custom-hightable thead th.delegated {
  background-color: #f3d373;
}
.custom-hightable tbody tr:not(:hover) td.delegated {
  background-color: #ffe9a9;
}

<HighTable
  data={data}
  className="custom-hightable"
  columnClassNames={[undefined, undefined, 'delegated']}
/>

[platypii]

This opens up a whole bunch of cool style options! Love it