css - 如何将 HeaderRenderer 添加到 react-data-grid？

Question

我正在使用react-data-grid，这在很大程度上正是我所需要的。但是，我有大约 70 列需要编辑，但它们的内容实际上很窄。我想垂直显示标题。

我已经按原样通读了文档，我想我需要添加一个 headerRenderer。我也认为那个签名是( column, rowType )，但是文档对此有点模糊。

我试过了：

....

const rotatedHeaderRenderer = (column, rowType) => {
  return <span className="rotate">{column.name}</span>;
};

....

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  render() {
    return (
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => this.state.rows[i]}
          rowsCount={3}
          headerRowHeight={123}
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect={true}
          headerRenderer={rotatedHeaderRenderer}
        />
      </div>
    );
  }
}

但我什么也没得到（尽管组件确实渲染）。我试过删除.name，是的，它告诉我这column是一个对象。

我究竟做错了什么？还有其他地方我应该在文档中查找吗？

另外：如果我需要逐列进行，我很乐意更改列定义并以某种方式在其中应用渲染器？

---

编辑

发现一个GitHub 问题有点帮助，虽然那里有一些明显的错误......

我可以通过更改列定义并将标题渲染器依次应用于每一列来旋转标题单元格本身的内容：

function VericalHeader(item) {
  return (
    <div
      style={{
        transform: "rotate(-90deg)",
        filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
      }}
    >
      {item.column.name}
    </div>
  );
}

....

const columns = [

  ....

  {
    key: "base_unit_of_measure",
    name: "Base Unit of Measure",
    headerRenderer: VericalHeader
  },

  ....

  ];

结果是这样的......

<div 
    class="react-grid-HeaderCell" 
    style="width: 80px;
    left: 500px;
    display: inline-block;
    position: absolute;
    height: 200px;
    margin: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none;"
>
    <div style="transform: rotate(-90deg);">
        Base Unit of Measure
    </div>
</div>

...哪种有效，但文本现在不会左对齐（即与 的视觉底部div.react-grid-HeaderCell）。这一切可悲地告诉我，我实际上将不得不对react-data-grid/src/Header.tsx组件进行子类化，这只需要我学习 Typescript ;-)

喂喂...

标签： cssreactjsformattingreact-data-grid