React Table – User COntrolled Header background Color

A possible React solution without libs would be to pass the CSS variable name as props, and reference it in the style of your component. Suppose we have:

<MyTable headerColor="ddw-primary" />

and your CSS variables defined in the MyTable component. Assuming you style via the style= property, you can do:

return <table style={{backgroundColor: `var(${headerColor})` }}>
  {// ...}
</table>