标签: material-table
“材料表” - 如何为每页添加更多行并修复渲染 - ReactJs
我正在尝试将每页更多行应用到我的表格中material-table。到现在为止，我发现您可以添加一个数组，其中包含每页如一厢情愿的行。rowsPerPageOptions={[5, 10, 25, 50, 100]}
，但我的问题是当我应用 100 行时，表格会扩展到空白行。（我目前只从后端收到 24 行（文档））所以基本上它必须限于我拥有的数据。有人可以帮我一把吗？谢谢
divideItems = () => {
let startIndex = ((parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage) - this.state.rowsPerPage;
let endIndex = (parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage - 1;
let tabItems = [];
for (let i = startIndex; i <= endIndex; i++) {
if (this.state.items[i]) {
tabItems.push(this.state.items[i]);
}
}
this.setState({
tabItems
}, () => {
});
}
getNewIndex = (event, page) => {
this.setState({
activePaginationTab: page
}, () => { this.divideItems() …推荐指数
解决办法
查看次数
嵌套类的 MaterialUI 主题样式
我正在为一个应用程序创建一个主题createMuiTheme。我正在使用材料表，我需要定位当前已排序的列表标题的此图标：
在开发者工具中观察它有以下 CSS 选择器：
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
我怎样才能在这个对象中做到这一点createMuiTheme？
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
推荐指数
解决办法
查看次数
选择未调用 renderValue 函数 [ReactJS/Material-UI]
我在材料表（我安装的模块）中有一个选择功能。我还使用 Material-UI 中的 Chips 组件。但是，在这个函数中，我尝试对为什么当我选择某些内容时没有任何内容出现并且似乎我的 renderValue 函数没有被调用进行故障排除。
这是代码：
function handleChange(event) {
console.log("!")
setRoleIds(event.target.value);
}
const renderChip = (value) => {
console.log("?!??!?");
console.log(value);
return <Chip label={value} className={classes.chip} />;
};
const [cassowaries, setCassowaries] = React.useState({
columns: [
{ title: "Cassowary Name", field: "name" },
{
title: "Cassowary Roles",
field: "roles",
render: (rowData) => {
return (
<li>
{rowData.roles.map((role) => (
<Chip label={role} className={classes.chip} />
))}
</li>
);
},
editComponent: (props) => (
<FormControl className={classes.formControl}>
<InputLabel>Roles</InputLabel>
<Select
multiple
value={roleIds}
onChange={handleChange}
input={<Input …推荐指数
解决办法
查看次数
材料表使行在单击时可编辑
使用材料表库，我试图使表行可以通过双击进行编辑。单击该行应该与单击操作列最左侧的编辑按钮具有相同的效果。我已成功链接到正确的事件处理程序，现在双击一行时会出现警报框。
\n\nhttps://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203
\n\nimport React from "react";\nimport MaterialTable, { MTableBodyRow } from "material-table";\n\nexport default function App() {\n return (\n <MaterialTable\n columns={[\n { title: "Ad\xc4\xb1", field: "name" },\n { title: "Soyad\xc4\xb1", field: "surname" },\n { title: "Do\xc4\x9fum Y\xc4\xb1l\xc4\xb1", field: "birthYear", type: "numeric" },\n {\n title: "Do\xc4\x9fum Yeri",\n field: "birthCity",\n lookup: { 34: "\xc4\xb0stanbul", 63: "\xc5\x9eanl\xc4\xb1urfa" }\n }\n ]}\n components={{\n Row: props => (\n <MTableBodyRow\n {...props}\n onDoubleClick={() => {\n alert("Make row editable");\n }}\n />\n )\n }}\n editable={{\n onRowAdd: newData …推荐指数
解决办法
查看次数
如何在材料表中显示菜单项
我尝试了材质表，想在动作中添加一个菜单项，这样就不会显示太多编辑、删除等动作。我在显示菜单项时遇到问题。
示例代码：
<MaterialTable
columns={[
{ title: t('customer'), field: 'name' },
{ title: t('email'), field: 'email' },
{ title: t('contactNumber'), field: 'contactNumber' },
{ title: t('status'), field: 'status' },
]}
data={list}
options={{
headerStyle: {
backgroundColor: '#00b7b2',
},
toolbar: false,
}}
actions={[
{
icon: 'menu',
tooltip: 'Menu',
onClick: (event, rowData) => {
this.openMenu(event)
},
},
]}
components={{
Action: props => (
<div>
<IconButton
onClick={(event) => props.action.onClick(event, props.data)}
>
<Icon>menu</Icon>
</IconButton>
<Menu
anchorEl={this.anchorEl}
open={Boolean(this.anchorEl)}
onClick={event => event.stopPropagation()}
onSelect={event => event.stopPropagation()}
onClose={this.closeMenu}
>
<MenuItem> …推荐指数
解决办法
查看次数
反应材料表列可调整大小
我想知道如何在反应中调整材料表列的大小。请帮我。我尝试过以下代码
options={{
sorting:false,
resizable:true,
推荐指数
解决办法
查看次数
在 mat-table 的 table 标签中使用 multiTemplateDataRows 和 formArrayName 时出现错误
我一直在尝试将 multiTemplateDataRows 与反应式表单一起使用，并在 mat-table 的表标签中给出 formArrayName ，但出现错误Cannot find control with path: 'bankRelationData ->，
但是当我从表标记中删除multiTemplateDataRows指令时，这工作正常，请找到下面的代码
表.组件.html
<form [formGroup]="bankRelationForm">
<table mat-table [dataSource]="dataSource" multiTemplateDataRows formArrayName="bankRelationData" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element">
<div>
{{element.name}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell …frontend angular-material angular angular-reactive-forms material-table
推荐指数
解决办法
查看次数
材质表内部 onClick 仅显示最后一行值
所以我遇到的问题是我有一个自定义呈现的列，其中有一个菜单按钮，单击它会打开一个如下所示的菜单：
现在看下面的代码：
columns={[
{
title: 'Actions',
field: 'tableData.id',
render: rowData => {
return (
<div>
<IconButton aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
<MenuIcon />
</IconButton>
<Menu
className={classes.menu}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem className={classes.sendMail} onClick={()=>
{console.log(rowData)}}>
<ListItemIcon className={classes.icon}>
<SendIcon fontSize="default" />
</ListItemIcon>
Send Assessment Email
</MenuItem>
</Menu>
</div>
)
},
},
来自行（即 rowData）的值在 IconButton 组件的第一个 onClick 上很好，但无论我选择哪一行，MenuItem 的第二个 onClick 都只显示最后一个 rowData 值。任何帮助，将不胜感激。谢谢。
编辑：我已经部署了一个快速修复，方法是在 useState 内的 Menubutton 上设置所选行，然后将该值用于其他操作，但我想知道这是否是本机的，或者我应该说默认情况下可能，而不是我采取的方法。我尝试停止事件传播但徒劳。
推荐指数
解决办法
查看次数
如何在 MTableToolbar 上应用disableGutters 属性？
我正在使用 React Material-Table，并希望覆盖工具栏的默认样式以传递 propDisableGutters={true} ，就像我们在Material-ui Toolbar中所做的那样。这是我的代码
<MaterialTable
// other props
components={{
Toolbar: (props) => {
return (
<div>
<MTableToolbar {...props} style={{paddingLeft:"0px"}}/>
</div>
);
},
}}
/>
但去除排水沟填充物并不起作用。我也尝试过<MTableToolbar {...props} disableGutters={true}/>但没有任何效果。
推荐指数
解决办法
查看次数
如何更改 Material ui 自动完成中选项的字体大小？
您好，我在我的项目中使用材质表，我想知道如何更改材质 ui 自动完成中选项的字体大小。谢谢
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
];
推荐指数
解决办法
查看次数