How to current page to 1 on apply filters

const { setCurrent } = useTable();

// When applying filters, reset the current page to 1
setCurrent(1);

const { setCurrent } = useTable();

// When applying filters, reset the current page to 1
setCurrent(1);

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  // Your custom logic to fetch data
  
  return {  
    data,  // The data you fetched
    total,  // The total number of resources
  };  
};

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  // Your custom logic to fetch data
  
  return {  
    data,  // The data you fetched
    total,  // The total number of resources
  };  
};

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  // Fetch data from your API
  const response = await fetchYourData(resource, pagination, sorters, filters, meta);

  // Modify the data as needed
  const modifiedData = response.data.map(item => {
    // Modify item as needed
    return modifiedItem;
  });

  return {  
    data: modifiedData,  
    total: response.total,  
  };  
};

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
  // Fetch data from your API
  const response = await fetchYourData(resource, pagination, sorters, filters, meta);

  // Modify the data as needed
  const modifiedData = response.data.map(item => {
    // Modify item as needed
    return modifiedItem;
  });

  return {  
    data: modifiedData,  
    total: response.total,  
  };  
};

getList: async ({{ resource, pagination, sorters, filters, meta }}) => {{  
  // Fetch data from your API
  const response = await fetchYourData(resource, pagination, sorters, filters, meta);

  // Modify the data as needed
  const modifiedData = response.data.map(item => {{
    // Modify item as needed
    return modifiedItem;
  }});

  return {{  
    data: modifiedData,  
    total: response.total,
    additionalData: response.additionalData,  // Your additional data
  }};  
}};

getList: async ({{ resource, pagination, sorters, filters, meta }}) => {{  
  // Fetch data from your API
  const response = await fetchYourData(resource, pagination, sorters, filters, meta);

  // Modify the data as needed
  const modifiedData = response.data.map(item => {{
    // Modify item as needed
    return modifiedItem;
  }});

  return {{  
    data: modifiedData,  
    total: response.total,
    additionalData: response.additionalData,  // Your additional data
  }};  
}};

const { tableProps } = useTable({
  resource: "posts",
  syncWithLocation: true,
});

const { tableProps } = useTable({
  resource: "posts",
  syncWithLocation: true,
});

const { listProps } = useSimpleList({
  resource: "posts",
  syncWithLocation: true,
});

const { listProps } = useSimpleList({
  resource: "posts",
  syncWithLocation: true,
});

const {{ tableProps }} = useTable({{
  resource: "posts",
  syncWithLocation: true,
}});

const {{ tableProps }} = useTable({{
  resource: "posts",
  syncWithLocation: true,
}});

const {{ listProps }} = useSimpleList({{
  resource: "posts",
  syncWithLocation: true,
}});

const {{ listProps }} = useSimpleList({{
  resource: "posts",
  syncWithLocation: true,
}});

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
  // ---  
  onError: async (error) => {  
    if (error.status === 401) {  
      return {  
        logout: true,  
        redirectTo: "/login",  
        error,  
      };  
    }  
    return {};  
  },  
  // ---  
};  

import { AuthProvider } from "@refinedev/core";  
  
const authProvider: AuthProvider = {  
  // ---  
  onError: async (error) => {  
    if (error.status === 401) {  
      return {  
        logout: true,  
        redirectTo: "/login",  
        error,  
      };  
    }  
    return {};  
  },  
  // ---  
};  

const { onFinish } = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
  e.preventDefault();  
  const data = await onFinish(formValues);  
  // handle the submitted data
};  

const { onFinish } = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
  e.preventDefault();  
  const data = await onFinish(formValues);  
  // handle the submitted data
};  

const { onFinish } = useForm();

onFinish({  
  firstName: "",  
  email: "",  
  skills: "",  
});  

const { onFinish } = useForm();

onFinish({  
  firstName: "",  
  email: "",  
  skills: "",  
});  

const { onFinish } = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
  e.preventDefault();  
  const data = await onFinish({  
    // Your custom data here
  });  
  // handle the submitted data
};  

const { onFinish } = useForm();

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {  
  e.preventDefault();  
  const data = await onFinish({  
    // Your custom data here
  });  
  // handle the submitted data
};  

import { Link } from "react-router-dom";

<Link to="/posts?filter=value">Go to Posts</Link>

import { Link } from "react-router-dom";

<Link to="/posts?filter=value">Go to Posts</Link>

