Want to customise MUI - datatable Toolbar and positioning pagination top

I don't have any idea how to positioning pagination bottom to top. I am able to change the footer background color even added extra button without breaking existing functionality. But I don't have any idea how can i adjust paginating with toolbar here I am sharing URl and image,

I also tried to implement table pagination custom component but getting some style error issue

```
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Button } from "@material-ui/core";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import { FullscreenExit, TrainRounded } from "@material-ui/icons";
// import DownloadIcon from '@mui/icons-material/GetApp';
// import DownloadIcon from '@mui/icons-material/Download';
import ForwardIcon from "@material-ui/icons/Forward";
import TablePaginationDemo from "./component/pagination";
class App extends React.Component {
render() {
const columns = [
"Name",
"Title",
"Location",
"Age",
"Salary",
{
name: "Actions",
options: {
customBodyRender: (value, tableMeta, updateValue) => {
return {`|`};
}
}
}
];

const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", ""],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000", ""],
["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000", ""],
["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000", ""],
["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000", ""],
[
"Blake Duncan",
"Business Management Analyst",
"San Diego",
65,
"$94,000",
""
],
[
"Frankie Parry",
"Agency Legal Counsel",
"Jacksonville",
71,
"$210,000",
""
],
["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000", ""],
["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000", ""],
[
"Mel Brooks",
"Business Consultant",
"Oklahoma City",
37,
"$135,000",
""
],
["Harper White", "Attorney", "Pittsburgh", 52, "$420,000", ""],
["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000", ""],
["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000", ""],
["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000", ""],
["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000", ""],
[
"Addison Navarro",
"Business Management Analyst",
"New York",
50,
"$295,000"
],
["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
[
"Gabby Strickland",
"Business Process Consultant",
"Scottsdale",
26,
"$45,000"
],
["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
];
const getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiChip: {
root: {
backgroundColor: "lightgrey"
}
},
MuiTableCell: {
head: {
backgroundColor: "lightgray !important"
}
},
MuiTypography: {
root: {
// backgroundColor: "lightgrey",
}
},
MuiTableFooter: {
root: {
backgroundColor: "lightgrey"
}
},
MuiToolbar: {
root: {
color: "ted"
}
}
}
});

const HeaderElements = () => (
<>
1-5 Of 30
{"< >"}

);

const components = {
icons: {
ForwardIcon
}
};

const options = {
filterType: "dropdown",
responsive: "scroll",
customToolbar: () => ,
print: true,
download: false,
hover: false,
filter: false,
search: false,
viewColumns: true,
rowsPerPage: [5],
rowsPerPageOptions: false,
jumpToPage: false,
pagination: TrainRounded,
textLabels: {
pagination: {
next: "Next ",
previous: "Previous",
rowsPerPage: "",
displayRows: "Of"
}
},
onChangePage(currentPage) {
console.log({ currentPage });
},
onChangeRowsPerPage(numberOfRows) {
console.log({ numberOfRows });
}
};

return (


}
// }
/>

);
}
}

ReactDOM.render(, document.getElementById("root"));

```

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.2.2 |
| MUI-datatables | 2.0.0 beta |
| React |17.0.2 |
| browser | chrome |
| etc | [CodeSandbox](https://codesandbox.io/s/muidatatables-custom-toolbar-forked-ptcuqu?file=/index.js) |

Start with the linked CodeSandbox at index.js and reproduce the table configuration with MUI-datatables 2.0.0 beta, React 17.0.2, and Material-UI 3.2.2. Clarify how the pagination should move relative to the toolbar and what styling error occurs; done means the requested layout works without breaking the existing table controls.

Written by the indexing model from the issue text.