I want to show a list of data in ant design List.
I also want to add a delete or remove button at the end of the each list item. I am unable to find any API for adding this. I am using 4.3.5 version of antd from npm.
Is there any solution for this problem?
If you check the API for List.Item there is a prop called extra which accepts JSX and you can add the buttons their. For eg:
<List
size="large"
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered
dataSource={data}
renderItem={(item) => (
<List.Item extra={<Button size="small">Delete</Button>}>
{item}
</List.Item>
)}
/>
You can also check working demo here: https://codesandbox.io/s/polished-fast-hzl9m?file=/index.js:477-755
Related
Does anybody know how to add onhover effect to react grid gallery?
I have figured out that onhover event needs to be added to the parent element of Gallery.
However, dont know where to go from there.
I need image to increase in size a bit when u hover over it.
<Box sx={maingrid}>
<Box onMouseOver={handleHover}>
<Gallery
images={images}
margin={1}
maxRows ={{xs:4,lg:2, xl:2}}
rowHeight={300}
onClick={handleClick}
enableImageSelection={false}
/>
{!!currentImage && (
<Lightbox
mainSrc={currentImage.original}
imageTitle={currentImage.caption}
mainSrcoriginal={currentImage.src}
nextSrc={nextImage.original}
nextSrcoriginal={nextImage.src}
prevSrc={prevImage.original}
prevSrcoriginal={prevImage.src}
onCloseRequest={handleClose}
onMovePrevRequest={handleMovePrev}
onMoveNextRequest={handleMoveNext}
/>
)}
so what do i need pass in handleHover finc? thanks!
I have a List that has several ListItems which I get from an array, let's call it myCollection. Each ListItem has a MenuIcon which opens a Menu, showing an option to delete the item. The simplified code looks like this:
<List>
<Menu
open={Boolean(anchorEl)}
anchorEl={anchorEl}
...>
<MenuItem onClick={() => handleDelete(⚡collectionItem)}>Delete</MenuItem>
</Menu>
{myCollection.map((collectionItem) => (
<ListItem secondaryAction={
<IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
<MoreVertIcon />
</IconButton>
}>
{collectionItem.name}
</ListItem>
)}
</List>
My problem is that I need to know which item in myCollection was selected to pass it to the delete function. However, I don't have a reference to the current collectionItem in the myCollection array from the Menu. Moving the Menu into the map function makes no sense because multiple menus would be rendered. How can I solve this problem?
I solved it by giving the IconButtons custom HTML data attributes, e.g.
<IconButton data-collection-id={collection.id} onClick={...}>
...
</IconButton>
Then, in the onClick function, we can retrieve it by using event.currentTarget.getAttribute("data-collection-id").
I'm new to React and Ant Design.
I want to use a List that has a Checkbox for each item. As in the attached example:
<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
Check all
</Checkbox>
<Divider />
<List
dataSource={plainOptions}
renderItem={value => (
<CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
)}
/>
https://codepen.io/antoinemy/pen/dymvwJG
However I would simply like to replace the CheckboxGroup with a Checkbox but I can't do it through the List.
Can someone show me a solution and explain to me?
I would like to eventually produce other things through this list. I'm not interested in the CheckboxGroup, I really want the List to deploy my items.
Thank you,
Antoine (FR)
I think you can include the Checkbox components inside the List.Item and wrap the Checkbox.Group outside
Here is my example code
https://codesandbox.io/s/basic-list-antd-4-21-7-forked-h6fejs?file=/demo.js
related to this issue
https://github.com/mui/material-ui/issues/20193
Pagination Arrow Working on reverse on RTL direction
From Mui Documentation:
Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI components you must follow the following steps.
Documentation and Demo:
https://mui.com/material-ui/guides/right-to-left/#demo
Pagination in RTL Demo:
https://codesandbox.io/s/direction-material-demo-forked-zdgsi8?file=/demo.js
you can Change Arrow Icons like this:
The Previous Button change it to Forward Button and the Next Button Change it to Back Button :) Enjoy!! XD
reference For changing icons: https://mui.com/material-ui/react-pagination/#custom-icons
<Pagination
count={pageCount}
page={page}
onChange={(e, newPage: number) => setPage(newPage)}
renderItem={item => (
<PaginationItem
components={{ previous: ArrowForward, next: ArrowBack }}
{...item}
/>
)}
/>
I'm using react-admin 2.6.2 and trying currently to edit the layout of the List view. At first I wanted to remove action buttons completely, and I found the answer here at Stackoverflow. I thought, that using empty CardActions would be enough, but there's still empty ListToolbar taking space before my <List> starts. The toolbar is created by List automatically, is there any way to for example edit styles of that toolbar so I could hide it or set the height to 0px?
I guess one option is to create my custom List.js based on this, but it would be best to use the original source files, so they are also updated when there are new updates to react-admin.
JS code:
const NoneActions = props => (
<CardActions />
);
class DemoList extends Component {
render() {
return (
<div>
<List
{...props}
actions={<NoneActions />}
>
<Datagrid>
<TextField source="name" />
<ShowButton />
</Datagrid>
</List>
</div>
);
}
}
Here's the toolbar in DOM:
<div class="MuiToolbar-root-519 MuiToolbar-regular-521 MuiToolbar-gutters-520 ListToolbar-toolbar-293">
try: <List actions={null} {...props}> the empty space before the list disappears.