function App() {  
 return (  
 <Refine  
 ...  
 options={{  
  syncWithLocation: true  
 }}  
 />  
 );  
}  

function App() {  
 return (  
 <Refine  
 ...  
 options={{  
  syncWithLocation: true  
 }}  
 />  
 );  
}  

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  const handleRedirect = () => {
    const filters = [
      {
        field: "page",
        operator: "eq",
        value: "1",
      },
    ];

    // Convert the filters array to a shorter format
    const shortFilters = filters.map((filter, index) => ({
      [`f${index}`]: `${filter.field},${filter.operator},${filter.value}`,
    }));

    // Redirect to the new page with the short filters
    history.push(`/posts?${new URLSearchParams(shortFilters).toString()}`);
  };

  // ...
}

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  const handleRedirect = () => {
    const filters = [
      {
        field: "page",
        operator: "eq",
        value: "1",
      },
    ];

    // Convert the filters array to a shorter format
    const shortFilters = filters.map((filter, index) => ({
      [`f${index}`]: `${filter.field},${filter.operator},${filter.value}`,
    }));

    // Redirect to the new page with the short filters
    history.push(`/posts?${new URLSearchParams(shortFilters).toString()}`);
  };

  // ...
}

const { mutate } = useCreate();

const handleCreate = async () => {
  const newRecord = {
    name: "New Category",
    description: "New Category Description",
  };

  try {
    const response = await mutate({
      resource: "categories",
      values: newRecord,
    });

    console.log(response);  // Logs the server's response data
  } catch (error) {
    console.error(error);  // Logs any error that occurred
  }
};

const { mutate } = useCreate();

const handleCreate = async () => {
  const newRecord = {
    name: "New Category",
    description: "New Category Description",
  };

  try {
    const response = await mutate({
      resource: "categories",
      values: newRecord,
    });

    console.log(response);  // Logs the server's response data
  } catch (error) {
    console.error(error);  // Logs any error that occurred
  }
};

const { mutate } = useCreate();

const handleCreate = () => {
  const newRecord = {
    name: "New Category",
    description: "New Category Description",
  };

  mutate(
    {
      resource: "categories",
      values: newRecord,
    },
    {
      onSuccess: (data) => {
        console.log(data);  // Logs the server's response data
      },
      onError: (error) => {
        console.error(error);  // Logs any error that occurred
      },
    }
  );
};

const { mutate } = useCreate();

const handleCreate = () => {
  const newRecord = {
    name: "New Category",
    description: "New Category Description",
  };

  mutate(
    {
      resource: "categories",
      values: newRecord,
    },
    {
      onSuccess: (data) => {
        console.log(data);  // Logs the server's response data
      },
      onError: (error) => {
        console.error(error);  // Logs any error that occurred
      },
    }
  );
};

const { mutate } = useUpdate({
  invalidates: false,
});

const { mutate } = useUpdate({
  invalidates: false,
});

const {{ data }} = useQuery("posts", fetchPosts, {{
  staleTime: 0,
}});

const {{ data }} = useQuery("posts", fetchPosts, {{
  staleTime: 0,
}});

const { data: firstData } = useOne({
  resource: "resource1",
  id: "1",
});

const { data: secondData } = useOne({
  resource: "resource2",
  id: firstData?.id,
  enabled: !!firstData,
});

const { data: firstData } = useOne({
  resource: "resource1",
  id: "1",
});

const { data: secondData } = useOne({
  resource: "resource2",
  id: firstData?.id,
  enabled: !!firstData,
});

const { data } = useShow({
  resource: "posts",
  id: "1",
  queryOptions: {
    retry: false,
  },
});

const { data } = useShow({
  resource: "posts",
  id: "1",
  queryOptions: {
    retry: false,
  },
});

<Refine
  reactQueryClientConfig={{
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  }}
>
  {/* Your app */}
</Refine>

<Refine
  reactQueryClientConfig={{
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  }}
>
  {/* Your app */}
</Refine>

const {{ data }} = useQuery("posts", fetchPosts, {{
  staleTime: 0,
}});

const {{ data }} = useQuery("posts", fetchPosts, {{
  staleTime: 0,
}});

const { tableProps, isFetched } = useTable({
  resource: "posts",
  syncWithLocation: true,
});

tableProps.loading = !isFetched;

const { tableProps, isFetched } = useTable({
  resource: "posts",
  syncWithLocation: true,
});

tableProps.loading = !isFetched;

import { useQueryClient } from "react-query";

