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，我只是将其添加到index.css文件中）

CupertinoPicker(
  itemExtent: 50,
  onSelectedItemChanged: (int index) {
    print(index);
  },
  children: <Widget>[
    Center(child: Text("Item 1")),
    Center(child: Text("Item 2")),
    Center(child: Text("Item 3")),
  ],
),

我的文本过滤器不再与列标题位于新行相同。

或者（可能是更好的选择），使用此处概述的方法：Header Formatter

例如，您可以创建一个如下所示的格式化程序：

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

然后将该自定义格式化程序与您希望在其上使用的列相关联。

如何设置React Bootstrap Table列过滤器框的样式

1 个答案: