This question is based on react js. Please don't do it if you don't have thorough knowledge of React,node,mongodb, express.angular and vue.js. So i am designing an engineering dashboard with live api tracking system with frontend in react and backend in node js. You need to design a fully functional dashboard you can take any dummy database make apis test them and then add pagination in it.

Please don't attempt it if you don;t have knowledge of rest api,react and node

import React from "react";

import { Container, Row, Col, Card, CardHeader, CardBody } from "shards-react";

import { getData } from "../apis/table";

import PageTitle from "../components/common/PageTitle";

import Tablerow from "../components/custom-wrappers/table-row";

import {

getChannels,

getCategories,

getDepartments,

getLocales,

numberOfrecords

} from "../apis/table";

import ReactPaginate from "react-paginate";

import "./style.css";

import { FormInput, InputGroup } from "shards-react";

import { MdSearch } from "react-icons/md";

class Tables extends React.Component {

constructor(props) {

super(props);

this.state = {

tabeldata: [],

channeldata: [],

categorydata: [],

departmentdata: [],

localesdata: [],

activerow: false,

perPage: 50,

offset: 0,

pageCount: 10,

searchname: "",

searchchid: "",

searchlid: "",

searchdid: "",

searchurl: "",

searchactive: "",

searchmeta: "",

searchcid: ""

};

this.handleActiverow = this.handleActiverow.bind(this);

this.handlePageClick = this.handlePageClick.bind(this);

}

componentDidMount() {

getData(this.state.perPage, this.state.offset).then(data =>

this.setState({

tabeldata: data

})

);

numberOfrecords().then(data => {

let counts = data[0].count;

let totalpages = Math.ceil(counts / this.state.perPage);

this.setState({

pageCount: totalpages

});

});

getChannels().then(data =>

this.setState({

channeldata: data

})

);

getCategories().then(data =>

this.setState({

categorydata: data

})

);

getDepartments().then(data =>

this.setState({

departmentdata: data

})

);

getLocales().then(data =>

this.setState({

localesdata: data

})

);

}

handlePageClick = data => {

if (this.state.activerow) alert("Some row is clicked!");

else {

let selected = data.selected;

let offset = Math.ceil(selected * this.state.perPage);

this.setState(

{

offset: offset

},

() => {

getData(this.state.perPage, this.state.offset).then(data =>

this.setState({

tabeldata: data

})

);

}

);

}

};

handleActiverow() {

this.setState({

activerow: !this.state.activerow

});

}

render() {

return (

sm="4"

title="Add New Post"

subtitle="Blog Posts"

className="text-sm-left"

/>

Channels

{this.state.tabeldata.map(item => (

handle={this.state.activerow}

label={item}

channeldata={this.state.channeldata}

categorydata={this.state.categorydata}

departmentdata={this.state.departmentdata}

localesdata={this.state.localesdata}

handleActiverow={this.handleActiverow}

/>

))}

Actions	Name	Channel ID	Locale ID	Category ID	Department ID	URL	Is Active	Meta Data
	onChange={e => { this.setState({ searchname: e.target.value }); console.log(this.state.searchname); }} />	onChange={e => { this.setState({ searchchid: e.target.value }); console.log(this.state.searchchid); }} />	onChange={e => { this.setState({ searchlid: e.target.value }); console.log(this.state.searchlid); }} />	onChange={e => { this.setState({ searchcid: e.target.value }); console.log(this.state.searchcid); }} />	onChange={e => { this.setState({ searchdid: e.target.value }); console.log(this.state.searchdid); }} />	onChange={e => { this.setState({ searchurl: e.target.value }); console.log(this.state.searchurl); }} />	onChange={e => { this.setState({ searchactive: e.target.value }); console.log(this.state.searchactive); }} />	onChange={e => { this.setState({ searchmeta: e.target.value }); console.log(this.state.searchmeta); }} />

previousLabel={"previous"}

nextLabel={"next"}

breakLabel={"..."}

breakClassName={"break-me"}

pageCount={this.state.pageCount}

marginPagesDisplayed={2}

pageRangeDisplayed={5}

onPageChange={this.handlePageClick}

containerClassName={"pagination"}

subContainerClassName={"pages pagination"}

activeClassName={"active"}

/>

);

}

}

export default Tables;