Filter Table

Status chips that reorganize live data.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { FilterTable } from "@aile.sh/elia";

export function Example() {
  return (
    <FilterTable
      columns={["Ticket", "Opened", "Status", "Assignee"]}
      rows={[
        { task: "Fix login redirect loop", date: "Aug 02", status: "progress", owner: "Priya" },
        { task: "Rotate API credentials", date: "Aug 05", status: "todo", owner: "Marcus" },
        { task: "Upgrade Postgres to 16", date: "Jul 28", status: "done", owner: "Elif" },
        { task: "Write incident postmortem", date: "Aug 11", status: "todo", owner: "Priya" },
      ]}
      onFilterChange={(key) => console.log("filter:", key)}
      onRowClick={(row) => console.log("open ticket:", row.task)}
    />
  );
}

— elia design system · MIT · primitives · https://github.com/aile-sh/elia