标签: material-table

我正在将材料表（https://material-table.com/#/）用于反应项目，并且我已经导入了我需要使用的图标，但是在操作栏中，操作显示为纯文本，并且不是作为材料图标。

import React, { forwardRef } from 'react';
import MaterialTable from 'material-table';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Print from '@material-ui/icons/Print';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const Table …

我正在meterial-table与React. 我正在尝试从来自这样的 api 的数组中分配数据

<MaterialTable
  columns={columns}
  data={rows}
  ...
/>

在哪里columns和rows在API数据。但我收到此错误：

TypeError: Cannot add property tableData, object is not extensible

值得注意的是，当我使用模拟硬编码数据时，一切正常。经过一番搜索，我找不到任何解决方案，有什么帮助吗？

我正在将材料表（npm 最新 v1.69.3）与 MUI v5.0.6 一起使用，因为我需要一个可编辑的表。我在控制台中收到此消息。

它说 import alpha 但由于在材质表中使用了 fade，这是一个 npm 包，我不知道在这里该怎么做。

我想知道的是为什么会发生这个错误，如何消除这个错误并解决问题。有人可以帮我吗？

我正在使用材料表，我需要更改操作列名称，但此列是自动生成的，因为我使用的是材料表中的可编辑功能。

<MaterialTable
    title=""
    localization={{
      body: {
        editRow: {
          saveTooltip: "Salvar",
          cancelTooltip: "Cancelar",
          deleteText: "Tem certeza que deseja deletar este registro?"
        },
        addTooltip: "Adicionar",
        deleteTooltip: "Deletar",
        editTooltip: "Editar"
      }
    }}
    columns={state.columns}
    data={state.data}
    editable={{
      onRowAdd: newData => createInstructor(newData),
      onRowUpdate: async (newData, oldData) =>
        updateInstructor(newData, oldData),
      onRowDelete: oldData => deleteInstructor(oldData)
    }}
  />

如何更改这些图标和列名？

我正在尝试将数据动态添加到 Material-Table 组件中的查找属性，但我发现了一些问题。

查找是一个对象，您可以在第一个示例https://mbrn.github.io/material-table/#/docz-examples-06-example-filtering 中找到它的定义

但是，如果您尝试在外部创建该对象，然后将其分配给查找，则会出现错误。

那么，有没有办法将一个对象数组分配给这个查找属性？

提前感谢您的时间，任何指导将不胜感激。

此致

我正在尝试将 react material-table ( https://github.com/mbrn/material-table ) 与我的项目集成。

1. 我想更新样式/主题。

我用过类似的东西。

<MaterialTable options={{
                        rowStyle: x => {
                            if ( x.id % 2 ) {
                            return { backgroundColor: "#f2f2f2" }
                            }
                        },
                        'headerStyle' : {
                            backgroundColor: 'red',
                            color: theme.palette.common.white
                        }
                        }}
    columns={columns}
    data={data}
    title="New Table"
/>

但是我想要一个通用的样式和主题，比如

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

基本上我想要像 CustomMaterialTable 这样的东西，它只是我的主题/风格。

2. 条带化表格行。在上面的代码片段中，我使用了一个逻辑来分割行。

if ( x.id % 2 ) {
    return { backgroundColor: "#f2f2f2" }
} …

自定义分页的任何示例？材料表和reactjs。我想将页面大小传递给服务器，并且需要隐藏分页中的第一个和最后一个按钮

我正在使用 React + Material Table。

我的问题

• 有没有办法根据页面上的可用空间动态设置pageSize？
• 如果没有 API 可以这样做 - 如何从组件设计的角度更好地解决这个问题？

我想要达到什么目标？

材料表中显示的行数应取决于屏幕尺寸。根据您的屏幕尺寸，页面看起来不会相似（例如，在笔记本电脑上它可能看起来不错，但在 25 英寸显示器上会有很多空间可以由行填充）。

我已经做了什么？

• 我搜索了官方文档，但找不到解决方案。
• 我也在寻找开发人员帖子和其他 SO 主题 - 仍然没有结果。

当然，可以构建一个脚本，根据容器大小和行大小进行一些简单的计算以填充尽可能多的行，但我想避免这种解决方案，并尽可能使用开箱即用的东西。

我已经研究了许多有关弹出窗口锚定的问题，但在使用材料表库中的 MaterialTable 元素时我没有看到任何问题： https: //github.com/mbrn/material-table。

在调试时，anchorEl 看起来正确地保存了按钮引用，但它似乎第二次重新渲染并丢失了引用。据我所知，这是由于按钮被重新安装所致。所以最终的渲染默认将弹出框放在屏幕的左上角。我想知道是否有人找到了阻止这种重新安装或其他解决方法的方法。

export class UsersList extends Component {
constructor(props) {
super(props);
this.state = {
  anchorEl: null,
  anchorReference: "anchorEl"
};
}



render() {
const { classes } = this.props;
var { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
  <MaterialTable
    isLoading={this.state.isLoading}
    columns={[
      { title: "Username", field: "username" },
      ...more columns
    ]}
    data={this.state.users}
    onRowClick={(evt, selectedRow) => this.setState({ selectedRow })}


    //where I update my anchorEl on a click on the "edit" icon
    actions={[
      {
        icon: …

例如，是否可以向自定义操作添加确认

actions={[
    {
      icon: 'save',
      tooltip: 'Confirm',
      onClick: (event, rowData) => { /* something */}
    }
  ]}

我想要类似的东西editable.onRowDelete：

编辑：我想在actions财产中创建自己的操作。例如 的动作Cancel reservation。单击此操作按钮后，此行会像上面一样更改并等待接受。确认后做一些事情（例如发布到 API）。