Reactjs 反应';react数据表组件';不';如果文本较长,则在悬停时不显示工具提示

Reactjs 反应';react数据表组件';不';如果文本较长,则在悬停时不显示工具提示,reactjs,Reactjs,我使用“react data table component”将数据显示到表视图中。 如果文本长度大于单元格大小,则在结尾处显示为“…”,但问题是当我悬停时,没有显示全文的工具提示 我的问题是库是否支持工具提示,或者它支持工具提示,但我的代码缺少该部分 这是我的密码: import React from 'react'; import ReactDOM from 'react-dom'; import DataTable from 'react-data-table-component';

我使用“react data table component”将数据显示到表视图中。 如果文本长度大于单元格大小,则在结尾处显示为“…”,但问题是当我悬停时,没有显示全文的工具提示

我的问题是库是否支持工具提示,或者它支持工具提示,但我的代码缺少该部分

这是我的密码:

import React from 'react';
import ReactDOM from 'react-dom';
import DataTable from 'react-data-table-component';    

export default class MyTable2 extends React.Component {
  constructor(props) {
    super(props);

    const data = [];

    for (var i = 0; i < 200; i++) {
      data.push({ id: i, title: 'Lorem Ipsum' + i, summary: 'Lorem ipsum dolor sit amet, morbi molestie sagittis. Fusce neque pharetra elementum ante praesent et, non non nulla enim, velit amet sit convallis sit, sit donec ac odio quis sem.', year: '1982', expanderDisabled: true, image: 'http://conan.image.png' })
    }

    this.state = {
      rs: data
    }
  }

  render() {    

    const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
      },
      {
        name: 'Summary',
        selector: 'summary',
        sortable: true
      },
      {
        name: 'Year',
        selector: 'year',
        sortable: true
      },
    ];

    const myNewTheme = {
      rows: {
        fontSize: '25px'
      }
    }

    const handleChange = (state) => {
      console.log('Selected Rows: ', state.selectedRows);
    };

    return (
      <DataTable         
        className="dataTables_wrapper"
        noHeader
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
      />
    )
  }
}
从“React”导入React;
从“react dom”导入react dom;
从“反应数据表组件”导入数据表;
导出默认类MyTable2扩展了React.Component{
建造师(道具){
超级(道具);
常量数据=[];
对于(变量i=0;i<200;i++){
数据推送({id:i,标题:'Lorem Ipsum'+i,摘要:'Lorem Ipsum door sit amet,morbi molestie sagittis.Fusce neque pharetra element um ante preasent et,non non nulla enim,velit amet sat convallis sit,sit donec ac odio quis sem',年份:'1982',expanderDisabled:true,image:'http://conan.image.png' })
}
此.state={
rs:数据
}
}
render(){
常量列=[
{
姓名:'头衔',
选择器:“标题”,
可排序:是的,
},
{
名称:'摘要',
选择器:“摘要”,
可排序:正确
},
{
名称:'年',
选择器:'年',
可排序:正确
},
];
常数myNewTheme={
行:{
字体大小:“25px”
}
}
常量handleChange=(状态)=>{
console.log('Selected Rows:',state.selectedRows);
};
返回(
)
}
}

编辑:我添加了我使用的库的引用,这可能只是css样式的问题,类似于
文本溢出:省略号在某些css类中。

您可以使用宽度属性:

{
        name: 'Proveedor',
        selector: 'PROVEEDOR',
        sortable: true,
        center: true,
        style: {
            justifyContent: 'left',
        },
        width: '300px'
    },