mern admin panel

MERN-Админ-Панель

Функции

• Страница входа и базовый дизайн макета выполнены с использованием Bootstrap.

• JWT и паспорт для аутентификации

• Таблица данных с разбиением на страницы на стороне клиента и на стороне сервера

• Мультисортировка

• Фильтры

• Минимальный дизайн

• Полностью управляемый с помощью дополнительных реквизитов и обратных вызовов.

Демо

Кликните сюда

Доступный скрипт

Чтобы запустить сервер и клиент одновременно

npm run dev

Создать реагирующее приложение

cd-клиент и запустите

npm run build

Использование выборки с возможностью получения данных со статическими данными

 импортировать React, {Компонент, Фрагмент} из «реагировать»; импортировать {рендеринг} из «реагировать-дом»; импортировать ReactDatatable из «@ashvin27/react-datatable»; класс App расширяет компонент {конструктор (реквизит) {супер (реквизит) ;this.columns = [{key: "name",text: "Name",className: "name",align: "left",sortable: true,},{key: «адрес», текст: «Адрес», имя класса: «адрес», выравнивание: «по левому краю», сортировка: правда}, {ключ: «почтовый индекс», текст: «почтовый индекс», имя класса: «почтовый индекс», сортировка: правда} ,{key: "рейтинг",текст: "Рейтинг",className: "рейтинг",align: "left",sortable: true},{key: "type_of_food",text: "Тип еды",className: "type_of_food",sortable: true,align: "left"},{key: "action",text: "Action",className: "action",ширина: 100,align: "left",sortable: false,cell: запись => { 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": "Chinese" }, {"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","postcode": "8NX","rating": 4.5,"type_of_food": "Thai "  },  {"идентификатор": "55f14312c7447c3da7051b29","address": "30 Greyhound Road Hammersmith","name": "@ Thai Restaurant","postcode": "8NX","rating": 4.5,"type_of_food": "Thai" }]}} editRecord(запись) {console.log("Редактировать запись", запись);}deleteRecord(запись) {console.log("Удалить запись", запись);}render() {return (<div><ReactDatatableconfig={this.config}records={this.state.records}columns= {this.columns}/></div>)}}render(<App />, document.getElementById("app"));