Examples › Using bodyRef with AutoAnimate

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.

	Name	Age

No records

// ...

const [bodyRef] = useAutoAnimate<HTMLTableSectionElement>();

return (
  <>
    <DataTable
      mb="xl"
      withBorder
      minHeight={160}
      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', textAlignment: '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}
    />
    {/* ... */}
  </>
);