javascript - React 数据表组件 - 标题行不显示全文

Question

所以我正在使用一个名为 react-data-table-component 的 npm 包.我遇到的一个问题是我无法将宽度调整到足以显示完整标题文本的程度，如您在此处所见:

这是我用于此数据表的自定义样式:

const CustomStyle = {
  noData: {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'white',
    },
  },
  rows: {
    style: {
      zIndex: 2,
      minHeight: '30px !important', // override the row height
      fontSize: '14px',
      whiteSpace: 'pre',
    },
  },
  table: {
    style: {
      zIndex: 1,
    },
  },
  headRow: {
    style: {
      minHeight: '40px',
      borderTopWidth: '1px',
      borderTopStyle: 'solid',
      borderBottomWidth: '2px',
    },
  },
  headCells: {
    style: {
      fontSize: '16px',
      justifyContent: 'left',
      wordWrap: 'breakWord',
    },
  },
  subHeader: {
    style: {
      minHeight: '40px',
    },
  },
  pagination: {
    style: {
      minHeight: '40px',
    },
    pageButtonsStyle: {
      borderRadius: '50%',
      height: '40px',
      width: '40px',
      padding: '8px',
      margin: 'px',
      cursor: 'pointer',
    },
  },
};

这是我为每一列使用的宽度设置:

const columns = [
    {
      name: 'Action',
      selector: row => row['CASE_ID'],
      width: '6%',
      maxWidth: 'auto',
      cell: row => {
        return (
          <div>
            <Row>
              <Col className="ml-3">
                <Link to={{ pathname: "/wlmonitoring/user-case-wl", caseID: row.CASE_ID, cifID: row.NO_CIF }}>
                  <img alt="" src={editIcon} className="edit-icon" />
                </Link>
              </Col>
            </Row>
          </div>
        );
      },
    },
    {
      name: 'Case ID',
      selector: row => row['CASE_ID'],
      width: '7%',
      maxWidth: 'auto',
      cell: row => {
        return (
          "WMC" + row.CASE_ID
        )
      }
    },
    {
      name: 'Created Date',
      selector: row => row['AUDIT_DATE_CREATED'],
      width: '10%',
      maxWidth: 'auto',
      sortable: true,
      cell: row => {
        return (
          moment(row.AUDIT_DATE_CREATED).format(dateFormat)
        )
      }
    },

目前我使用百分比来定义宽度，但我尝试以像素为单位设置确切的宽度，但这会导致最后一个标题突出表格，如下所示:

如果有人能帮助我找出确切的问题是什么，我将不胜感激。

Answer 1

接受的答案对我不起作用。所做的是将 title 放在 div 中，这样组件就不会尝试缩短。

例如来自:

    {
      name: 'Case ID',
      ...
    }

收件人:

    {
      name: <div>Case ID</div>,
      ...
    }