所以我使用了一个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)
)
}
},
目前我使用百分比来定义宽度,但我尝试以像素为单位设置确切的宽度,但这会导致最后一个标题突出表,像这样:
如果有人能帮我弄清楚确切的问题是什么,我会非常感激。
3条答案
按热度按时间t3irkdon1#
接受的答案对我不起作用。所做的是将
title
放置在div
中,这样组件就不会试图缩短。例如:
收件人:
ezykj2lf2#
只需将此样式添加到App.css或App.scss中并进行硬刷新ctrl+shift+R即可
rqqzpn5f3#
将此CSS添加到您的主CSS文件中