如何样式React Bootstrap表列过滤框

Question

我有一个带有列过滤器的React-Bootstrap-table。我需要过滤框出现在列标题的底部

我尝试在每个过滤列中添加样式：{display:block}，但它不起作用

function App() {
    const columns = [{
          dataField: 'id',
          text: 'Product ID',
        }, {
          dataField: 'name',
          text: 'Product Name',
          filter: textFilter({style:{display:'block'}})
        }, {
          dataField: 'price',
          text: 'Product Price',
          filter: textFilter({style:{display:'block'}})
        }];
    const [apps, setApps] = React.useState([]);
  return (
    <Router basename="/resources/apps">
      <div className="App">
      <BootstrapTable keyField='id' data={ apps } columns={ columns } filter={ filterFactory() } />
      </div>
    </Router>
  );
}

我希望它显示列过滤框以显示列标题下方的列。但是盒子出现在每个列标题旁边

Answer 1

这不是一个完美的解决方案，我更喜欢在组件级别上进行一些样式，但这对我有用。

如果您将此CSS添加到您的项目中(其中取决于您的项目，但我的CRA基于CRA，我只是将其添加到index.css.css文件中(

.react-bootstrap-table>table>thead>tr>th .filter-label {
  width: 100%
}

我的文本过滤器从与坐在新线路上的列标题上的线上相同。

交替(可能是更好的选择(，使用此处概述的方法：标头格式

例如，您可以创建一个看起来像这样的格式化者：

const headerFormatter = (column, colIndex, { sortElement, filterElement }) => {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <span>
        {column.text} {sortElement}
      </span>
      {filterElement}
    </div>
  );
};

，然后将该自定义格式化器与您希望使用的列相关联。