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

Question

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

另外，我不想使用custom formatter。我想它会在头顶上。

例如Try to hover on any cell

在此处查看Kristin上不需要的工具提示

​

​

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,
  },
...

希望这能有所帮助。