如果文本很长,React '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
      />
    )
  }
}

编辑:我在这里添加我使用的库的引用

它可能只是一个css风格的问题,类似于某些css类中的text-overflow: ellipsis;

您可以使用 width 属性:

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

最新更新