The DataTable component exposes a bodyRef property that can be used to pass a ref to the underlying table tbody element. This ref can be passed to the useAutoAnimate() hook from the excellent AutoAnimate library to animate table rows when they are added, removed or reordered.
Here is the code:
// ...
const [bodyRef] = useAutoAnimate<HTMLTableSectionElement>();
return (
<>
<DataTable
borderRadius="sm"
withTableBorder
minHeight={200}
columns={[
{
accessor: 'move',
title: (
<Center>
<IconArrowsUpDown size={14} />
</Center>
),
render: (_, index) => (
<Box display="flex">
<ActionIcon
variant="transparent"
color="green"
disabled={index === 0}
onClick={() => moveUserUp(index)}
>
<IconArrowUp size={18} />
</ActionIcon>
<ActionIcon
variant="transparent"
color="green"
disabled={index === records.length - 1}
onClick={() => moveUserDown(index)}
>
<IconArrowDown size={18} />
</ActionIcon>
</Box>
),
},
{ accessor: 'name', width: '100%' },
{ accessor: 'age', textAlign: 'right' },
{
accessor: 'delete',
title: (
<ActionIcon variant="transparent" color="red" disabled={records.length === 0} onClick={handleDeleteAll}>
<IconTrashX size={18} />
</ActionIcon>
),
render: ({ id }) => (
<ActionIcon variant="transparent" color="red" onClick={() => deleteUser(id)}>
<IconTrash size={18} />
</ActionIcon>
),
},
]}
records={records}
bodyRef={bodyRef}
/>
{/* ... */}
</>
);Head over to the next example to learn more.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4