我已经实现了react table,除了IE-11之外,所有浏览器都可以正常工作。
如下面的屏幕截图所示,子组件还有额外的填充。
image showing extra padding for the sub component
下面是主要组件和子组件的代码。
<ReactTable
id='facility-complaints-table'
className='table'
data={complaints}
columns={complaintsColumns}
defaultPageSize={complaints.length}
showPagination={false}
sortable={false}
resizable={false}
noDataText=''
SubComponent={row => {
return (
<div className='sub-component' >
<ReactTable
data={row.original.allegations}
columns={allegationColumns}
defaultPageSize={row.original.allegations.length}
sortable={false}
resizable={false}
showPagination={false}
/>
以下是使用的样式: 禁用椭圆,改为断字
.facility-children .ReactTable .rt-table .rt-tbody .-odd {
background-color: #ffffff;
}
.facility-children .ReactTable .rt-thead .rt-tr {
color: #000;
border-top: 1px solid #ddd;
text-align: initial;
}
.facility-children .ReactTable .rt-thead .rt-tr .rt-th{
font-family: 'Source Sans Pro Bold', sans-serif;
font-weight: bold;
}
.rt-noData {
opacity: 0;
}
.rt-td { //To disable ellipses, did this
white-space: normal !important;
word-wrap: break-word;
}
.ReactTable .rt-td:first-child {
text-align: end;
}