标签: material-table

我在我的应用程序中使用库材料表作为数据表。我正在设置数据道具以使用来自 this.state.data 的数据，并且添加行将通过使用 setState 在我的表上更新。但是在切换到远程数据后，表在添加行后不会更新。有没有另一种方法可以通过远程数据实现这一目标？

import React, {Component} from "react";
import MaterialTable from "material-table";
import Add from "@material-ui/icons/Add";
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
import Edit from "@material-ui/icons/Edit";
import FirstPage from "@material-ui/icons/FirstPage";
import ChevronRight from "@material-ui/icons/ChevronRight";
import LastPage from "@material-ui/icons/LastPage";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import Search from "@material-ui/icons/Search";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    data: []
  }
  render() {
  return (
    <MaterialTable
      columns={[
        {
          title: "Avatar",
          field: "avatar", …

Material-Table 中的所有内容都运行良好，但我找不到禁用列标题拖放的道具/选项。我只需要它保持与代码中提供的相同

这是我的列和选项道具的样子：

columns={[
  {title: 'Name', field: 'name', defaultSort: 'asc'},
  {title: 'Code', field: 'code'},
  {title: 'Type', field: 'type.value'},
  {title: 'Regions', field: 'regions', sorting: false},
  {title: 'Currency', field: 'currencyCode'},
]},
options={{
  showTitle: false,
  actionsColumnIndex: -1
}}

使用材料表库。我想复制此示例中显示的行为。

https://codesandbox.io/s/table-hover-colors-zw9nt

https://www.npmjs.com/package/material-table https://material-table.com/#/

我在考虑使用 onRowClick={}

逻辑是

onRowClick =>

1. 在组件状态中设置值，将单击的行背景呈现为不同的颜色
2. 将所有其他行设置为背景为原始颜色

我可以使用基于状态中保持的值的条件渲染来更改背景。尽管这会更改所有行的背景。

options={
   rowStyle:{backgroundColor: this.state.selected ? '#fff' : this.state.c}
}

我当前的工作示例在这里 https://codesandbox.io/s/peaceful-haibt-2nefw

谢谢你的帮助

我可以更改 React Material-Table 表标题列上的默认排序图标吗？前任。我想将 asc 排序图标更改为 ArrowDownward，将 desc 排序图标更改为 ArrowUpward。我尝试在 MaterialTable 上设置 SortArrow 图标道具，但它会显示在每个表格标题列上，即使它不是活动的排序列。请帮忙。

材料表

代码：

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

我正在使用材料表（https://material-table.com/）。

我的问题是我想更改表格边框半径和表格阴影，显然，使用“选项功能”不存在此选项

但是当我检查表格时，我可以修改半径和阴影，如下所示：

我想知道如何从 Reactjs 覆盖这些值：

const useStyles = makeStyles(theme => ({
  root: {
  }
}));


const MainTable = props => {
  const {className, params, ...rest} = props

(...)
  return (
    <MaterialTable
      className={classes.MuiPaperRounded}
      columns={[
        {title: 'Equipement', field: 'equipement'},
        {title: 'TAG', field: 'tag'},
        {title: 'Nombre de points de mesures', field: 'nombreDePointsDeMesures'},
        {title: 'Mesuré', field: 'mesure', type: 'boolean'}
      ]}
      data={rows}
      icons={(...)}
      options={{
        tableLayout: {backgroundColor: 'green'},
      }}
      title="Routine vibration"
    />
  );
};

对于材质表，我想去除桌子周围的阴影。我怎么能这样做，因为我在文档中发现并添加到 CSS 中的内容不起作用。或者我想添加键盘快捷键，以便我可以使用箭头键在行之间移动并使用 shift 选择。可用于角度步骤的东西在我的桌子上不起作用，甚至不会写错误。

这是我为消失找到的代码之一，但不幸的是，与其他 CSS 解决方案一样，它也不起作用：

mat-table{
  transition: none !important;
  box-shadow: none !important;
}

是否有我可以用来解决这些功能的解决方案或文档？

这就是到目前为止的样子，我试图隐藏单选按钮并使用男性和女性的图像。这是 mat-radio-group 的 html 代码：

   <mat-radio-group formControlName="gender">
            <mat-label>
              <mat-radio-button class="female-radio" value="M"></mat-radio-button>
              <img width="100" src={{imageTwo}}>
              </mat-label>
              <mat-label>
                <mat-radio-button class="female-radio" value="F"></mat-radio-button>
                <img width="100" src={{imageOne}}>
              </mat-label>
          </mat-radio-group>

在我的 scss 组件中我做了：

.female-radio + img {
  cursor: pointer;
}

.mat-radio-checked + img {
  outline: 2px solid #f00;
}

我该怎么做才能只显示图像来选择性别？

使用材料表（https://material-table.com/#/docs/features/component-overriding），我试图覆盖表的某个组件。它呈现得很好，但我想摆脱 intellij 向我抛出的 eslint 错误，而不仅仅是忽略/禁用它。

错误：

ESLint：组件定义缺少显示名称（反应/显示名称）

  ...
  return (
    <div className={classes.rootDiv}>
      <div className={classes.mainTableContainer}>
        <MainTable
          components={{
            Settings: (props) => <TableSettings name={'Steven'} {...props} /> // <- Error near (props)
          }}
          ...

表设置

import React from 'react';

const TableSettings = (props) => {

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
};

export default TableSettings;

目前我有一个简单的材料表，如下所示：

<MaterialTable
    options={myOptions}
    title="MyTitle"
    columns={state.columns}
    data={state.data}
    tableRef={tableRef} // Not working
    editable={{
      onRowAdd: ...,
      onRowDelete: ...,
      onRowUpdate: ...
    }}
  />;

我正在尝试创建新的添加按钮（而不是编辑当前按钮）：栏列中的每一行都应该有一个自定义添加按钮。我查看了 MaterialTable 源代码，但无法重现用于默认添加按钮的代码：

        calculatedProps.actions.push({
          icon: calculatedProps.icons.Add,
          tooltip: localization.addTooltip,
          position: "toolbar",
          disabled: !!this.dataManager.lastEditingRow,
          onClick: () => {
            this.dataManager.changeRowEditing();
            this.setState({
              ...this.dataManager.getRenderState(),
              showAddRow: !this.state.showAddRow,
            });
          },
        });

特别是我无法访问该dataManager变量。

这就是当前表格的样子，我需要在有红色标志的地方添加添加按钮。

我正在尝试使用 formArray 作为输入数据源在角度材料表上实现排序/过滤。

StackBlits 代码链接

dataSource = new MatTableDataSource([]);
<table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort >
<ng-container  matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" >
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{ element.value[column] }}  </td>
</ng-container>

但排序/过滤不起作用