I am using MUIDatatables and the table is not responsive to the window screen. I want the table to always have one line per row, and use horizontal scroll.
I have tried putting the table inside a Material UI Grid component and Grid Component but that isn't working or I might not be configuring it correctly.
This is where I house all my components
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="js">
<Navigator open={this.state.drawerOpen} PaperProps={{ style: { width: drawerWidth } }} />
</Hidden>
</nav>
<div className={classes.appContent}>
<Header onDrawerToggle={this.handleDrawerToggle} />
<main className={classes.mainContent}>
<div>
<Switch>
<Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
<Route exact path="/EditContracts/:contractId" component={EditContract} />
<Route exact path="/EditUsers/:userId" component={EditUser} />
<Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
<Route exact path="/EditTunnels/:tunnel_id" component={EditTunnel} />
<Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
<Route exact path="/Contracts/List" component={Contracts} />
<Route exact path="/Contracts/Create" component={CreateContract} />
<Route exact path="/Tunnel_Profiles/Create" component={CreateTunnel} />
<Route exact path="/Contracts/Import" component={ImportContract} />
<Route exact path="/Users/List" component={Users} />
<Route exact path="/Tunnel_Profiles/List" component={TunnelProfiles} />
<Route exact path="/Users/Create" component={CreateUser} />
<Route exact path="/Endpoints/Create" component={CreateEndpoint} />
<Route exact path="/Endpoints/List" component={Endpoints} />
<Route exact path="/Community" component={PugCommunity} />
<Route exact path="/Connections" component={Connections} />
<Route exact path="/Dashboard" component={Dashboard} />
<Route exact path="/Alerts" component={Alerts} />
<Route exact path="/System_Setup/Organization" component={Organization} />
<Redirect exact from="/System_Setup" to="/System_Setup/Organization" />
<Redirect exact from="/Users" to="/Users/List" />
<Redirect exact from="/Tunnel_Profiles" to="/Tunnel_Profiles/List" />
<Redirect exact from="/Endpoints" to="/Endpoints/List" />
<Redirect exact from="/Contracts" to="/Contracts/List" />
</Switch>
</div>
</main>
</div>
</div>
</ThemeProvider>
</div>
How I have table set up
<Grid container direction='row'>
<Grid item>
<MUIDataTable data={data123} columns={columns123} options={options}/>
</Grid>
</Grid>
This is how I solved it.
<div style={{display: 'table', tableLayout:'fixed', width:'100%'}}>
<MuiThemeProvider theme={this.getMuiTheme()}>
<MUIDataTable data={data123} columns={this.state.columns} options={options}/>
</MuiThemeProvider>
</div>
Related
I´m trying to create a complex routing that behaves the following:
http://localhost:3000/dashboard/projectxxxxx/schedule
http://localhost:3000/dashboard/projectxxxxx/game-servers
http://localhost:3000/dashboard/projectyyyyy/schedule
http://localhost:3000/dashboard/projectyyyyy/game-servers
So I need to set the dynamic path first and later on, another nested route. So far, what I have is this following code, but I´m stuck when it comes to get first the project. Could someone help me?
I´m using React Router v6
Thanks a lot!
<Routes>
<Route path="/" element={ <Navigate to="/dashboard" /> } />
<Route path="dashboard" element={ <DashboardPage open={ open } /> }>
<Route index element={ <SchedulePage /> } />
<Route path="schedule" element={ <SchedulePage /> } />
<Route path="game-servers" element={ <GameServersPage /> } />
</Route>
<Route path="*" element={ <NoContentPage /> } />
</Routes>
So I´m currently refactoring a website, and so I do with the rrd, which was on v5 in the previous website version.
Now, that the component doesn´t exist anymore we have to work with the new component as you probably know.
I previously used framer-motion to transition in and out between the routes like so:
<Switch location={location} key={location.pathname}>
<motion.div
initial="initial"
animate="in"
exit="out"
variants={pageVariants}
transition={pageTransition}>
<Route path="/audit" component={Audit} />
<Route exact path="/smartx" component={SmartX} />
<Route path="/smartx/erc20" component={TokenGenerator} />
<Route path="/createAudit" component={PaymentStatus} />
<Route path="/faq" component={FAQ} />
<Route path="/support" component={Support} />
<Route path="/terms" component={Terms} />
<Route path="/policy" component={Policy} />
<Route path="/about" component={About} />
<Route exact path="/">
<Redirect to="/audit" />
</Route>
</motion.div>
</Switch>;
Simply replacing the Switch component with the Routes component won´t work, since you can only have Route components as childs from .
Moving the <motion.div> one layer up over the Routes component leads to only one initial fade in transition on page load.
new (not quiet working version):
<AnimatePresence>
<PageLayout>
<motion.div
initial="initial"
animate="in"
variants={pageVariants}
transition={pageTransition}>
<Routes>
<Route path="/audit" element={<Audit />} />
<Route path="/smartx" element={<SmartX />} />
<Route path="/faq" element={<FAQ />} />
<Route path="/support" element={<Support />} />
<Route path="/terms" element={<Terms />} />
<Route path="/policy" element={<Policy />} />
<Route path="/about" element={<About />} />
</Routes>
</motion.div>
</PageLayout>
</AnimatePresence>;
Framer motion animations (equalin both old and new version):
const pageVariants = {
initial: {
opacity: 0
},
in: {
opacity: 1
},
out: {
opacity: 0
}
};
const pageTransition = {
type: 'tween',
ease: 'linear',
duration: 0.5
};
Any ideas on how to achieve a transition on each route switch?
Thanks in advance and cheers!
I think your solution is close to working. Move the PageLayout component and motion.div into a layout route that uses the current path as a React key.
Example:
import { Outlet } from 'react-router-dom';
const AnimationLayout = () => {
const { pathname } = useLocation();
return (
<PageLayout>
<motion.div
key={pathname}
initial="initial"
animate="in"
variants={pageVariants}
transition={pageTransition}
>
<Outlet />
</motion.div>
</PageLayout>
);
};
...
<Routes>
<Route element={<AnimationLayout />}>
<Route path="/audit" element={<Audit />} />
<Route path="/smartx" element={<SmartX />} />
<Route path="/faq" element={<FAQ />} />
<Route path="/support" element={<Support />} />
<Route path="/terms" element={<Terms />} />
<Route path="/policy" element={<Policy />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<Navigate to="/audit" replace />} />
</Route>
</Routes>
I want to redirect from any * route to my home page, because I want to change url to '/'.
I followed this link:
React-Router: No Not Found Route?
But when I want to change any route path It moves me independently to the url '/'
<Route exact path="/" component={MMPStudio} />
<Route exact path="/galeria" component={Gallery} />
<Route exact path="/kontakt" component={Contact} />
<Route exact path="/fotobudka" component={Fotobudka} />
<Route exact path="/jubiler" component={Jubiler} />{" "}
<Route exact path="/fotobudka/kontakt" component={FotobudkaContact} />
<Route exact path="/jubiler/galeria" component={JubilerGallery} />
<Switch>
<Route exact path="/" component={MMPStudio} />
<Redirect from="*" to='/' />
</Switch>
I think your switch should wrap the whole thing:
<Switch>
<Route exact path="/" component={MMPStudio} />
<Route exact path="/galeria" component={Gallery} />
<Route exact path="/kontakt" component={Contact} />
<Route exact path="/fotobudka" component={Fotobudka} />
<Route exact path="/jubiler" component={Jubiler} />
<Route exact path="/fotobudka/kontakt" component={FotobudkaContact} />
<Route exact path="/jubiler/galeria" component={JubilerGallery} />
<Redirect from="*" to='/' />
</Switch>
I'm working on a React app that is using React Router 4. All of my routes are working great, however, if I go to a route that is not on the list I am not getting my 404 page. Any idea what I'm missing?
I'm using React 16 and React Router 4. This is for a sample app like Indeed.
export default function App() {
const companyRoutes = () => (
<Main>
<Route exact path="/companies/new" component={NewCompanyPage} />
<SubNav>
<PageBody companyPages>
<Switch>
<Route exact path="/companies" component={CompanyPage} />
<Route path="/companies/:companyId/edit" component={EditCompanyPage} />
<Route path="/companies/:companyId/jobs/:jobId/edit" component={EditJobPage} />
<Route path="/companies/:companyId/jobs/new" component={NewJobPage} />
<Route path="/companies/:companyId/jobs" component={CompanyJobsPage} />
<Route path="/companies/:companyId/locations" component={CompanyLocationsPage} />
<Route path="/companies/:companyId/recruiters" component={CompanyRecruitersPage} />
<Route path="/companies/:companyId/settings" component={CompanySettingsPage} />
<Route path="/companies/:companyId/applicants" component={CompanyApplicantsPage} />
</Switch>
</PageBody>
</SubNav>
</Main>
)
const jobRoutes = () => (
<Main>
<PageBody>
<Switch>
<Route exact path="/jobs" component={JobsPage} />
<Route path="/jobs/:jobId" component={JobPage} />
<Route path="/jobs/:jobId/apply" component={NewApplicationPage} />
</Switch>
</PageBody>
</Main>
)
const profileRoutes = () => (
<Main>
<SubNav>
<PageBody>
<Switch>
<Route exact path="/profiles" component={ProfilePage} />
<Route path="/profiles/:profileId/resume" component={ResumePage} />
<Route path="/profiles/:profileId/edit" component={EditProfilePage} />
<Route path="/profiles/:profileId/applications" component={ApplicationsPage} />
<Route path="/profiles/:profileId/settings" component={ProfileSettingsPage} />
</Switch>
</PageBody>
</SubNav>
</Main>
)
const loginRoutes = () => (
<LoginMain>
<Switch>
<Route exact path="/login" component={LoginPage} />
<Route exact path="/sign_up" component={LoginPage} />
</Switch>
</LoginMain>
)
const MainRoutes = () => (
<div>
<Route path="/companies" component={companyRoutes} />
<Route path="/jobs" component={jobRoutes} />
<Route path="/login" component={loginRoutes} />
<Route path="/profiles" component={profileRoutes} />
</div>
)
return (
<BrowserRouter>
<div>
<Route path="/" component={MainRoutes} />
<Route path="/404" component={NotFoundPage} />
</div>
</BrowserRouter>
)
}
[UPDATE]: Here you will find a proper, better tested example.
Not tested but try:
return (
<BrowserRouter>
<Switch>
<Route path="/" component={MainRoutes} />
<Route component={NotFoundPage} />
</Switch>
</BrowserRouter>
)
The idea is that inside a Switch, the router will try every route from the first one to the last one until it finds a corresponding path.
By having <Route component={NotFoundPage} /> at the very bottom of your routing, with no path specified, it will act as a wildcard, catching all unmatched urls.
I have tried to define child routs with react router ( below code ) but child route is not working and also it doesn't returning any error message.
<Router>
<Route path="/" component={Main} >
<IndexRoute component={Dashboard} />
<Route path="create" component={UserList} />
<Route path="user/create" component={CreateUser} />
<Route path="createGroup" component={CreateGroup} />
<Route path="groups" component={GroupList} />
<Route path="premission" component={PremissionList}>
<Route path="create" component={CreatePremission} />
</Route>
</Route>
</Router>
I need to route premission/create to the create premission component.
To do multiple types of deep level/ nested routing you need to follow following approach:
<Router>
<Route path="/" component={Main} >
<IndexRoute component={Dashboard} />
<Route path="create" component={UserList} />
<Route path="user/create" component={CreateUser} />
<Route path="createGroup" component={CreateGroup} />
<Route path="groups" component={GroupList} />
</Route>
<Route path="/premission" component={PremissionList}>
<Route path="create" component={CreatePremission} />
</Route>
</Router>