mern admin panel

MERN 管理者パネル

特徴

• ブートストラップを使用したログインページと基本レイアウトの設計

• 認証用のJWTとパスポート

• クライアント側とサーバー側のページネーションを備えたデータテーブル

• マルチソート

• フィルター

• ミニマルなデザイン

• オプションのプロパティとコールバックを介して完全に制御可能

デモ

ここをクリック

利用可能なスクリプト

サーバーとクライアントを同時に起動するには

npm run dev

反応アプリケーションを構築するには

CDクライアントを実行して実行します

npm run build

静的データを使用したデータテーブルのサンプルの使用法

import React, { Component, Fragment } from 'react';import { render} from 'react-dom';import ReactDatatable from '@ashvin27/react-datatable';class App extends Component {constructor(props) {super(props) ;this.columns = [{key: "名前",text: "名前",className: "名前",align: "left",sortable: true,},{key: "住所",text: "住所",className: "住所",align: "left",sortable: true},{key: "郵便番号",text: "郵便番号",className: "郵便番号",sortable: true},{key: "評価",text: "評価",className: "評価",align: "left",sortable: true},{key: "type_of_food",text: "食品の種類Food",className: "type_of_food",sortable: true,align: "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 中国語","郵便番号": "3JH","評価": 5,"食品の種類": "中華" }, {"id": "55f14312c7447c3da7051b27","住所": "376 Rayleigh Road","名前": "@ Thai","郵便番号" : "5PT","評価": 5.5,"食べ物の種類": "タイ料理" }, {"id": "55f14312c7447c3da7051b28","address": "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant"、"郵便番号": "8NX"、"評価": 4.5、"type_of_food": "タイ料理" }, {"id": "55f14312c7447c3da7051b29","住所": "30 Greyhound Road Hammersmith","名前": "@ Thai Restaurant"、"郵便番号": "8NX"、"評価": 4.5、"type_of_food": "タイ料理" }]}} editRecord(レコード) {console.log("レコードの編集", Record);}deleteRecord(record) {console.log("レコードの削除", Record);}render() {return (<div><ReactDatatableconfig={this.config}records={this.state.records}columns= {this.columns}/></div>)}}render(<App />, document.getElementById("app"));