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.
Advertisement
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; }