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

    940
  • Streaming Text

    Streaming Text

    484
  • Thinking

    Thinking

    157
  • Records Table

    Records Table

    111
  • Approval Card

    Approval Card

    74
  • Chat Panel

    Chat Panel

    39
  • Recommendation Card

    Recommendation Card

    4
  • Code Block

    Code Block

    1