Skip to main content
Unlock powerful debugging and effortless query monitoring with
Refine Devtools
Learn More
Refine
Documentation
Search
⌘K
3.xx.xx
Star:
Loading...
Refine
Documentation
Getting Started
Overview
Quick Start Guide
API Reference
General Concepts
Core API
Providers
Access Control Provider
Auth Provider
Audit Log Provider
Data Provider
i18n Provider
Live Provider
Notification Provider
Router Provider
Hooks
Access Control
useCan
Authorization
useAuthenticated
useCheckError
useGetIdentity
useLogin
useLogout
usePermissions
useRegister
useForgotPassword
useUpdatePassword
Audit Log
useLog
useLogList
Breadcrumb
useBreadcrumb
Data
useApiUrl
useCreate
useCreateMany
useCustom
useCustomMutation
useDataProvider
useDelete
useDeleteMany
useList
useInfiniteList
useMany
useOne
useUpdate
useUpdateMany
Field
useSelect
Form
useForm
Import-Export
useExport
useImport
Invalidate
useInvalidate
Live
usePublish
useSubscription
Navigation
useNavigation
Notification
useNotification
Refine
useTitle
Resource
useResource
useResourceWithRoute
Show
useShow
Table
useTable
Translate
useGetLocale
useSetLocale
useTranslate
UI
useModal
useMenu
Components
<AuthPage>
<Refine>
<LayoutWrapper>
Inferencer
Authorization
<Authenticated>
Access Control
<CanAccess>
Interface References
Ant Design API
Hooks
Field
useCheckboxGroup
useRadioGroup
useSelect
Form
useDrawerForm
useForm
useModalForm
useStepsForm
Import
useImport
List
useSimpleList
Table
useEditableTable
useTable
UI
useModal
Components
<AuthPage>
Inferencer
Basic Views
Create
Edit
List
Show
Breadcrumb
Buttons
Clone
Create
Delete
Edit
Export
Import
List
Refresh
Save
Show
Fields
Boolean
Date
Email
File
Image
Markdown
Number
Tag
Text
Url
<FilterDropdown>
Inputs
Custom Inputs
Customization
Theme
Layout
Sider
Migration Guide
Chakra UI API
Components
<AuthPage>
Inferencer
Basic Views
Create
Edit
List
Show
Breadcrumb
Buttons
Clone
Create
Delete
Edit
Export
Import
List
Refresh
Save
Show
Fields
Boolean
Date
Email
File
Markdown
Number
Tag
Text
Url
Customization
Theme
Layout
Sider
Mantine API
Hooks
Form
useDrawerForm
useForm
useModalForm
useStepsForm
useSelect
Components
<AuthPage>
Inferencer
Basic Views
Create
Edit
List
Show
Breadcrumb
Buttons
Clone
Create
Delete
Edit
Export
Import
List
Refresh
Save
Show
Fields
Boolean
Date
Email
File
Markdown
Number
Tag
Text
Url
Customization
Theme
Layout
Sider
Material UI API
Hooks
useAutocomplete
useDataGrid
Components
<AuthPage>
Inferencer
Basic Views
Create
Edit
List
Show
Breadcrumb
Buttons
Clone
Create
Delete
Edit
Export
Import
List
Refresh
Save
Show
Fields
Boolean
Date
Email
File
Markdown
Number
Tag
Text
Url
Customization
Theme
Layout
Sider
Packages
List of Packages
Documentation
CLI
Command Palette
React Table
React Hook Form
useForm
useModalForm
useStepsForm
Inferencer
Examples
RealWorld Example
Access Control
Casbin
Cerbos
Authentication
Headless
Ant Design
Material UI
Mantine
Auth Provider
Auth0
Google Auth
Keycloak
OTP Login
Calendar
Command Palette
Core
useImport
useModal
useSelect
Customization
Custom Footer
Custom Login Page
Custom Sider
Off Layout Area
RTL (Right to Left)
Top Menu Layout
Custom Pages
Data Provider
Airtable
Appwrite
Directus
Elide
Hasura
Multiple Providers
Nestjsx Crud
Nhost
Strapi
Strapi GraphQL
Strapi v4
Supabase
E2E Testing
Field
useCheckboxGroup
useRadioGroup
useSelect
Form
Ant Design
Custom Form Validation
useDrawerForm
useForm
useModalForm
useStepsForm
Headless
Save and Continue
Mantine
useDrawerForm
useForm
useModalForm
useStepsForm
Material UI
useDrawerForm
useForm
useModalForm
useStepsForm
React Hook Form
useForm
useModalForm
useStepsForm
i18n
Next.js
React
Import-Export
Inputs
Custom Input
Date Picker
JavaScript
List
useSimpleList
Live Provider
Ably
Multi-level Menu
Multitenancy
Appwrite
Strapi-v4
Next.js
Ant Design
With `app/` Directory
Authentication
Notification Provider
React Toastify
Persist Query
Router Provider
React Location
Search
Search
Table
Ant Design
Advanced Table
Table Filter
useDeleteMany
useEditableTable
useTable
useUpdateMany
Mantine
Advanced
Basic
Material UI
Advanced
Cursor Pagination
Table Filter
useDataGrid
useDeleteMany
useUpdateMany
React Table
Advanced
Basic
Handson Table
Basic
Theme
UI
useModal
Upload
Ant Design
Base64 Upload
Multipart Upload
Mantine
Base64 Upload
Multipart Upload
Material UI
Base64 Upload
Multipart Upload
Web3
Sign-In with Ethereum
Advanced Tutorials
Access Control
Auth
Auth0 Login
Azure AD Login
Custom Layout
Custom Pages
Data Provider
Appwrite
GraphQL
Handling Filters
Strapi-v4
Supabase
Form
Custom Form Validation
Save and Continue
Import - Export
CSV Export
CSV Import
Live / Realtime
Multi Level Menu
Multitenancy
Appwrite
Strapi-v4
Mutation Mode
Search
List Search
Search
Table Search
SSR
Remix
Next.js
Upload
Base64 Upload
Multipart Upload
Web3
Sign in with Ethereum Web3 Wallet
Comparison
FAQ
Contributing
Testing
Migration Guide
Licence
Further Readings
Benchmarks
Telemetry
This is documentation for Refine
3.xx.xx
, which is no longer actively maintained.
For up-to-date documentation, see the
latest version
(4.xx.xx).
Example
Documentation
Examples
Version: 3.xx.xx
Examples
Filters
101 examples
Ant Design
Material UI
Chakra UI
Mantine
Headless
Auth Provider
Audit Log Provider
Data Provider
Live Provider
Notification Provider
Access Control
Next.js
Remix
Table
React Table
Form
React Hook Form
Community
Customization
Material UI
i18n
CSV Import / Export
Storybook
Tanstack Table
Upload
Filters
101 examples
Access Control Casbin
Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use Refine and Casbin to simplify access control management throughout your application.
Access Control
Access Control Cerbos
Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use Refine and Cerbos to simplify access control management throughout your application.
Access Control
Access Control Permify
Access control refers to the methods and processes used to restrict access to certain parts of a web application or website based on the user's permissions. It ensures that users can only interact with the content and features they are authorized to use, enhancing security and user experience.
Access Control
Calendar
In this example you can see how Ant Design's Calendar component can be used with Refine data hooks.
Ant Design
Audit Log with Antd
Refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates creating an audit log with Ant Design.
Audit Log Provider
Ant Design
Audit Log with Headless
Refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates how to create an audit log provider.
Audit Log Provider
Auth Provider Auth0
Auth0 is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Auth0 Login with Refine.
Auth Provider
Auth Provider Google Auth
You can use Google Login to control access and provide identity for your app. This example will guide you through how to connect Google Login into your project using Refine.
Auth Provider
Auth Provider Keycloak
Keycloak is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Keycloak Login with Refine.
Auth Provider
Auth Provider Kinde
Kinde is a service that makes authentication and authorization easy by providing a range of methods to choose from. In this example, you'll see how to use Kinde Login with Refine.
Auth Provider
Community
Auth Provider OTP Login
A one-time password(OTP) is a password that has two fundamental properties : it expires quickly, and it can’t be reused. OTPs are usually numeric or alphanumeric strings and are generated for a single login procedure. This example shows how to utilize OTP input logic with Refine. You can use one-time passwords to access your application with Refine AuthProvider.
Auth Provider
Authentication with Ant Design
You can create your own Authentication approach using Refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with Refine.
Ant Design
Auth Provider
Authentication with Chakra UI
You can create your own Authentication approach using Refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with Refine.
Chakra UI
Auth Provider
Authentication Example
You can create your own Authentication approach using Refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with Refine.
Headless
Auth Provider
Authentication with Mantine
You can create your own Authentication approach using Refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with Refine.
Mantine
Auth Provider
Authentication with Material UI
You can create your own Authentication approach using Refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with Refine.
Material UI
Auth Provider
Custom Theme Ant Design
You can customize design and theme in your project with Refine. In this example, we have created an example application by customizing the default theme of Refine. You can easily customize your theme as you wish in your Refine project.
Ant Design
Customization
Custom Theme Chakra UI
You can customize design and theme in your project with Refine. In this example, we have created an example application by customizing the default theme of Refine. You can easily customize your theme as you wish in your Refine project.
Chakra UI
Customization
Custom Theme Mantine
You can customize design and theme in your project with Refine. In this example, we have created an example application by customizing the default theme of Refine. You can easily customize your theme as you wish in your Refine project.
Mantine
Customization
Custom Theme Material UI
You can customize design and theme in your project with Refine. In this example, we have created an example application by customizing the default theme of Refine. You can easily customize your theme as you wish in your Refine project.
Material UI
Customization
Data Provider Airtable
By using Refine`s full-featured Airtable Data Provider, it allows you to access your data quickly without any additional setup or coding. The following example will show you how to use your Airtable data within the Refine project.
Data Provider
Data Provider Appwrite
Connect your Appwrite database with Refine Appwrite Data Provider and take advantage of the features that allow you to list, filter or create data in it. Refine also supports Realt-time updates from Appwrite Database! This example will show you how the Refine Appwrite Data Provider works and is used.
Data Provider
Data Provider Directus
Refine full-featured Directus Data Provider it allows you to get to your data quickly without requiring any additional setup or code. This example will show how to utilize the Refine Directus Provider in this project.
Community
Data Provider
Data Provider Elide
Elide Data Provider allows you call Elide backend JSON api. Elide data provider builds the queries that Elide Application can understand, so we have done the hard work for you. This example will show how to utilize the Refine Elide Provider in this project.
Community
Data Provider
Data Provider Hasura
Any REST or GraphQL custom backend work integrated with Refine. Refine Hasura GraphQL Data Provider comes out-of-the-box. Thanks to Refine, you can connect to your Hasura database and create special queries and use your data easily. This example shows in detail how you can use the data in your Hasura database with Refine project.
Data Provider
Live Provider
Data Provider Multiple Providers
Refine's Multiple Data Provider feature allows you to connect multiple backends and manage their data with a single interface. This tutorial explains in detail how to use the Multiple Data Provider in your project.
Data Provider
Data Provider Nestjs Query
Refine Nestjs-Query Data Provider allows you to use your data on the frontend by connecting to your Nestjs-Query GraphQL API. With Refine, it perform these operations for you without having to write extra code for queries. By examining this example, you can learn how to use the Nestjs-Query Crud Data Provider.
Data Provider
Data Provider Nestjsx CRUD
Refine Nestjsx Crud Data Provider allows you to use your data on the frontend by connecting to your Nestjsx API. With Refine, it perform these operations for you without having to write extra code for queries. By examining this example, you can learn how to use the Nestjsx Crud Data Provider.
Data Provider
Data Provider Sanity
This example shows how to integrate your Sanity CMS with Refine app using the Sanity Data Provider.
Data Provider
Community
Data Provider Strapi
This example demonstrates how to quickly connect your Strapi data with a full-featured Refine Strapi Data Provider without having to make any additional adjustments.
Data Provider
Auth Provider
Data Provider Strapi v4
Refine supports all the features that come with Strapi-v4. In this example, how to manage your data with Refine Strapi-v4 Data Provider, CRUD operations and more is explained in detail.
Data Provider
Auth Provider
Data Provider Supabase
Connect your Supabase database with Refine Supabase Data Provider and easily manage all the features that the database offers in your interface. This example will show you how Supabase Data Provider works and is used.
Data Provider
Live Provider
Auth Provider
Form Ant Design Custom Form Validation
You can make basic validations with Ant Design Form.Item rules propertyp to the forms you have created with Refine. In addition, it allows you to make custom validations that you want or need. It is very easy to add your custom rules and validations by using the validator function within the Form.Item rules property. In the example below, a custom form validation process is explained in detail.
Form
Ant Design
Form Ant Design Server Side Form Validation
You can handle server-side form validation errors out-of-the-box with Ant Design useForm.
Form
Ant Design
Form Ant Design useDrawerForm
useDrawerForm hook allows you to access and manage the forms you've created in the Drawer Component. The code below may help you understand how to create and manage forms in a Drawer component.
Form
Ant Design
Form Ant Design useForm
Refine useForm is a hook that helps you manage methods such as create, edit, and clone within the form. In this example, we constructed forms that you may use to create, edit, and clone posts using the userForm hook. You may look at the example to see how it's used.
Form
Ant Design
Form Ant Design useModalForm
With the useModalForm hook, you can manage a form inside of your modal component. It returns Ant Design Form and Modal props. You may examine the code below to learn how to create and manage forms within a modal.
Form
Ant Design
Form Ant Design useStepsForm
The useStepsForm hook is a method that allows you to split your form into multiple sections using an Ant Design Steps component, which can be used to manage your form. If your form contains multiple steps, as in the example below, it's pretty simple to manage and handle your Steps form using the Refine useStepsForm hook.
Form
Ant Design
Form Chakra UI Server Side Form Validation
You can handle server-side form validation errors out-of-the-box with React Hook Form useForm.
Form
Chakra UI
React Hook Form
Form Chakra UI useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Chakra UI.
Form
Chakra UI
React Hook Form
Form Chakra UI useForm
Refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your Refine project in a compatible way. You can view the live example or review the source code to see how it's used with Chakra UI.
Form
Chakra UI
React Hook Form
Form Chakra UI useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Chakra UI.
Form
Chakra UI
React Hook Form
Form Mantine Server Side Form Validation
You can handle server-side form validation errors out-of-the-box with Mantine useForm.
Form
Mantine
Form Mantine useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Mantine useForm
Refine works integrated with useForm of @mantine/form library. Using this package, you can use all the features provided by Mantine in your Refine project in a compatible way. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Mantine useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Mantine useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Material UI Server Side Form Validation
You can handle server-side form validation errors out-of-the-box with React Hook Form useForm.
Form
Material UI
Form Material UI useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useForm
Refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your Refine project in a compatible way. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form React Hook Form useForm
Refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your Refine project in a compatible way. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
Form React Hook Form useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
Form React Hook Form useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
i18n Next.js
Refine i18n Provider allows you to add multiple language choices to your web application. The default language of Refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.
i18n
i18n React
Refine i18n Provider allows you to add multiple language choices to your web application. The default language of Refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.
i18n
Import / Export CSV with Ant Design
Refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with Refine by creating model operations on the CSV data.
CSV Import / Export
Import / Export CSV with Mantine
Refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with Refine by creating model operations on the CSV data.
CSV Import / Export
Import / Export CSV with Material UI
Refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with Refine by creating model operations on the CSV data.
CSV Import / Export
Live Provider Ably
The liveProvider is a powerful tool for developers who want to create an interactive app experience that can be updated in Realtime. This is an example of Refine that you can use to manage your data in Realtime.
Live Provider
Next.js Authentication
Refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple Refine app in Next.js with Authentication features.
Next.js
Auth Provider
Next.js Authentication with NextAuth.js
Refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple Refine app in Next.js and NextAuth.js with Authentication features.
Next.js
Auth Provider
Next.js With Next.js
Refine allows you to use the app/ structure in your Next.js apps. To learn more about the app/ directory, check out Next.js app docs. In this example you will find how to use the app/ directory with refine.
Next.js
Notification Provider React Toastify
With Refine Notification Provider, you can show notification messages in your application anywhere. These may be warnings or errors that advise an action and help maintain user engagement with the app's functionality. You can use any notification library and manage them with Refine's useNotification hook! In this example we used the React Toastify library to show notifications.
Headless
Notification Provider
Remix Remix with Ant Design
Refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.
Remix
Ant Design
Remix Authentication with remix Auth
Refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to authorize with Google, Auth0 and Keycloak using remix-auth.
Remix
Auth Provider
Remix Headless
Refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported headless (without any style/component) CRUD App.
Remix
Headless
Remix Remix with Material UI
Refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using Material UI.
Remix
Material UI
Storybook with Ant Design
Storybook with Ant Design is an example application.
Ant Design
Storybook
Storybook with Material UI
Storybook with Material UI is an example application.
Material UI
Storybook
Advanced Ant Design Table
Multiple record deletion, modification, and other features can be used simultaneously in a table. It's an example of a Advanced Table made with Refine's customization feature.
Table
Ant Design
Filtering on Ant Design Table
The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
Table
Ant Design
Ant Design useDeleteMany Hook
The useDeleteMany is one of Refine's data hooks. It removes more than one data from the database. We used the useDeleteMany hook to remove more than one record from our table in this scenario. On your table, you may remove multiple records by selecting them and pressing delete. You can get more information by examining the example.
Table
Ant Design
Ant Design useEditableTable Hook
useEditableTable, includes all of the capabilities of useTable. It also enables you to edit your Table in addition to these advantages. It returns Ant Design Table and Form components props.
Table
Ant Design
Ant Design useTable Hook
You may use the useTable hook to process your data with features compatible with the Ant Design Table Component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.
Table
Ant Design
Ant Design useUpdateMany Hook
useUpdateMany is one of Refine's data hooks. It performs the process of updating more than one data. In this example, we used the useUpdateMany hook to edit multiple data on the table. You can edit more than one data by selecting the rows you want to edit on your table. You can get more information by examining the example.
Table
Ant Design
Advanced React Table with Chakra UI
It is an example of Chakra UI Advanced React Table created with Refine's @refinedev/react-table adapter. In addition to the Chakra UI Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.
Table
Chakra UI
React Table
Basic React Table with Chakra UI
Refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your Refine project. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.
Table
Chakra UI
React Table
Advanced React Table with Mantine
It is an example of Mantine Advanced React Table created with Refine's @refinedev/react-table adapter. In addition to the Mantine Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Mantine.
Table
Mantine
React Table
Basic React Table with Mantine
Refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your Refine project. For more information, you can view the live example or review the source code to see how it's used with Mantine.
Table
Mantine
React Table
Advanced Material UI Table
Advanced table examples with useDataGrid and useTable created with Refine's @refinedev/react-table adapter.
Table
Material UI
Cursor Pagination
Cursor Pagination is a pagination method and Material UI supports it by default. This sample application shows how to use it.
Table
Material UI
Filtering on Material UI Table
The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
Table
Material UI
Material UI's useDataGrid Hook
You may use the useDataGrid hook to process your data with features compatible with the MUI X DataGrid and DataGridPro component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.
Table
Material UI
Material UI useDeleteMany Hook
The useDeleteMany is one of Refine's data hooks. It removes more than one data from the database. We used the useDeleteMany hook to remove more than one record from our table in this scenario. On your table, you may remove multiple records by selecting them and pressing delete. You can get more information by examining the example.
Table
Material UI
Material UI useUpdateMany Hook
useUpdateMany is one of Refine's data hooks. It performs the process of updating more than one data. In this example, we used the useUpdateMany hook to edit multiple data on the table. You can edit more than one data by selecting the rows you want to edit on your table. You can get more information by examining the example.
Table
Material UI
Advanced TanStack Table
It is an example of Advanced TanStack Table created with Refine's @refinedev/react-table adapter. In addition to the Basic TanStack Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code.
Table
React Table
Tanstack Table
Basic TanStack Table
Refine allows you to use all the features of TanStack Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of TanStack Table in your Refine project.
Table
React Table
Tanstack Table
Ant Design
You can use predefined themes provided by Refine. In this example, we have created an example application by using the RefineThemes from @refinedev/antd. You can easily customize your theme as you wish in your Refine project.
Ant Design
Customization
Chakra UI
You can use predefined themes provided by Refine. In this example, we have created an example application by using the RefineThemes from @refinedev/chakra-ui. You can easily customize your theme as you wish in your Refine project.
Chakra UI
Customization
Mantine
You can use predefined themes provided by Refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mantine. You can easily customize your theme as you wish in your Refine project.
Mantine
Customization
Material UI
You can use predefined themes provided by Refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mui. You can easily customize your theme as you wish in your Refine project.
Material UI
Customization
Upload Ant Design Base64 Upload
Refine allows you to upload your files or images in your forms as Base64 Upload. When uploading a file or an image to a source, you can complete your upload by encoding it to Base64. In this example, you'll learn how to use Refine's file2Base64 function to upload a file as Base64.
Ant Design
Upload
Upload Ant Design Multipart Upload
Multipart Upload is supported by the Refine. With Refine, you may upload any file using Multipart Upload logic. In this example we showed you how to upload images with Multipart Upload to a resource. Check out the live example for more information.
Ant Design
Upload
Upload Chakra UI Base64 Upload
In this example, you'll learn how to do base64 upload in Refine with useForm. For more information, you can view the live example or review the source code.
Chakra UI
Upload
Upload Chakra UI Multipart Upload
In this example, you'll learn how to do multipart upload in Refine with useForm. For more information, you can view the live example or review the source code.
Chakra UI
Upload
Upload Mantine Base64 Upload
In this example, you'll learn how to do base64 upload in Refine with useForm. For more information, you can view the live example or review the source code.
Mantine
Upload
Upload Mantine Multipart Upload
In this example, you'll learn how to do multipart upload in Refine with useForm. For more information, you can view the live example or review the source code.
Mantine
Upload
Upload Material UI Base64 Upload
In this example, you'll learn how to do base64 upload in Refine with React Hook Form. For more information, you can view the live example or review the source code.
Material UI
Upload
Upload Material UI Multipart Upload
In this example, you'll learn how to do multipart upload in Refine with React Hook Form. For more information, you can view the live example or review the source code.
Material UI
Upload
Previous
Inferencer
Next
RealWorld Example