Row

A row is a container for items.

The timeline is constructed of many rows, stacked on top of each other, where each row contains all the items related to it.

Row is an extension of dnd-kits's Droppable.

Please make sure you unserstand it's basic concepts before moving on.

dnd-timeline does not provide you with a <Row /> component, so you will need to build your own.

A basic Row component will look like this:

Row.tsx

interface RowProps extends RowDefinition {
  children: React.ReactNode;
  sidebar: React.ReactNode;
}

function Row(props: RowProps) {
  const { setNodeRef, rowWrapperStyle, rowStyle, rowSidebarStyle } = useRow({
    id: props.id,
  });

  return (
    <div style={rowWrapperStyle}>
      <div style={rowSidebarStyle}>{props.sidebar}</div>
      <div ref={setNodeRef} style={rowStyle}>
        {props.children}
      </div>
    </div>
  );
}

dnd-timeline also provides you with a helper type that you can extend.

type RowDefinition = {
  id: string;
  disabled?: boolean;
};

You can fully customize this component according to your needs.

Usage

Every <Row /> component should be rendered as a child of it's parent row.

Timeline.tsx

const { setTimelineRef, style } = useTimelineContext();

return (
  <div ref={setTimelineRef} style={style}>
    {rows.map((row) => (
      <Row id={row.id} sidebar={<Sidebar row={row} />}>
        // render row items...
      </Row>
    ))}
  </div>
);