React-admin has a <Pagination /> component (link).
From my understanding this component needs to be used inside a list component like this: <List pagination={<Pagination />}>
I want to use the <Pagination /> component inside a custom layout, like a <div>.
I tried using pagination inside a <ListBase /> but that still doesn't work.
My question is, how can I add the react-admin pagination to other custom components, for example a grid view, instead of a list view.
What I want to achieve is something like this grid with pagination:
example image or, pagination for a table made out of divs.
Did you check the source code of List to see how it uses that 'pagination' prop?
It is just a rendered component. Nothing more. Just it has to be inside ListContext.
You can use it wherever you like.
<ListBase>
<Pagination>
</ListBase>
Related
I'm using the OverlayTrigger component to get hover behavior for tooltips, and therefore not using the Overlay component directly. The Overlay component has a container property that I'd like to use to remedy the tooltip getting cut off by its natural container element.
I've attempted to pass a popperConfig object, but that's not working. I've also tried adding a container attribute to the OverlayTrigger component.
<Container fluid className='flex-fill' ref={rowContainer}>
...
<OverlayTrigger delay={{show: 500}} overlay={renderUserTooltip}
popperConfig={{container: rowContainer}}>
<FaUser/>
</OverlayTrigger>
How can I set the container for the Overlay when the Overlay component isn't directly used?
React bootstrap doesn't have a container prop or something similar (I mean it has a target prop but as this part of the docs suggests, for the OverlayTrigger the type is null, so it doesn't accept values and I don't think you can trick it to accept (and I don't think it would be wise to try).
But a pretty nice example, that shows some sort of a workaround in my opinion, can also be find in the docs, under customizing-trigger-behavior.
Starting from that example, if you need your trigger to be totally separated from the container an option is to just wrap everything in a big container that receives ({ ref, ...triggerHandler }) and all is left is to give your container the ref, and the trigger to your FaUser component. So something like:
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
>
{({ containerRef, ...triggerHandler }) => (
<Container fluid className='flex-fill' ref={containerRef}>
...
<FaUser/>
</Container>
)}
</OverlayTrigger>
I also created a sandbox with a minimal reproducible example.
I would like to render a child inside <MapContainer> from outside the initial MapContainer. Is this possible somehow?
In react-leaflet-v3 I render a lot of items on the map by passing the map object via a reference. But for my current situation I wold like to render a react button on top of the map based on routing.
One way of doing this is to add nest <Route />. inside the MapContainer. This however is not ideal because of the scattered route behaviour...
Is it possible in another way?
I used the portal way to solve my problem:
In my map-container, this is happening:
const [control, setControl] = useState(null);
const handleRef = useCallback((instance) => setControl(instance), [
setControl,
]);
...
<MapContainer ...>
...
<div className="mapcontrol-top-left" ref={handleRef}></div>
</MapContainer>
In a totally different component, where conditionally I want to show something on the Map, I do this (using Material-UI Portal & Fab component):
<Portal container={props.control}>
<Fab size="medium">
<EditIcon />
</Fab>
</Portal>
The material-ui Portal component is easy to use and adds convenience, but a native React Portal will also do the trick...
In my app, in the navbar, the menu hamburger and the back button are sharing the same space, and one or the other is shown based on page.
I would like to implement something like :
<Nav/>
<Page nav={backButton}/>
or
<Page nav={Menu}/>
Any ideas or links to docs would be greatly appreciated
Thanks!
Normally I'd try to make this prop driven. Your parent component can pass down a showBackButton prop that acts as a switch.
{ showBackButton ? <BackButton /> : <HamburgerMenu /> }
this is my manage role page on which i have to display breadcrumb like manage roles/ add role
how can i do that after in render
i want to add a breadcrumb on the top of the page
this is a dropdown menu whose header is manage authorisers and then first option is add roles
so i want to display it like whenever my page get render
it should show like Manage Authoriser/Add role as a breadcrumb
}}
/>
<Search with role name"
/>
input={{id: 'select_' + role.roleId, value: role.selected}}
onClick={()=> this.toggleSelect(i)}
/>,
role.name?role.name:'-',
e: role.status === "Active" ? true : false }}
The core thought process with React is to think in terms of reusable distinct Components. So, the first thing you would want to do is create a <BreadCrumb /> component and work on it in isolation.
You can then use it in your Admin Page to display the breadcrumbs, passing in the props it needs to work.
If you're unsure on how to do that I'd suggest you go through the React Tutorial here: https://reactjs.org/tutorial/tutorial.html
Now I am purely following example of Admin-on-rest (https://marmelab.com/admin-on-rest/Resource.html).
When it opens List (with DataGrid) or Show/Edit, I want to add additional components to that page. Some analytics (using Cards), Google Maps module (https://github.com/istarkov/google-map-react), Photo and etc.
I want them responsive and "floating". As different components. Not the same one.
How could I achieve this?
See the docs on how to setup a custom layout. As everything in admin-on-rest is also just react you can modify it nearly in every way you like. But notice that this requires a decent knowledge of reactand redux and probably other libraries that admin-on-rest uses under the hood. I would first try to override the standard layout. Inside your custom layout component you could e.g render any components you like at any places.
Also if you want to customize only a certain ListView you can just pass your own component to the <Ressource> component like this:
<Admin restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={MyCustomPostList} /* other views */ />
</Admin>
And then in /src/MyCustomPostList.js something like that:
class MyCustomPostList extends React.Component {
render() {
const {myOwnProp, ...otherProps} = this.props;
return (
<div>
// render your own components here
<AnyComponent myOwnProp={myOwnProp} />
<AGoogleMapsComponent />
// render the normal <List> component
<List {...otherProps}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
</Datagrid>
</List>
</div>
);
}
}
As this is not a trivial task you will not find anybody to present you a detailed solution here. You can start with the links i added and try it yourself. If you encounter any concrete problems on your way there you can come back and ask a concrete question about this.
If you want it to be responsive and floating you can use e.g. flexbox or any grid css framework.
I hope that this is a starting point for you.