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

只需将此样式添加到您的 App.css 或 App.scss 并执行硬刷新 ctrl+shift+R

.lnndaO {
   white-space: pre-line !important;
 }