function MyComponent() {
  const queryClient = useQueryClient();

  const handleNavigation = () => {
    // Remove the cached data
    queryClient.removeQueries("posts");

    // Navigate to the new page
    // ...
  };

  // ...
}

import { useQueryClient } from "react-query";

function MyComponent() {
  const queryClient = useQueryClient();

  const handleNavigation = () => {
    // Remove the cached data
    queryClient.removeQueries("posts");

    // Navigate to the new page
    // ...
  };

  // ...
}

const { data, isLoading } = useOne({
  resource: "posts",
  id: "1",
  queryOptions: {
    staleTime: 0,
  },
});

const { data, isLoading } = useOne({
  resource: "posts",
  id: "1",
  queryOptions: {
    staleTime: 0,
  },
});

npm create refine-app@latest my-refine-app

npm create refine-app@latest my-refine-app

cd my-refine-app
npm run dev

cd my-refine-app
npm run dev

import * as path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "index.html"),
        nested: path.resolve(__dirname, "nested/index.html"),
      },
    },
  },
  include: ["path/to/your/file"],
});

import * as path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "index.html"),
        nested: path.resolve(__dirname, "nested/index.html"),
      },
    },
  },
  include: ["path/to/your/file"],
});

npm i casbin

npm i casbin

import { newEnforcer } from "casbin";  
import { model, adapter } from "./accessControl";  

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 accessControlProvider={{  
 can: async ({ resource, action }) => {  
 const enforcer = await newEnforcer(model, adapter);  
 const can = await enforcer.enforce("editor", resource, action);  
 return { can };  
 },  
 }}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 </BrowserRouter>  
 );  
};  

export default App;  

import { newEnforcer } from "casbin";  
import { model, adapter } from "./accessControl";  

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 accessControlProvider={{  
 can: async ({ resource, action }) => {  
 const enforcer = await newEnforcer(model, adapter);  
 const can = await enforcer.enforce("editor", resource, action);  
 return { can };  
 },  
 }}  
 //...  
 >  
 {/* ... */}  
 </Refine>  
 </BrowserRouter>  
 );  
};  

export default App;  

export const adapter = new MemoryAdapter(`  
p, admin, posts, (list)|(create)  
p, admin, users, (list)|(create)  
p, admin, categories, (list)|(create)  
  
p, editor, posts, (list)|(create)  
p, editor, categories, list  
`);  

export const adapter = new MemoryAdapter(`  
p, admin, posts, (list)|(create)  
p, admin, users, (list)|(create)  
p, admin, categories, (list)|(create)  
  
p, editor, posts, (list)|(create)  
p, editor, categories, list  
`);  

import { newEnforcer } from 'casbin';
import { FileAdapter } from 'casbin';

const adapter = await FileAdapter.newAdapter('path/to/policy.csv');
const enforcer = await newEnforcer('path/to/model.conf', adapter);

import { newEnforcer } from 'casbin';
import { FileAdapter } from 'casbin';

const adapter = await FileAdapter.newAdapter('path/to/policy.csv');
const enforcer = await newEnforcer('path/to/model.conf', adapter);

import { AccessControlProvider } from "@refinedev/core";  

export const accessControlProvider: AccessControlProvider = {  
 can: async ({ resource, action, params }) => {  
  console.log(resource); // products, orders, etc.  
  console.log(action); // list, edit, delete, etc.  
  console.log(params); // { id: 1 }, { id: 2 }, etc.  

  if (meetSomeCondition) {  
   return { can: true };  
  }  

  return {  
   can: false,  
   reason: "Unauthorized",  
  };  
 },  
};  

import { AccessControlProvider } from "@refinedev/core";  

export const accessControlProvider: AccessControlProvider = {  
 can: async ({ resource, action, params }) => {  
  console.log(resource); // products, orders, etc.  
  console.log(action); // list, edit, delete, etc.  
  console.log(params); // { id: 1 }, { id: 2 }, etc.  

  if (meetSomeCondition) {  
   return { can: true };  
  }  

  return {  
   can: false,  
   reason: "Unauthorized",  
  };  
 },  
};  

import { Refine } from "@refinedev/core";  
import { accessControlProvider } from "./accessControlProvider";  

export const App = () => {  
 return (  
  <Refine  
   accessControlProvider={accessControlProvider}  
  >  
   {/* ... */}  
  </Refine>  
 );  
};  

import { Refine } from "@refinedev/core";  
import { accessControlProvider } from "./accessControlProvider";  

