Table Filter

A CRM table filters by a stage, sorts, selects rows, and a bulk-action bar slides up.

Installation

$ pnpm dlx shadcn@latest add @remocn/table-filter

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TableFilter } from "@/components/remocn/table-filter";
 
const TableFilterScene = () => (
  <TableFilter
    title="Companies"
    filterAttribute="Stage"
    filterValue="Closed-won"
    bulkAction="Add to sequence"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TableFilter"
    component={TableFilterScene}
    durationInFrames={220}
    fps={30}
    width={1280}
    height={720}
  />
);

A table window opens a filter popover and applies filterValue to filterAttribute, collapsing the list; the cursor then sorts by ARR, checks selectCount rows and a bulk-action bar slides up with bulkAction, which the cursor hovers and clicks. Pass rows (company, domain, stage, arr, owner, lastInteraction, color), title and workspace. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props12

Prop	Type	Default
rows	TableRecord[]DEFAULT_ROWS Table records: company, domain, stage, arr, owner, lastInteraction, color
title	string"Companies" Table title in the sidebar and header
filterAttribute	string"Stage" Attribute shown in the filter chip
filterValue	string"Closed-won" Stage value rows are filtered by
selectCount	number3 How many remaining rows get selected
bulkAction	string"Add to sequence" Label of the bulk-action button
workspace	string"remocn" Workspace name in the sidebar
theme	"light" \| "dark""light" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

rowsTableRecord[]
Table records: company, domain, stage, arr, owner, lastInteraction, color
DefaultDEFAULT_ROWS
titlestring
Table title in the sidebar and header
Default"Companies"
filterAttributestring
Attribute shown in the filter chip
Default"Stage"
filterValuestring
Stage value rows are filtered by
Default"Closed-won"
selectCountnumber
How many remaining rows get selected
Default3
bulkActionstring
Label of the bulk-action button
Default"Add to sequence"
workspacestring
Workspace name in the sidebar
Default"remocn"
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters