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
I have a common custom component (a <MenuItem /> from Material-UI) that is wrapped in React.forwardRef. I use this in many places for displaying items in <Menu /> components - sometimes a ref is passed, in other cases not.
I want this component to have a <Tooltip /> but I find that the Tooltip does not display on the first instance of the common component in a Menu (but does show on other instances).
If i remove the prop innerRef={ref} from the <MenuItem /> in my component, that does fix it - but I don't quite understand why?
I think I could resolve this by wrapping the <MenuItem /> in e.g a <span />, but I'm keen to understand what is going on here and why the Tooltip is not showing?
https://codesandbox.io/s/new-fire-fngcof?file=/src/App.tsx
There is no property named innerRef in MUI or React.
Change that to ref and everything will work as expected.
<Tooltip title={props.tooltipTitle}>
<MenuItem ref={ref}>Menu item</MenuItem>
</Tooltip>
If you are eager to know what is innerRef, see this question.
Nesting a checkboxes inside MenuItems inside a DropdownButton does not work; clicking the checkboxes has no effect:
<Dropdown.Item>
<Form.Check
name={"title"}
type="switch"
defaultChecked={props?.searchIn?.title}
onChange={props?.handleSearchIn} />
</Dropdown.Item>
If try to invoke outside from DropDownMenu its working.
After struggling a lot for this problem, I found a simple solution. It can be useful for people who have this problem.
If you put any input directly in Dropdown.Menu without using Dropdown.Item , it works correctly.
<Dropdown.Menu>
<Form.Check
name={"title"}
type="switch"
defaultChecked={props?.searchIn?.title}
onChange={props?.handleSearchIn} />
</Dropdown.Menu>
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
I have following code:
<Datagrid rowClick="edit">
<TextField source="id" label="Id" />
<TextField source="token" label="Token" />
<LinkResourceField
label="Company"
source="company.id"
reference={record =>
`${Pluralize.plural(get(record, 'company.category', 'company'))}`
}
display="company.name"
sortable={false}
/>
<TextField source="status" label="Status" />
<CloneButton />
</Datagrid>
CloneButton does show up but when I click it, it first goes to create page but then it ends up going to edit page for the record I clicked on.
Does anyone have any idea why this might be happening? Anyway to setup CloneButton so that it stops it from triggering rowClick?
Thanks for reading and your help.
Thanks for everyone for helping.
I was able to put up a bug & a PR to resolve this issue on react-admin.
https://github.com/marmelab/react-admin/pull/3006
This is now fixed with react-admin version 2.8.2.
Everyone's comments were super helpful and I wouldn't have been able to get here without it.
Also a big thank you to react-admin team for quickly approving and releasing a new version.
Could you not do this:
<CloneButton onClick={event => {
event.stopPropagation()
event.preventDefault()
// do something here
} />
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.