Examples
Last updated
Last updated
This examples uses to create a virtualized list. This means that only the viewable rows will be rendered.
You can implement virtuallization with any library you want.
This approach is highly recommended, as it vastly improves performance for large datasets.
In this example, 1000 items and 1000 rows are rendered, and eveything still runs very smoothly.
This shows simple integration of internal drag-and-drop interactions.
You can also apply a policy to what can be dragged where by dynamically disabling unhallowed rows.
Just like this example, you can implement a couple other things:
Dragging and Dropping items from the timeline to an external droppable
Dragging and Dropping items from one timeline to another
And any other drag-and-drop interaction you can think of.
This examples adds a time axis and time cursor to indicate the current time and the timeframe represented in the timeline.
These components are external to the library, and are an example of how to use dnd-timeline's context to create custom components.
This example adds a debounce or a throttle mechanism to the timeframe, in order to greatly improve the zoom and pan performance.
Play around with the different options to see how they feel!
This example uses @dnd-kit's preset to allow re-ordering of rows by dragging and dropping.
This example uses @dnd-kit's and to enable dragging and dropping from an external location into the timeline.