Data display

Data Table — editable Remotion component

A modern animated data table driven by independent column definitions and row objects, with configurable alignment, widths, and badge cells.

Component details

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:

npx @agent-motion/cli create remotion my-remotion-video

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add data-table@0.3.1

Define columns independently from tableData; every column key reads the matching property from each row object.
Presets are bundles of public props: use dark for dark scenes and light for bright editorial or dashboard scenes, then override individual values when needed.
Use width as a relative grid weight, align as left, center, or right, and variant badge for compact status-like values.
The table supports two to six columns and one to eight rows; keep labels and values concise enough to avoid wrapping.
String, number, boolean, null, and undefined cell values are supported; booleans become Yes or No and empty values become an em dash.
The outer composition is transparent while surfaceColor controls only the table itself.
Use backgroundOpacity to fade table surfaces without fading text, borderWidth to tune or remove borders, and borderRadius to control the outer corners.
Rows enter sequentially; tune the sequence with entranceInFrames and staggerInFrames, or disable all entrance motion with animationEnabled.
Leave x, y, width, and height unset for a centered table with responsive default sizing.