Feature Description

By default in the client template, tables use table-layout: fixed. By default, this configuration makes all columns an equal size (see: https://css-tricks.com/almanac/properties/t/table-layout/).

If a design requires some table columns to be larger than others, specification of a size on the "first table row" (typically, one or more <th> elements) is required. While it is possible to provide a custom headerComponent to each sized column to resolve this issue, creation of a component to be able to set a class seems like overkill. Rather, it would be easier to simply pass a class on the <TableColumn> component and have the class be propagated to the <th> element in the <TableHeader>.

Suggested Solution

I believe this can be resolved simply by:

1. Pulling an explicit className prop out of the column prop in the TableHeader definition.
2. Passing the resulting class to the rendered <th> element's className.

That is:

function TableHeader({
  column: { className, name, label, disabled },
  sortPath,
  ascending,
  onClick,
}) {
  const active = sortPath === name
  const arrowClass = getArrowClass(active, ascending)
  return (
    <th
      onClick={onClick}
      className={classnames(arrowClass, { sortable: !disabled, className })}
    >
      {label || startCase(name)}
    </th>
  )
}

Alternatives Considered / Existing Workarounds

Creation of a specific header component instance for each column on which a size specification is required.

Additional Context