J'ai un projet où je dois utiliser une table. J'utilise la table de matières. Mais je n'arrive pas à avoir l'air correct. Les icônes nécessaires pour le tableau ne s'affichent pas et à la place, j'obtiens des textes d'espace réservé.
Voici le code que j'utilise pour afficher le tableau. J'ai installé des icônes de table de matériaux et de matériaux dans le projet.
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>;
}
}
4 Réponses :
Mettez à niveau l'interface utilisateur matérielle vers @ material-ui / core @ 4.2.1 par yarn add @ material-ui / core @ 4.2.1 et j'espère que cela fonctionnera
Pour les faire fonctionner, je les ai ajoutés manuellement.
Il dit directement sur le site ce qu'il faut faire material-table
Ajouter des icônes de matériaux Il y a deux façons d'utiliser les icônes dans Material-table, soit importer la police d'icônes de matériaux via html, soit importer des icônes de matériaux et utiliser l'accessoire d'icônes de material-table.
HTML
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}
...
/>
OU
Importer des icônes de matériaux Les icônes peuvent être importées pour être utilisées dans la table de matériaux, offrant plus de flexibilité pour personnaliser l'aspect et la convivialité de la table de matériaux par rapport à l'utilisation d'une bibliothèque de polices.
Pour installer @ material-ui / icons avec npm:
import { AddBox, ArrowDownward } from "@material-ui/icons";
Pour installer @ material-ui / icons avec du fil:
import AddBox from "@material-ui/icons/AddBox"; import ArrowDownward from "@material-ui/icons/ArrowDownward";
Si votre environnement ne prend pas en charge l'arborescence, la méthode recommandée pour importer les icônes est la suivante:
yarn add @material-ui/icons
Si votre environnement prend en charge l'arborescence, vous pouvez également importer les icônes de cette manière:
npm install @material-ui/icons --save
Remarque: L'importation d'exportations nommées de cette manière entraînera l'inclusion du code de chaque icône dans votre projet, ce n'est donc pas recommandé, sauf si vous configurez la secousse d'arbre. Cela peut également avoir un impact sur les performances de rechargement du module à chaud. Source: @ material-ui / icons
Exemple
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
cette approche fonctionne pour moi
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
})
]}