标签: material-table

我正在尝试将 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 主题 - 仍然没有结果。

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

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

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

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

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

我正在尝试使用 Material-Table 组件 - 它非常适合我正在构建的表格（添加、编辑、删除和搜索行）。我已经安装并使用它作为页面的子组件 - 一切正常，但是......

样式：页面中的所有自定义和内置样式在所有 Material UI 组件中都丢失了（即 AppBar 按钮之间没有填充/间距，自定义字体样式混乱）。

图标：表格中的图标不会呈现 - 它们只是显示为大截断文本。

没有表格的其他页面上的样式和图标不受影响。

有人有解决办法吗？提前致谢。

对于图标，我尝试重新安装库并导入。也试过把 html 方法。材料表代码的片段如下。

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Study',
      onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?") 
    },
    rowData => ({
      icon: 'clear',
      tooltip: 'Delete User',
      onClick: (event, rowData) => alert("You want to delete " + rowData.name), 
      disabled: rowData.birthYear < 2000
    })
  ]}
  editable={{
    onRowAdd: newData =>
      new Promise(resolve => …

我想做这个（选定的一些动作和每一行的一些动作）。请帮忙，谢谢！

我用material-table用ReactJS。现在我对每一行都有没有选择的动作，如果添加选择道具，这些动作就会消失。我不知道如何将每一行动作与多个动作结合起来。

我有一个项目，我必须使用一张桌子。我正在使用材料表。但我似乎无法让它看起来正确。表格所需的图标没有显示，而是我得到了一些占位符文本。

这是我用来显示表格的代码。我在项目中安装了材料表和材料图标。

class RegistrationList extends Component {
  state = {
    registrations: [],
  };

  infoButtonHandler(id) {}

  componentDidMount() {
    axios.get("http://localhost:3030/api/items").then((res) => {
      let registrations = [];
      res.data.forEach((registration) => {
        let childeren = "";
        for (let i = 0; i < registration.childeren.length; i++) {
          childeren += registration.childeren[i].name;
          if (i + 1 !== registration.childeren.length) {
            childeren += ", ";
          }
        }
        registrations.push({
          _id: registration._id,
          name: registration.name,
          childeren: childeren,
          street: registration.street,
          houseNumber: registration.houseNumber,
          city: registration.city,
          postalCode: registration.postalCode,
        });
      });
      this.setState({ registrations: registrations });
    });
  } …

我们有一个要求显示2列的总和

import MaterialTable, {MTableToolbar, MTableAction} from "material-table";
.
.
.
<MaterialTable
            actions={transformActions()}
            data={data}
            editable={props.allowRowEditing ? {
                onRowAdd: newData => onRowAdd(newData),
                onRowDelete: oldData => onRowDelete(oldData),
                onRowUpdate: (newData, oldData) => onRowUpdate(newData, oldData)
            } : {}}
            icons={tableIcons}
.
.
./>

我有一个计算总数并显示总数的函数；然而，在对列进行排序时，显示总数的行也会移动。有没有办法修复材料表本身的最后一行？或者有什么风格技巧可以实现这一目标吗？

根据下面的问题报告，目前还没有任何方法可以使用材质表的属性来实现此目的

Github 问题#27

请注意，我不能随意使用另一个表库。

我尝试定位最后一行并将其位置设置为绝对位置，如下所示

    position: absolute;
    height: 55px;
    width: calc(100% - 1px);
    bottom: 0;

虽然这将最后一行固定在其位置，但我找不到一种动态方法来根据其他行对齐列。

我必须使用哪个组件，才能使用材质表组件在鼠标悬停在一行上时获得一行中的突出显示？

我找不到任何属性或覆盖哪个组件来获取它。

预先感谢您抽出时间 最好的问候

这是代码https://codesandbox.io/s/yv13zjr9w9

我正在看这个例子，我的问题是粘性标题。例子： https: //material-table.com/#/docs/features/fixed-columns

我试图弄清楚是否可以将名称高达 BirthPlace 的标题粘贴下来，这样当我创建滚动条时，它就会保留在那里。我尝试了一切，但它总是给我不同的结果。任何帮助都会很棒

class BasicFixedColumns extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n    }\n  }\n\n  render() {\n    return (\n      <MaterialTable\n        title="Basic Fixed Columns Preview"\n        columns={[\n          { title: \'Name\', field: \'name\', width: 150 },\n          { title: \'Surname\', field: \'surname\', width: 150 },\n          { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\', width: 150 },\n          {\n            title: \'Birth Place\',\n            field: \'birthCity\',\n            lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n            width: 150\n          },\n          { title: \'Name\', field: \'name\', width: …