简体   繁体   English

React 材料表不显示表格图标

[英]React material-table is not displaying table icons

I have a project where I have to use a table.我有一个必须使用表格的项目。 I am using material-table.我正在使用材料表。 But I can't seem to get it to look right.但我似乎无法让它看起来正确。 The icons that are needed for the table are not showing and instead I get some placeholder texts.表格所需的图标没有显示,而是我得到了一些占位符文本。

Here is the code I am using to show the table.这是我用来显示表格的代码。 I have material-table and material-icons installed in the project.我在项目中安装了材料表和材料图标。

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 });
    });
  }

  rowClickedHandler(rowData) {
    this.props.history.push("/RegistrationDetail/" + rowData._id);
  }

  render() {
    let table = (
      <MaterialTable
        title="Overzicht"
        columns={[
          { title: "familienaam", field: "name" },
          { title: "kinderen", field: "childeren" },
          { title: "dorp", field: "city" },
          { title: "postcode", field: "postalCode" },
          { title: "straat", field: "street" },
          { title: "nr.", field: "houseNumber" },
        ]}
        data={this.state.registrations}
        options={{
          search: true,
        }}
        onRowClick={(event, rowData) => this.rowClickedHandler(rowData)}
      />
    );
    return <div>{table}</div>;
  }
}

在此处输入图像描述

It says right on the site what to do material-table它在网站上说要做什么材料表

Add material icons There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table icons prop.添加材质图标有两种方法可以在材质表中使用图标,要么通过 html 导入材质图标字体,要么导入材质图标并使用材质表图标属性。

HTML HTML

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

OR要么

Import Material icons Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.导入材料图标 可以导入图标以在材料表中使用,从而比使用字体库更灵活地自定义材料表的外观。

To install @material-ui/icons with npm:使用 npm 安装 @material-ui/icons:

npm install @material-ui/icons --save

To install @material-ui/icons with yarn:使用纱线安装@material-ui/icons:

yarn add @material-ui/icons

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:如果你的环境不支持 tree-shaking,推荐的导入图标的方法如下:

import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";

If your environment support tree-shaking you can also import the icons this way:如果你的环境支持 tree-shaking,你也可以这样导入图标:

import { AddBox, ArrowDownward } from "@material-ui/icons";

Note: Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking.注意:以这种方式导入命名导出将导致每个图标的代码都包含在您的项目中,因此不推荐使用,除非您配置了 tree-shaking。 It may also impact Hot Module Reload performance.它还可能影响热模块重新加载性能。 Source: @material-ui/icons来源:@material-ui/icons

Example例子

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
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 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 tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

<MaterialTable
  icons={tableIcons}
  ...
/>

this approach is working for me这种方法对我有用

 import DeleteIcon from '@material-ui/icons/Delete';

actions={[
        
        rowData => ({
          icon: DeleteIcon,
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
          disabled: rowData.birthYear < 2000
        })
      ]}

Upgrade material UI to @material-ui/core@4.2.1 by yarn add @material-ui/core@4.2.1 and hopefully, it will work通过 yarn add @material-ui/core@4.2.1 将 Material UI 升级到 @material-ui/core@4.2.1,希望它能工作

To get them working, I added them manually.为了让它们工作,我手动添加了它们。

import and add icon to tableIcons.js file
import AddIcon from '@mui/icons-material/Add';

AddNew: forwardRef((props, ref) => <AddIcon {...props} ref={ref} />),  

import into the file where you need the icon导入到需要图标的文件中

import tableIcons from "components/Table/tableIcons";

use with bellow code where needed在需要的地方使用波纹管代码

 icon: tableIcons.AddNew,

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM