2
votes

React Data Grid montre mauvais

J'ai un problème avec le composant ReactDataGrid. J'ai déjà installé react-data-grid. Le code est le même que dans le site Web de la grille reac:

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' }];

const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];


class App extends React.Component {
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={3}
        minHeight={150} />
    )
  }
}

export default App;

et j'obtiens: Résultat

Merci!

reactjs grid react-data-grid

2 commentaires

On dirait un problème de css

Votre code est le même que celui des documents et il n'a pas besoin d'importer le style manuellement, vous pouvez donc vérifier que css se charge dans l'onglet réseau du navigateur ou vous pouvez réinstaller le package.

4 Réponses :

0
votes

    import React from "react";
    import ReactDOM from "react-dom";
    import ReactDataGrid from "react-data-grid";

    const columns = [
      { key: "id", name: "ID", editable: true },
      { key: "title", name: "Title", editable: true },
      { key: "count", name: "Count", editable: true }
    ];

    const rows = [
      { id: 0, title: "row1", count: 20 },
      { id: 1, title: "row1", count: 40 },
      { id: 2, title: "row1", count: 60 }
    ];

    class App extends React.Component {
      render() {
        return (
          <ReactDataGrid
            columns={columns}
            rowGetter={i => rows[i]}
            rowsCount={3}
            minHeight={150}
            enableCellSelect={true}
          />
        );
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/rdg-cell-editing-h8bnrthe answer is in the above code this above code is working

4 commentaires

il semble que le problème soit mon projet. Je lance le même code dans codesandbox et cela fonctionne bien, mais dans mon projet, cela ne fonctionne pas :(

essayez d'utiliser l'élément inspect et trouvez où est le problème

ou essayez de déboguer la chose en utilisant la stratégie de division pour conquérir

salut! Je rétrograde la version react-data-grid et maintenant cela fonctionne très bien! Merci!

0
votes

Vous n'avez pas vraiment besoin de rétrograder. Le problème est que le css n'est pas importé. Si vous pouvez importer du CSS à partir de modules de nœuds, cela fonctionnera. La solution de contournement pour moi était que j'ai pris tout le css et que nous maintenons automatiquement le css, en apportant des modifications si nécessaire.

0 commentaires

3
votes

Importez le CSS comme ceci:

import 'react-data-grid/dist/react-data-grid.css';

Ça devrait aller.

0 commentaires

0
votes

Je ne pouvais pas non plus charger le css, j'ai contourné cela en incluant

import ReactDataGrid from 'react-data-grid';

au lieu de

import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';

0 commentaires