'Animate datagrid record interactions

Has anyone used the Material UI animation options to animate interactions with the datagrid?

We have a task list with the option to change the status of the task. If someone marks the task as complete we would like to animate that row disappearing.

JSX of TaskList component:

<List
  exporter={false}
  pagination={false}
  perPage={9999}
  filter={{
    role_contact_ids: identity.contact_id,
    status__not: "Complete",
   }}
   sort={{ field: "date_end", order: "ASC" }}
 >
    <TaskListDatagrid />
</List>

JSX of TaskListDatagrid component

<Datagrid bulkActionButtons={false}>
  <TextField source="name" />
  <ReferenceField source="project_id" reference="projects" link={false}>
    <TextField source="name" />
  </ReferenceField>
  <DateField source="date_end" label="Due date" />
  <CompleteTaskButton>Mark Complete</CompleteTaskButton>
</Datagrid>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Animate datagrid record interactions

Sources

Related Questions