mern admin panel

Painel de administração MERN

Características

• Página de login e design de layout básico feito usando Bootstrap

• JWT e passaporte para autenticação

• Tabela de dados com paginação do lado do cliente e do lado do servidor

• Multiclassificação

• Filtros

• Design minimalista

• Totalmente controlável através de adereços e retornos de chamada opcionais

Demonstração

Clique aqui

Script Disponível

Para iniciar o servidor e o cliente simultaneamente

npm run dev

Para construir um aplicativo react

cd cliente e execute

npm run build

Uso de amostra de tabela de dados com dados estáticos

 importar React, {Component, Fragment} de 'react';importar {render} de 'react-dom';importar ReactDatatable de '@ashvin27/react-datatable';class App estende Componente {construtor(props) {super(props) ;this.columns = [{chave: "nome",texto: "Nome",className: "nome",align: "esquerda",classificável: verdadeiro,},{chave: "endereço",texto: "Endereço",className: "address",align: "left",classificável: true},{key: "postcode",text: "Postcode",className: "postcode",classificável: true},{key: "classificação ",text: "Classificação",className: "rating",align: "left",classificável: true},{key: "type_of_food",text: "Tipo de alimento",className: "type_of_food",classificável: true, alinhar: "left"},{key: "action",text: "Action",className: "action",width: 100,align: "left",classificável: 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 ],botão: {excel: true,print: true}}this.state = {registros: [ {"id": "55f14312c7447c3da7051b26","endereço": "228 City Road","nome": ".CN Chinês","código postal" : "3JH","rating": 5,"type_of_food": "Chinês" }, {"id": "55f14312c7447c3da7051b27","endereço": "376 Rayleigh Road","nome": "@ Thai","código postal": "5PT","rating": 5.5,"type_of_food": "Thai" }, {"id" : "55f14312c7447c3da7051b28","endereço": "30 Greyhound Road Hammersmith","nome": "@ Restaurante Tailandês","código postal": "8NX","rating": 4.5,"type_of_food": "Thai" }, {"id": "55f14312c7447c3da7051b29","endereço" : "30 Greyhound Road Hammersmith","nome": "@ Restaurante Tailandês","código postal": "8NX","classificação": 4.5,"type_of_food": "Thai" }]}}editRecord(record) {console.log("Edit Record", record);}deleteRecord(record) {console.log("Delete Record", record);}renderizar () {retornar (<div><ReactDatatableconfig={this.config}records={this.state.records}columns={this.columns}/></div>)}}render(<App />, document.getElementById("app "));