React Data Table Component – Header row not showing full text

so I am using an npm package called react-data-table-component. A problem that I am having with this is that I can’t adjust the width enough to display the full header text, as you can see here:

Here is the custom styling that I am using with this data table:

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',
    },
  },
};

Here is the width setting that I am using for each column:

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

Currently I am using percentage to define the width, but I tried setting the exact width in pixel, but that would cause the last header to protrude out of the table like so:

If anyone can help me figure out what the exact issue is I would really appreciate it.

Answer

Just add this style to your App.css or App.scss and do hard refresh ctrl+shift+R

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