Records Table

Name: elia
Author: AILE.SH

CRM-style grid with tags, sorting, and relationship status.

Installation

bun add elia

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

Usage

import { RecordsTable, type RecordsRow } from "@aile.sh/elia";

const customers: RecordsRow[] = [
  { id: "acme", name: "Acme Corp — Berlin", tags: ["Enterprise", "EU"], last: "2 days ago", strength: "strong", website: "acme.example.com" },
  { id: "globex", name: "Globex — Austin", tags: ["Startup"], last: "3 weeks ago", strength: "weak", website: "globex.example.com" },
  { id: "initech", name: "Initech — London", tags: ["Enterprise"], last: "No contact", strength: "none" },
];

export function Example() {
  return (
    <RecordsTable
      rows={customers}
      tagColors={{ Enterprise: "#3f78ff", Startup: "#25a878", EU: "#f09a2f" }}
      onSelectionChange={(ids) => console.log("selected", ids)}
      onSortChange={(sort) => console.log("sorted by", sort.key, sort.dir)}
    />
  );
}

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