theshanelevine

Filter Table

Component 2

About

A task table with status filter chips that reorganize live data — clicking All, To do, In Progress, or Completed smoothly expands and collapses the matching rows.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Filter Table to your project and fits it to your theme.

Code

How Filter Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import FilterTable from "@/components/ui/filter-table";

export default function Default() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-[#17181a] p-8">
      <FilterTable />
    </div>
  );
}

More by theshanelevine

View all
  • Loading State

    Loading State

    982
  • Streaming Text

    Streaming Text

    519
  • Thinking

    Thinking

    173
  • Records Table

    Records Table

    129
  • Approval Card

    Approval Card

    84
  • Chat Panel

    Chat Panel

    40
  • Recommendation Card

    Recommendation Card

    4
  • Code Block

    Code Block

    2