# Table Filter
URL: https://remocn.dev/docs/product-scenes/table-filter

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

- Install: `npx shadcn@latest add @remocn/table-filter`
- Vibe: clean
- Natural length: 196f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `3` | 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` | `number` | `1` | 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 |

## Use when
- A CRM, database or ops-tool launch where filter, select, act is the loop to show.
- A beat proving the product handles bulk actions across many rows.
- A data-heavy scene that needs structure rather than a chart.

## Don't use when
- You want to compute and chart columns — use `sheet-formula`.
- You want a ranking that reorders on its own — use `leaderboard-climb`.
- You want stats and a chart feed that update live — use `live-dashboard`.