react-bootstrap-table

Question

我正在使用 react-bootstrap-table，但我在格式化时遇到了问题。主要问题是：

长名字的headers应该用2行文本显示，而不是像下图那样只有一行和“...”：
此外，我无法设置 table 单行的高度。每个文本都有很大的填充，因此 table 不会太紧凑：

代码在这里：

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

Answer 1

根据 docs，您可以进行所需的所有自定义。

第一期： 要删除点，您可以使用 thStyle 属性，您可以将其传递给 TableHeaderColumn 组件并覆盖 CSS white-space 属性.

<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />

第二期：您可以使用trClassName 属性处理行的高度。您可以传递字符串或函数来处理每个或使条件 class 取决于行。查看更多 here.

例如：

<BootstrapTable trClassName="customClass" {...anotherProps} />

并定义你的 customClass:

.customClass {
    // override padding or height whatever you want 
    padding: 3px;
}

祝你好运，玩得开心！

react-bootstrap-table - 格式 - 行高、文字换行

react-bootstrap-table - formatting - row height, text wrap

css

reactjs