CODEWITHSUNDEEP
reactjsreact-data-grid
Saurabh Bayani
Saurabh Bayani

Reputation: 3500

How to disable default title in react-data-grid

react-data-grid is having default tooltip to each cell. It adds the title attribute automatically. I don't want that tooltip, how can I hide it?

Also, I don't want to use custom formatter. I think it will be overhead.

e.g Try to hover on any cell

See unwanted tooltip on Kristin here

enter image description here

Upvotes: 1

Views: 1380

Answers (1)

mike123
mike123

Reputation: 1559

It might not be possible to get around without custom formatter

As far as overhead, check out the implementation it makes use of SimpleCellFormatter https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/formatters/SimpleCellFormatter.js there is nothing special going on there

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>;
  }
}

Have your custom formatter like this (same as above except the title attribute):

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>;
  }
}

And it attached to your columns

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

Hope that helps.

Upvotes: 2

Related Questions