Equivalent of cellProps for column headers?

[Susan123456789]

Is there an equivalent to cellProps for column headers? Like headerProps? I would like to add a class name to a header (specifically a max-width for the column). Thanks!

[imballinst]

Hey @Susan123456789! Unfortunately, I think there isn't any at the moment. The closest ones are perhaps:

1. classes prop of TableHeader, but it's pure string, unlike cellProps where we can access the content of a row: https://github.com/imballinst/react-bs-datatable/blob/main/api/interfaces/components_TableHeader.TableHeaderClasses.md#th
2. headerCell field of the column type, but it's rather about rendering the th's children instead of the th itself: https://github.com/imballinst/react-bs-datatable/blob/main/api/interfaces/helpers_types.TableColumnType.md#headercell.

If none of the above fits your use-case, perhaps I can work on something about it tomorrow, something very similar to cellProps, named headerProps (like your suggestion) I think. In fact, I think I will do it regardless tomorrow. I'll get back to you when I have more news!

[imballinst]

@Susan123456789 I have published 3.4.0-alpha.0 for testing, result can be seen in this sandbox: https://codesandbox.io/s/react-bs-datatable-3-4-0-alpha-0-thprops-zl8qi9?file=/src/App.js. Does this suffice what you need? Sample usage is as follows:

// App.js
const STORY_HEADERS = [
  {
    prop: "name",
    title: "Name",
    isFilterable: true
  },
  {
    prop: "username",
    title: "Username"
  },
  {
    prop: "location",
    title: "Location"
  },
  {
    prop: "date",
    title: "Last Update"
  },
  {
    prop: "score",
    title: "Score",
    isSortable: true,
    thProps: {
      className: "th--score"
    }
  }
];

The class:

/* styles.css */
.table > thead > tr > .th--score {
  background-color: rgb(255, 0, 0, 0.5);
}

[imballinst]

I am closing this issue -- 3.4.0 is published: https://www.npmjs.com/package/react-bs-datatable. Please feel free to re-open if the newest version doesn't solve this case.