mern admin panel

MERN-Admin-Panel

Merkmale

• Anmeldeseite und grundlegendes Layout-Design mithilfe von Bootstrap

• JWT und Passport zur Authentifizierung

• Datierbar mit clientseitiger und serverseitiger Paginierung

• Mehrfachsortierung

• Filter

• Minimales Design

• Vollständig steuerbar über optionale Requisiten und Rückrufe

Demo

Klicken Sie hier

Verfügbares Skript

Um Server und Client gleichzeitig zu starten

npm run dev

So erstellen Sie eine Reaktionsanwendung

CD-Client und ausführen

npm run build

Verwendung von datierbaren Beispielen mit statischen Daten

 import React, { Component, Fragment } from 'react';import { render} from 'react-dom';import ReactDatatable from '@ashvin27/react-datatable';class App erweitert Component {constructor(props) {super(props) ;this.columns = [{key: "name",text: "Name",className: "name",align: "left",sortable: true,},{key: "address",text: "Adresse",className: "address",align: "left",sortable: true},{key: "postcode",text: "Postcode",className: "postcode",sortable: true},{key: "rating ",text: "Rating",className: "rating",align: "left",sortable: true},{key: "type_of_food",text: "Type of Food",className: "type_of_food",sortable: true, ausrichten: "left"},{key: "action",text: "Action",className: "action",width: 100,align: "left",sortable: false,cell: 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 ],button: {excel: true,print: true}}this.state = {records: [ {"id": "55f14312c7447c3da7051b26", "address": "228 City Road", "name": ".CN Chinese", "postcode": "3JH ","rating": 5,"type_of_food": "Chinesisch" }, {"id": „55f14312c7447c3da7051b27“, „address“: „376 Rayleigh Road“, „name“: „@ Thai“, „postcode“: „5PT“, „rating“: 5.5, „type_of_food“: „Thai“ }, {“id“ : „55f14312c7447c3da7051b28“, „address“: „30 Greyhound Road Hammersmith“, „Name“: „@ Thai Restaurant“, „Postleitzahl“: „8NX“, „Rating“: 4.5, „type_of_food“: „Thai“ }, {“id“: „55f14312c7447c3da7051b29“, „Adresse“: „ 30 Greyhound Road Hammersmith“, „Name“: „@ Thai Restaurant“, „Postleitzahl“: „8NX“, „Bewertung“: 4.5,"type_of_food": "Thai" }]}}editRecord(record) {console.log("Edit Record", record);}deleteRecord(record) {console.log("Delete Record", record);}render () {zurückkehren (<div><ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<App />, document.getElementById("app "));