Блог

У меня есть проект, в котором я должен использовать таблицу. Я использую material-table. Но, похоже, я не могу заставить его выглядеть правильно. Значки, необходимые для таблицы, не отображаются, и вместо этого я получаю несколько текстов-заполнителей.

Вот код, который я использую для отображения таблицы. У меня в проекте установлены material-table и material-icons.

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

Прямо на сайте написано, что делать с material-table

Добавить значки материалов Существует два способа использования значков в material-table: либо импортировать шрифт material icons с помощью html, либо импортировать значки материалов и использовать реквизит material-table icons.

HTML

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

или

Импорт значков материалов Значки могут быть импортированы для использования в таблице материалов, что обеспечивает большую гибкость при настройке внешнего вида таблицы материалов по сравнению с использованием библиотеки шрифтов.

Для установки @material-ui / icons с помощью npm:

 npm install @material-ui/icons --save
  

Для установки @material-ui / icons с помощью yarn:

 yarn add @material-ui/icons
  

Если ваша среда не поддерживает преобразование в дерево, рекомендуемый способ импорта значков следующий:

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

Если ваша среда поддерживает изменение дерева, вы также можете импортировать значки таким образом:

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

Примечание: Импорт именованных экспортов таким образом приведет к тому, что код для каждого значка будет включен в ваш проект, поэтому не рекомендуется, если вы не настроите «перетряхивание дерева». Это также может повлиять на производительность горячей перезагрузки модуля. Источник: @material-ui/icons

Пример

 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}
  ...
/>
  

этот подход работает для меня

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

Обновите интерфейс material до @material-ui/core@4.2.1 по yarn добавить @material-ui/core@4.2.1 и, надеюсь, это сработает

Чтобы заставить их работать, я добавил их вручную.

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

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

импортируйте в файл, где вам нужен значок

 import tableIcons from "components/Table/tableIcons";
  

используйте приведенный ниже код там, где это необходимо

  icon: tableIcons.AddNew,