13

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

enter image description here

5 Answers 5

19

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

<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 install @material-ui/icons --save

To install @material-ui/icons with yarn:

yarn add @material-ui/icons

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

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:

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. It may also impact Hot Module Reload performance. Source: @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}
  ...
/>
1
  • 1
    You need to import 'forwardRef' for this to work, otherwise error: 'forwardRef' is not defined
    – gene b.
    Commented Mar 4, 2021 at 18:31
9

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

Upgrade material UI to @material-ui/[email protected] by yarn add @material-ui/[email protected] and hopefully, it will work

1

To get them working, I added them manually.

0
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,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.