export const App = () => {  
 return (  
  <Refine  
   accessControlProvider={accessControlProvider}  
  >  
   {/* ... */}  
  </Refine>  
 );  
};  

Sider is integrated, which means that unaccessible resources won't appear in the sider menu.
Menu items will check access control with `{ resource, action: "list" }`. For example, if your app has a resource called `posts`, it will be checked with `{ resource: "posts", action: "list" }`.

Sider is integrated, which means that unaccessible resources won't appear in the sider menu.
Menu items will check access control with `{ resource, action: "list" }`. For example, if your app has a resource called `posts`, it will be checked with `{ resource: "posts", action: "list" }`.

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);  

import { Refine } from "@refinedev/core";  
  
const App = () => (  
 <Refine  
 ...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 meta: {  
 label: "Posts",  
 icon: "📝",  
 },  
 },  
 {  
 name: "users",  
 list: "/users",  
 meta: {  
 // Users resource will be hidden from the menu but will be accessible via the URL  
 hide: true,  
 },  
 },  
 ]}  
 />  
);  

import { Refine } from "@refinedev/core";

export const App = () => {
  return (
    <Refine
      accessControlProvider={{
        can: async ({ resource, action }) => {
          // Check if the user can perform the action on the resource
          const canAccess = /* Your logic to check access control */;

          return { can: canAccess };
        },
      }}
    >
      {/* Your app */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";

export const App = () => {
  return (
    <Refine
      accessControlProvider={{
        can: async ({ resource, action }) => {
          // Check if the user can perform the action on the resource
          const canAccess = /* Your logic to check access control */;

          return { can: canAccess };
        },
      }}
    >
      {/* Your app */}
    </Refine>
  );
};

import { CanAccess } from "@refinedev/core";  

export const MyPage = () => {  
 return (  
 <CanAccess resource="users" action="show" params={{ id: 1 }}>  
 <>  
 My Page  
 <CanAccess  
 resource="users"  
 action="block"  
 params={{ id: 1 }}  
 fallback={"You are not authorized."}  
 >  
 // Only authorized users can see this button.  
 <BlockUserButton />  
 </CanAccess>  
 </>  
 </CanAccess>  
 );  
};  

import { CanAccess } from "@refinedev/core";  

export const MyPage = () => {  
 return (  
 <CanAccess resource="users" action="show" params={{ id: 1 }}>  
 <>  
 My Page  
 <CanAccess  
 resource="users"  
 action="block"  
 params={{ id: 1 }}  
 fallback={"You are not authorized."}  
 >  
 // Only authorized users can see this button.  
 <BlockUserButton />  
 </CanAccess>  
 </>  
 </CanAccess>  
 );  
};  

import { Show, Breadcrumb } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 breadcrumb={  
 <div  
 style={{  
 padding: "3px 6px",  
 border: "2px dashed cornflowerblue",  
 }}  
 >  
 <Breadcrumb />  
 </div>  
 }  
 >  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};  

import { Show, Breadcrumb } from "@refinedev/mui";  

const PostShow: React.FC = () => {  
 return (  
 <Show  
 breadcrumb={  
 <div  
 style={{  
 padding: "3px 6px",  
 border: "2px dashed cornflowerblue",  
 }}  
 >  
 <Breadcrumb />  
 </div>  
 }  
 >  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};  

import { Refine } from "@refinedev/core";

const App = () => (
 <Refine
  resources={[
   {
    name: "posts",
    list: ListPosts,
    create: CreatePost,
    edit: EditPost,
    show: ShowPost,
    label: "My Custom Label", // This will be used as the breadcrumb label
   },
   // Other resources...
  ]}
 >
  {/* ... */}
 </Refine>
);

import { Refine } from "@refinedev/core";

const App = () => (
 <Refine
  resources={[
   {
    name: "posts",
    list: ListPosts,
    create: CreatePost,
    edit: EditPost,
    show: ShowPost,
    label: "My Custom Label", // This will be used as the breadcrumb label
   },
   // Other resources...
  ]}
 >
  {/* ... */}
 </Refine>
);

import {{ Refine }} from "@refinedev/core";

const App = () => (
 <Refine
  resources={{[
   {{
    name: "posts",
    list: ListPosts,
    create: CreatePost,
    edit: EditPost,
    show: ShowPost,
    label: "My Custom Label", // This will be used as the breadcrumb label
   }},
   // Other resources...
  ]}}
 >
  {{/* ... */}}
 </Refine>
);