[英]StickyHeader in Material-Table React
我在看这个例子,我的问题是关于粘性标题。 示例: https : //material-table.com/#/docs/features/fixed-columns
我试图弄清楚是否可以将 Name 到 BirthPlace 的标题粘贴起来,这样当我创建滚动条时,它就会留在那里。 我尝试了一切,但它一直给我不同的结果。 任何帮助都会很棒
class BasicFixedColumns extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<MaterialTable
title="Basic Fixed Columns Preview"
columns={[
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Surname', field: 'surname', width: 150 },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
width: 150
},
{ title: 'Name', field: 'name', width: 150 },
{ title: 'Surname', field: 'surname', width: 150 },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
width: 150
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
options={{
fixedColumns: {
left: 2,
right: 1
}
}}
/>
)
}
}
您需要设置maxBodyHeight
属性。 然后,当数据超过此高度时,表格将变为可滚动并带有粘性标题。
<MaterialTable
options={{
paging: false,
maxBodyHeight: '300px',
}}
columns={columns}
data={data}
/>
奖励:对于粘性第一列,有此功能。
通过使用它,它将 tableLayout 设置为固定。 如果列变得一团糟,我无法将其设置回自动。 所以在创建我的列数组后,我给了第一列一些样式:
columns[0].cellStyle = {
backgroundColor: '#007eff',
color: '#FFF',
position: 'sticky',
left: 0
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.