Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
If you use react-beautiful-dnd and are struggling with Atlassians prehistoric example code (wtf does @flow even mean, who still writes class components??) you might find this example component helpful. If you use this in a draggable row instead of td tags, this will make the table keep its dimensions when dragging.
import React, {FunctionComponent} from "react";
type TableCellProps = {
children: unknown
const DimensionLockingTableCell: FunctionComponent<TableCellProps> = ({children}) => {
const ref = React.useRef<HTMLTableDataCellElement>(null);
if (ref.current) {
return (
<td ref={ref} style={{
width: ref.current.getBoundingClientRect().width,
height: ref.current.getBoundingClientRect().height,
} else {
return (<td ref={ref}>{children}</td>);
export default DimensionLockingTableCell;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment