npm React Data Table组件-标题行未显示全文

rbl8hiat  于 2023-06-23  发布在  React
关注(0)|答案(3)|浏览(121)

所以我使用了一个npm包,叫做react-data-table-component。我遇到的一个问题是,我不能调整足够的宽度来显示完整的标题文本,正如你在这里看到的:

下面是我在这个数据表中使用的自定义样式:

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)
        )
      }
    },

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

如果有人能帮我弄清楚确切的问题是什么,我会非常感激。

t3irkdon

t3irkdon1#

接受的答案对我不起作用。所做的是将title放置在div中,这样组件就不会试图缩短。
例如:

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

收件人:

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

ezykj2lf2#

只需将此样式添加到App.css或App.scss中并进行硬刷新ctrl+shift+R即可

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

rqqzpn5f3#

将此CSS添加到您的主CSS文件中

.rdt_TableCol div:first-child {
    white-space: normal !important;
    overflow: visible !important;
}

相关问题