reactjs - 材料表反应。如何使表格标题和标题具有粘性
问题描述
是否可以使 Material-Table 中的表格标题、搜索字段、全局操作图标和列标题具有粘性?
我尝试将 headerStyle 添加到选项中,但没有效果(无论如何只会影响列标题而不影响表标题等)
options={{
headerStyle: { position: 'sticky'},
paging: false,
search: false,
}}
有没有人有任何想法如何做到这一点?
我希望存在一个“粘性标题”选项,但如果存在,我看不到它!我会认为粘性标题是表格的一个相当常见的用例。
这是使用材料表的基本代码:
import React from 'react';
import MaterialTable from 'material-table';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
],
data: [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987,
birthCity: 63 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}
/>
); } `
解决方案
最后我想通了:
我必须将这些添加到材料表选项中。这意味着提前知道您希望桌子的高度。我
options={{
headerStyle: { position: 'sticky', top: 0 },
maxBodyHeight: 500,
}}
然后根据分页设置添加到材料表中也是必要的:
components={{
Container: props => (
<div style={{height: 500}}>
{props.children}
</div>
),
}}
推荐阅读
- python - Python:在零数组中初始化 numpy 数组
- javascript - 如何在不更改接收新值的数组的内存地址的情况下将一个数组中的值加载到另一个数组中?
- java - list.get(0) 上的 Java 显式转换(不兼容的类型:java.lang.Object 无法转换为 java.lang.String)
- javafx - JavaFX 长按按钮
- python - 我们可以在 Django 框架中嵌套 HTML 表单吗?
- python-3.x - Google 日历 API - 创建事件 400,解析错误
- vb.net - VB.net 将 2 条特定行导出到 DataGridView
- html - *ngFor 用于
- 使用 8.2.8 的角度版本绑定从 API 接收的数据,但无法显示数据
- floris - 您如何更改 FLORIS 内的湍流强度
- python - 将 JSON 文本格式化为可读