Is it possible to update one of the records in a Table?
One of the actions in my table consists of making an API call and changing the status of a record from
activeactive to inactiveinactive. I want to update the record in the table to reflect the action performed. How can I do this? Here's a snippet of my current code:export default function StoresList() {
const { tableProps, } = useTable<StoreList>({
syncWithLocation: true,
});
const toggleStoreStatus = ({ status, id }: StoreList) => {
// API Call
// How to update the record or refresh the table?
};
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column
dataIndex="status"
title={translate("fields.status.title", "Status")}
render={(value) => <RenderActiveStatus value={value} />}
/>
<Table.Column<StoreList>
width="240px"
title={translate("actions.actions", "Ações")}
dataIndex="actions"
render={(_, record) => (
<Button
onClick={() => toggleStoreStatus(record)}
size="small"
type="link"
>
{record.status === "approved"
? translate("buttons.deactivate", "Desativar")
: translate("buttons.activate", "Ativar")}
</Button>
)}
/>
</Table>
</List>
);
}export default function StoresList() {
const { tableProps, } = useTable<StoreList>({
syncWithLocation: true,
});
const toggleStoreStatus = ({ status, id }: StoreList) => {
// API Call
// How to update the record or refresh the table?
};
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column
dataIndex="status"
title={translate("fields.status.title", "Status")}
render={(value) => <RenderActiveStatus value={value} />}
/>
<Table.Column<StoreList>
width="240px"
title={translate("actions.actions", "Ações")}
dataIndex="actions"
render={(_, record) => (
<Button
onClick={() => toggleStoreStatus(record)}
size="small"
type="link"
>
{record.status === "approved"
? translate("buttons.deactivate", "Desativar")
: translate("buttons.activate", "Ativar")}
</Button>
)}
/>
</Table>
</List>
);
}
