gpt4 book ai didi

javascript - Material-Table React 中的 StickyHeader

转载 作者:行者123 更新时间:2023-12-04 17:29:49 25 4
gpt4 key购买 nike

我在看这个例子,我的问题是关于粘性标题。示例: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属性(property)。然后,当数据超过此高度时,表格将变为可滚动并带有粘性标题。

<MaterialTable
options={{
paging: false,
maxBodyHeight: '300px',
}}
columns={columns}
data={data}
/>

奖金 :对于粘性第一列, there is this functionality .

通过使用它,它将 tableLayout 设置为固定。如果列变得一团糟,我无法将其设置回自动。所以在创建我的列数组后,我给了第一列一些样式:
columns[0].cellStyle = {
backgroundColor: '#007eff',
color: '#FFF',
position: 'sticky',
left: 0
}

关于javascript - Material-Table React 中的 StickyHeader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60776923/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com