React Data Grid 多选过滤器对齐问题

Question

当我们在 React 数据网格中 select 多个过滤器选项时，header 列变得混乱。有没有办法解决这个问题，使 selected 过滤器选项出现在下拉列表而不是添加到列 header。随着新的过滤键被添加到列表中，列 header 的大小正在增加。

参考：https://github.com/adazzle/react-data-grid/issues/885

```

import React from 'react';

var ExecutionEnvironment = require('exenv');

if (ExecutionEnvironment.canUseDOM) {
  var ReactDataGrid = require('react-data-grid');
  var { Toolbar, Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, Data: { Selectors } } = require('react-data-grid-addons');
}

export default class ReactGrid extends React.Component {
  constructor(props, context) {
    const { Toolbar, Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, Data: { Selectors } } = require('react-data-grid-addons');
    super(props, context);

    this._columns = [
      {
        key: 'prd_family_name',
        name: 'Product Family Name',
        width: 190,
        filterable: true,
        filterRenderer: MultiSelectFilter,
        sortable: true
      },
      {
        key: 'prd_family_mkt',
        name: 'Market',
        width: 70,
        filterable: true,
        filterRenderer: AutoCompleteFilter,
        sortable: true
      }
    ];
    console.log(`gridvalue${this.props.gridValues}`);
    this.state = { filters: {} };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ rows: nextProps.gridValues });
  }

  getRandomDate = (start, end) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();

  rowGetter = index => Selectors.getRows(this.state)[index];

  rowsCount = () => Selectors.getRows(this.state).length;

  handleFilterChange = (filter) => {
    const newFilters = Object.assign({}, this.state.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }
    this.setState({ filters: newFilters });
  };

  getValidFilterValues = (columnId) => {
    const values = this.state.rows.map(r => r[columnId]);
    return values.filter((item, i, a) => i === a.indexOf(item));
  };

  handleOnClearFilters = () => {
    this.setState({ filters: {} });
  };

  handleGridSort = (sortColumn, sortDirection) => {
    const comparer = (a, b) => {
      if (sortDirection === 'ASC') {
        return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
      } else if (sortDirection === 'DESC') {
        return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
      }
    };

    const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);

    this.setState({ rows });
  };

  render() {
    return (
      <ReactDataGrid
        enableCellSelect
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this.rowsCount()}
        onGridSort={this.handleGridSort}
        minHeight={450}
        toolbar={<Toolbar enableFilter />}
        onAddFilter={this.handleFilterChange}
        getValidFilterValues={this.getValidFilterValues}
        onClearFilters={this.handleOnClearFilters}
      />);
  }
}

```

上面的代码用于呈现数据网格。

Answer 1

我看到了完全相同的问题。我已经对一堆 CSS 进行了排序，当您将鼠标悬停在 header 上时，它们会破坏过滤器选择。

当您将鼠标移开时，它会返回水平布局，并剪掉溢出部分。不是 100% 完美，但它对我来说似乎做得很好。

您需要调整 CSS 中的一些值以适应您的字体/大小，但这应该是微不足道的。

.react-grid-Container
{
  font-size : 10px;
  font-family: Roboto Mono, sans-serif;
}

div.react-grid-HeaderCell .input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    max-width : 100%;
    border : 1px solid #ddd;
}

div.react-grid-HeaderCell
{
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

div.react-grid-HeaderCell:hover
{
  z-index:9999;
  overflow:visible;
}

div.react-grid-HeaderCell:hover input:not(.Select-input)
{
  max-width: 250px;
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.react-grid-HeaderCell div.input-sm
{
  display : none;
}

div.react-grid-HeaderCell:hover .Select div.Select-Value
{
  clear:both;
}

div.react-grid-HeaderCell .Select-control
{
    width: 100%;
}

div.react-grid-HeaderCell:hover .Select .Select-control,
div.react-grid-HeaderCell:hover .Select .Select-menu-outer
{
    width: max-content;
    min-width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.react-grid-HeaderCell:hover .Select .Select-control .Select-value
{
    float: left;
    clear: left;
    margin-right : 20px;
}

div.react-grid-HeaderCell:hover .Select .Select-multi-value-wrapper
{
    padding : 5px;
    padding-top : 40px;
}

div.react-grid-HeaderCell:hover .Select div.Select-input
{
    position : absolute;
    left : 0;
    width:max-content;
    min-width : 220px;
    margin-top : -35px;
    margin-right : 20px;
    border : 1px solid #ddd;
    padding-right: 5px;
}

div.react-grid-HeaderCell:hover .Select--multi .Select-arrow-zone,
div.react-grid-HeaderCell:hover .Select--multi .Select-clear-zone
{
    margin-left: 5px;
    position : absolute;
}

div.react-grid-HeaderCell:hover .Select--multi .Select-arrow-zone
{
  right : -3px;
  top : 7px;
}

div.react-grid-HeaderCell:hover .Select--multi .Select-clear-zone
{
  right : 3px;
  bottom : 3px;
}

div.react-grid-HeaderCell:hover .Select--multi .Select-control .Select-value
{
  max-height : 22px;
}

React Data Grid 多选过滤器对齐问题

React Data Grid Multiselect filter alignment issue

javascript

css

reactjs

react-data-grid