Allow Class Specification on TableColumn

[mwislek]

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

[chawes13]

@mwislek I'd accept a PR for this! I think id would also be an acceptable prop to pass down, since class may not necessarily be the right level of abstraction for a one-off column.

Your syntax is a little off in your suggestion, though.

const className = "name-column-header"
const arrowClass = getArrowClass(true, true) // "arrow-up"

// ❌
classnames(arrowClass, { sortable: true, className }) // "arrow-up sortable className"

// ✅
classnames(arrowClass, { sortable: true }, className) // "arrow-up sortable name-column-header"

The order which className is passed in doesn't matter, it just needs to be passed in directly, not in the object syntax (classnames takes the key for a truthy value). Typically, I like to pass it as the first arg because I think it reads nicely, but I'm not strongly coupled to that.