标签: material-table

我在material-ui Stepper 中使用材料表，即使该表仍处于编辑模式，用户也倾向于单击“下一步”按钮。这会导致数据丢失。

当用户单击“下一步”按钮时，我能否以某种方式访问​​表信息以检查表/行是否仍处于编辑模式？

我正在尝试在我的项目中使用“材料表”。我的“图标”列包含图标名称。我需要通过从外部对话框中选择它来更改此图标。我在从外部对话框更新表数据时遇到问题。当我使用“输入”元素并更改图标名称时，它可以正常工作。

editComponent: props => (
  <input
    type="text"
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

我不知道如何通过我的对话框达到这个结果。我创建了以下片段项目来详细显示我需要的内容： https: //codesandbox.io/embed/gifted-liskov-ih72m

当我通过文本更改图标名称并保存更改时 - 就可以了。更改已保存。当我通过从外部对话框中选择图标并保存更改来更改图标时 - 它不起作用。

editComponent: props => (
  <SelectIconDialog
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

我不知道如何调用“SelectIconDilog”内的 props 给出的“onChange”。

export default function SelectIconDialog(props) {
    const { value, onChange } = props;
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(value);

    function handleClickOpen() {
        setOpen(true);
    }

    const handleClose = value => {
        setOpen(false);
        setSelectedValue(value);
        //onChange(value); // it doesn't work
    };

    return (
        <div>
            <Tooltip …

有没有办法从反应材料表中禁用/删除分页。我使用材料表插件进行反应，发现很难删除分页。任何帮助深表感谢

我在 react js https://material-ui.com/components/tables/#material-table 中使用材料表

我需要将用户重定向到该项目的单独编辑页面。

我不明白如何重定向到编辑页面。

动作覆盖功能允许我覆盖按钮，但它会覆盖所有动作按钮。例如，如果我有两个用于编辑和删除的操作按钮，并且我使用了操作覆盖，那么我的两个按钮都会被相同的自定义代码覆盖。如何为不同的按钮指定不同的代码？

我的最终目标是根据 rowData 有条件地禁用编辑和删除按钮。我尝试使用 isEditable 功能，如下面的代码所示，但它也不起作用。

  ...
  ....
  const components = {
       Action: props => (
           <IconButton aria-label="delete" size="small"
               disabled={props.data.email === 'admin@pipilika.com'}
               onClick={(event) => props.action.onClick(event, props.data)}
               >
               <Icon>delete</Icon>
           </IconButton>
       )

   };

   const actions = [
       {
           icon: 'edit',
           tooltip: 'Edit Index',
           onClick: (event, rowData) => {
               this.onEditClick(null, rowData._id);
           }
       },
       {
           icon: 'delete',
           tooltip: 'Delete Index',
           onClick: (event, rowData) => {
               this.onDeleteClick(null, rowData._id);
           }
       },
   ];


    const options= {
        showTitle: false,
        actionsColumnIndex: -1,
        searchFieldStyle: {
            color: "#fff"
        }
    };

    const …

我正在做一个项目，我基本上使用材料表界面来做 crud。我想知道有没有办法让我也可以设置必填字段？

我试过研究，但没有多少结果。请参阅下面的代码，该代码直接来自https://material-ui.com/components/tables/最后一个示例。当然，我已经修改了我的代码库供我个人使用并且一切正常，但是我不确定如果我也想要如何使字段成为必需的？如果是，我该怎么做？我会在 MaterialTable 上传递一些东西作为道具选项吗？

谢谢你的任何建议。

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', …

概括

我需要在用户处于编辑模式时出现的输入字段根据该行不同列的值而有所不同。例如，如果用户处于编辑模式并且Column X具有 value A，则Column Y应该是文本输入字段。但是，如果Column X具有 value B，则Column Y应该是下拉选择列表。重要的是，这不能影响任何其他行（即Column Y可能是该行的文本输入字段这一事实不应影响任何其他行的输入类型）。

小样

如果不清楚我要什么，这里有一个模型，显示了我所追求的功能。

1.目标类型是“组”，所以“目标”字段是数字条目

2. 目标类型是“地址”，所以“目标”字段是一个字符串选择列表。请注意，其他行条目不受影响（即它们仍然是数字字段）

更多详情

我正在创建一个照明控制应用程序，并使用材料表作为用户指定按钮可以执行的操作的手段（它可以是单个操作，在这种情况下，表将是单行或多个操作，在这种情况下，表将是多行）。他们可以控制存储在数据库中的单个设备，可以从下拉列表中选择，也可以控制一组设备，在这种情况下，他们可以手动输入他们希望控制的组的编号。

代码

此代码构成了模型的基础（上图）：

import React from "react";
import MaterialTable from 'material-table';

const devices = ["Device A (Stairs)", "Device B (Hallway)"];

export default class ControlSpecificationTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Step', field: 'step' },
        { title: 'Target Type', field: 'target_type', lookup: { 0: …

我在带有粘性标题的角度材料表上分叉了示例，并添加了更多数据。我看到标题不粘。在这里堆叠闪电战

任何人都知道标题如何保持粘性？

我在材料表中有一个列，其中包含成功、失败等值。基于这些值，我需要在单元格上应用颜色。 如何使用 material-table 实现它。

我一直在我的一个项目中使用材料表。

虽然我可以更改用户定义列的样式（字体大小、颜色），但我无法对“操作”列执行此操作。

我对改变字体大小特别感兴趣。

与分页相同的问题：我需要更改其字体大小，但似乎没有可用的选项。

请举一个例子：

https://material-ui.com/components/tables/#complementary-projects