Update data in datagrid
@kapa.ai How can i update data in datagrid after i delete a item from the datagrid? Here i am providing you my component.
Code:
import React from "react";
import {
useDataGrid,
DeleteButton,
List,
} from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { IResourceComponentsProps, useDelete } from "@refinedev/core";
import { axiosInstance } from "@refinedev/simple-rest";
interface IUserList {
_id: string;
email: string;
name: string;
}
export const UserList: React.FC = () => {
const { dataGridProps } = useDataGrid<IUserList>({
syncWithLocation: false,
filters: { mode: "off" },
sorters: { mode: "off" },
pagination: { mode: "off", pageSize: 10, current: 1 },
});
const handleDeleteuser = async ({ id }: { id: any }) => {
try {
console.log(id, "++");
await axiosInstance.delete(
{
data: {
_id: id,
},
}
);
} catch (error) {
console.log(error);
}
};
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "name",
headerName: "name",
minWidth: 120,
filterable: true,
flex: 1,
},
{
field: " ",
headerName: "Actions",
flex: 1,
sortable: false,
disableColumnMenu: true,
renderCell: function render({ row }) {
return (
<>
<DeleteButton
hideText
recordItemId={row._id}
onClick={() => handleDeleteuser({ id: row._id })}
/>
</>
);
},
minWidth: 120,
},
],
[]
);
return (
<List>
<DataGrid
{...dataGridProps}
getRowId={(row) => row._id}
columns={columns}
autoHeight
/>
</List>
);
};
Code:
import React from "react";
import {
useDataGrid,
DeleteButton,
List,
} from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { IResourceComponentsProps, useDelete } from "@refinedev/core";
import { axiosInstance } from "@refinedev/simple-rest";
interface IUserList {
_id: string;
email: string;
name: string;
}
export const UserList: React.FC = () => {
const { dataGridProps } = useDataGrid<IUserList>({
syncWithLocation: false,
filters: { mode: "off" },
sorters: { mode: "off" },
pagination: { mode: "off", pageSize: 10, current: 1 },
});
const handleDeleteuser = async ({ id }: { id: any }) => {
try {
console.log(id, "++");
await axiosInstance.delete(
api{
data: {
_id: id,
},
}
);
} catch (error) {
console.log(error);
}
};
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "name",
headerName: "name",
minWidth: 120,
filterable: true,
flex: 1,
},
{
field: " ",
headerName: "Actions",
flex: 1,
sortable: false,
disableColumnMenu: true,
renderCell: function render({ row }) {
return (
<>
<DeleteButton
hideText
recordItemId={row._id}
onClick={() => handleDeleteuser({ id: row._id })}
/>
</>
);
},
minWidth: 120,
},
],
[]
);
return (
<List>
<DataGrid
{...dataGridProps}
getRowId={(row) => row._id}
columns={columns}
autoHeight
/>
</List>
);
};
