mern admin panel

Panneau d'administration MERN

Caractéristiques

• Conception de la page de connexion et de la mise en page de base réalisée à l'aide de Bootstrap

• JWT et passeport pour l'authentification

• Datatable avec pagination côté client et côté serveur

• Multi-tri

• Filtres

• Conception minimale

• Entièrement contrôlable via des accessoires et des rappels en option

Démo

Cliquez ici

Script disponible

Pour démarrer le serveur et le client simultanément

npm run dev

Pour créer une application de réaction

client cd et exécutez

npm run build

Exemple d'utilisation datatable avec des données statiques

 importer React, { Component, Fragment } depuis 'react'; importer { render} depuis 'react-dom'; importer ReactDatatable depuis '@ashvin27/react-datatable'; l'application de classe étend le composant {constructor (props) {super (props) ;this.columns = [{key: "name",text: "Name",className: "name",align: "left",triable: true,},{key: "adresse", texte : "Adresse", nom de classe : "adresse", aligner : "gauche", triable : vrai}, {clé : "code postal", texte : "code postal", nom de classe : "code postal", triable : vrai} ,{key: "rating",text: "Rating",className: "rating",align: "left",sortable: true},{key: "type_of_food",text: "Type of Food",className: "type_of_food", triable : "true", aligner : "gauche"}, {clé : "action", texte : "Action", nom de classe : "action", largeur : 100, aligner : "gauche", triable : faux, cellule : record => { return (<Fragment><buttonclassName="btn btn-primary btn-sm"onClick={() => this.editRecord(record)}style={{marginRight: '5px'}}><i className="fa fa-edit"></i></button><button className="btn btn-danger btn-sm " onClick={() => this.deleteRecord(record)}><i className="fa fa-trash"></i></button></Fragment>);}}];this.config = {page_size : 10,length_menu : [ 10, 20, 50 ],bouton : {excel : true,print : true}}this.state = {records : [ {"id": "55f14312c7447c3da7051b26", "address": "228 City Road","name": ".CN Chinois","postcode": "3JH","rating": 5,"type_of_food": "Chinois" }, {"id": "55f14312c7447c3da7051b27","address": "376 Rayleigh Road","name": "@ Thai","postcode": "5PT","rating": 5.5,"type_of_food" : "Thaï" }, {"id": "55f14312c7447c3da7051b28","address": "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant","postcode": "8NX","rating": 4.5,"type_of_food": "Thai" }, {"id": "55f14312c7447c3da7051b29","address" : "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant","postcode": "8NX","rating": 4.5,"type_of_food": "Thaï" }]}}editRecord(record) {console.log("Edit Record", record);}deleteRecord(record) {console.log("Delete Record", record);}render() {return (<div>< ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<App />, document.getElementById("app"));