javascript - React Data Table Component - Header row not showing full text - Stack Overflow

admin管理员组

文章数量:1287228

so I am using an npm package called react-data-table-ponent. 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.

so I am using an npm package called react-data-table-ponent. 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.

• javascript
• reactjs
• npm

Share Improve this question Follow asked Apr 8, 2022 at 4:14 Nayeer MahiuddinNayeer Mahiuddin 31711 gold badge55 silver badges2020 bronze badges 1

• Try removing the width for each column. – mc-user Commented May 1, 2022 at 8:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

The accepted answer didn't work for me. What did was placing the title inside a div, that way the ponent will not try to shorten in.

Eg from:

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

To:

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

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

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

Add this css to your main css file

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

const column = [
        {
              name: "Name",
              sortable: true,
              cell: (row) => {
                return (
                  <div style={{ whiteSpace: "normal" }}>
                    {row.name}
                  </div>
                );
              },
            },
        ]
    
    <DataTable
      columns={column}
      data={yourData}
    />

this worked for me

add this code into your main.css or index.css file

.gdkAMt {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

本文标签： javascriptReact Data Table ComponentHeader row not showing full textStack Overflow