rival-black•7mo ago

Add checkbox in list view that allows you to select multiple records and delete them

Inspired from react admin, how can I add a checkbox based record selector in the list view and then delete all of them by pressing a specific button

11 Replies

kapa.ai•7mo ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a checkbox-based record selector in the list view and delete multiple records in Refine, you can use the useDeleteMany data hook. This hook allows you to remove more than one data from the database. You can remove multiple records by selecting them and pressing delete. Here is an example of how you can use it:

npm create refine-app@latest -- --example table-antd-use-delete-many

npm create refine-app@latest -- --example table-antd-use-delete-many

You can find more information about the useDeleteMany hook in the Refine useDeleteMany data hook documentation (https://refine.dev/docs/data/hooks/use-delete/). To view the source code of this example, you can visit the GitHub repository (https://github.com/refinedev/refine/tree/master/examples/table-antd-use-delete-many). Please note that Refine is decoupled from Ant Design components' code. This means you have to handle selection and bulk delete button manually. However, you can use Ant Design's Table as however you like, and then connect its data with Refine. The point is customizability. You can find more information about this in the Migrating Listing Pages Part 4 (https://refine.dev/blog/migrating-a-react-admin-application-to-refine#migrating-listing-pages) blog post. Please note that the code snippets provided in the extracts are for illustrative purposes and may need to be adjusted to fit your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•7mo ago

@kapa.ai howto in Mantine

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use Mantine with Refine, you can follow these steps: 1. When creating a Refine application using npm create refine-app, select Mantine as the UI framework in the command prompt. The Refine command line tool will bootstrap a Refine application and install the necessary Mantine packages.

npm create refine-app

npm create refine-app

2. You can then import the Refine Mantine components and hooks you want to use from the @refinedev/mantine package like so:

import { Edit, useForm, useSelect } from "@refinedev/mantine";

import { Edit, useForm, useSelect } from "@refinedev/mantine";

3. Refine provides a seamless integration with the useForm hook of @mantine/form from validation to submission via the useForm hook exported from the @refinedev/mantine package. Here is an example of how to use it:

import { Create, useForm } from "@refinedev/mantine";  
import { TextInput, NumberInput } from "@mantine/core";  
  
export const ProductCreate = () => {  
 const { saveButtonProps, getInputProps, errors } = useForm({  
 initialValues: {  
 name: "",  
 material: "",  
 price: 0,  
 },  
 });  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <form>  
 <TextInput mt={8} id="name" label="Name" placeholder="Name" {...getInputProps("name")} />  
 <TextInput mt={8} id="material" label="Material" placeholder="Material" {...getInputProps("material")} />  
 <NumberInput mt={8} id="price" label="Price" placeholder="Price" {...getInputProps("price")} />  
 </form>  
 </Create>  
 );  
};

import { Create, useForm } from "@refinedev/mantine";  
import { TextInput, NumberInput } from "@mantine/core";  
  
export const ProductCreate = () => {  
 const { saveButtonProps, getInputProps, errors } = useForm({  
 initialValues: {  
 name: "",  
 material: "",  
 price: 0,  
 },  
 });  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <form>  
 <TextInput mt={8} id="name" label="Name" placeholder="Name" {...getInputProps("name")} />  
 <TextInput mt={8} id="material" label="Material" placeholder="Material" {...getInputProps("material")} />  
 <NumberInput mt={8} id="price" label="Price" placeholder="Price" {...getInputProps("price")} />  
 </form>  
 </Create>  
 );  
};

4. Refine also provides a seamless integration with Mantine's notification system and show notifications for related actions and events. This integration is provided by the notificationProvider hook exported from the @refinedev/mantine package which can be directly used in the notificationProvider prop of the <Refine /> component.

import { Refine } from "@refinedev/core";  
import { notificationProvider } from "@refinedev/mantine";  
import { NotificationsProvider } from "@mantine/notifications";  
  
const App = () => {  
 return (  
 // `@mantine/notifications` also requires a context provider to be used  
 <NotificationsProvider position="top-right">  
 <Refine notificationProvider={notificationProvider}>{/* ... */}</Refine>  
 </NotificationsProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { notificationProvider } from "@refinedev/mantine";  
import { NotificationsProvider } from "@mantine/notifications";  
  
const App = () => {  
 return (  
 // `@mantine/notifications` also requires a context provider to be used  
 <NotificationsProvider position="top-right">  
 <Refine notificationProvider={notificationProvider}>{/* ... */}</Refine>  
 </NotificationsProvider>  
 );  
};

For more detailed information, you can refer to the Refine Mantine API documentation (https://refine.dev/docs/api-reference/mantine/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•7mo ago

@kapa.ai No I ment, I want to do this, but I am not using antd, I am using mantine, how can I do delete many with checkboxes

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To implement a checkbox-based record selector in the list view and delete multiple records in Refine with Mantine, you can use the useDeleteMany data hook. This hook allows you to remove more than one data from the database. Here is an example of how you can use it:

npm create refine-app@latest -- --example table-material-ui-use-delete-many

npm create refine-app@latest -- --example table-material-ui-use-delete-many

You can find more information about the useDeleteMany hook in the Refine useDeleteMany data hook documentation (https://refine.dev/docs/data/hooks/use-delete/). To view the source code of this example, you can visit the GitHub repository (https://github.com/refinedev/refine/tree/master/examples/table-material-ui-use-delete-many). Please note that Refine is decoupled from Mantine components' code. This means you have to handle selection and bulk delete button manually. However, you can use Mantine's Table as however you like, and then connect its data with Refine. The point is customizability. Please note that the code snippets provided in the extracts are for illustrative purposes and may need to be adjusted to fit your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•7mo ago

@kapa.ai for the checkbox deletemany in antd, is there a sandbox example?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there is a CodeSandbox example for the useDeleteMany hook with Ant Design in Refine. You can try this example on CodeSandbox by clicking the following link: ![Open table-antd-use-delete-many example from refine (https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/master/examples/table-antd-use-delete-many?view=preview&theme=dark&codemirror=1) This will take you to a live coding environment where you can see the code in action and even modify it to suit your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below