mern admin panel

MERN-Admin-Panel

Fitur

• Halaman login dan desain tata letak dasar dilakukan dengan menggunakan Bootstrap

• JWT dan Paspor untuk Otentikasi

• Dapat didata dengan Paginasi Sisi Klien & Sisi Server

• Multi-sortir

• Filter

• Desain minimal

• Dapat dikontrol sepenuhnya melalui props opsional dan callback

Demo

Klik disini

Skrip yang Tersedia

Untuk memulai server dan klien secara bersamaan

npm run dev

Untuk Membangun aplikasi reaksi

cd klien dan jalankan

npm run build

Penggunaan sampel yang dapat didata dengan data statis

 import React, { Component, Fragment } dari 'react';import { render} dari 'react-dom';import ReactDatatable dari '@ashvin27/react-datatable';class App extends Component {constructor(props) {super(props) ;ini.kolom = [{kunci: "nama",teks: "Nama",namakelas: "nama",align: "kiri",dapat diurutkan: benar,},{kunci: "alamat",teks: "Alamat",namakelas: "alamat",sejajarkan: "kiri",dapat diurutkan: benar},{kunci: "kode pos",teks: "Kode Pos",namakelas: "kode pos",dapat diurutkan: benar} ,{key: "rating",teks: "Rating",className: "rating",align: "left",sortable: true},{key: "type_of_food",teks: "Jenis Makanan",className: "type_of_food ", dapat diurutkan: benar, sejajarkan: "kiri"},{kunci: "aksi",teks: "Aksi",namakelas: "aksi",lebar: 100,ratakan: "kiri",dapat diurutkan: salah,sel: rekam => { 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 = {ukuran halaman: 10,panjang_menu: [ 10, 20, 50 ],tombol: {excel: true,print: true}}this.state = {catatan: [ {"id": "55f14312c7447c3da7051b26","address": "228 City Road","name": ".CN Chinese","postcode": "3JH ","rating": 5,"type_of_food": "Cina" }, {"id": "55f14312c7447c3da7051b27","alamat": "376 Rayleigh Road","nama": "@ Thai","kode pos": "5PT","rating": 5.5,"type_of_food": "Thai" }, {"id" : "55f14312c7447c3da7051b28","alamat": "30 Greyhound Road Hammersmith","nama": "@ Restoran Thailand","kode pos": "8NX","rating": 4.5,"type_of_food": "Thai" }, {"id": "55f14312c7447c3da7051b29","address": "30 Greyhound Road Hammersmith"," nama": "@ Restoran Thailand","kode pos": "8NX","rating": 4,5,"type_of_food": "Thai" }]}}editRecord(record) {console.log("Edit Record", record);}deleteRecord(record) {console.log("Hapus Catatan", record);}render() {return (<div>< ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<App />, document.getElementById("aplikasi"));