如何在react-data-grid中禁用默认标题

Question

react-data-grid对每个单元格都有默认的工具提示。它会自动添加title属性。我不想要该工具提示，该如何隐藏呢？

我也不想使用custom formatter。我认为这将是开销。

例如Try to hover on any cell

在此处查看克里斯汀的有害工具提示

Answer 1

如果没有自定义formatter

，可能无法绕行

关于开销，请检查其利用SimpleCellFormatter的实现 https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/formatters/SimpleCellFormatter.js没什么特别的

class SimpleCellFormatter extends React.Component {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.bool])
  };

  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div title={this.props.value}>{this.props.value}</div>;
  }
}

具有这样的自定义格式化程序（除title属性以外，其他与上述相同）：

class CustomSimpleCellFormatter extends React.Component {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.bool])
  };

  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div >{this.props.value}</div>;
  }
}

它附在您的columns

上

const columns = [
  {
    key: "id",
    name: "ID",
    sortDescendingFirst: true
  },
  {
    key: "title",
    name: "Title",
    title: false
  },
  {
    key: "firstName",
    name: "First Name",
formatter: CustomSimpleCellFormatter,
  },
...

希望有帮助。