@mycrm-ui/react-table LLM Guide

1. Basic Usage

This guide is for AI agents that need to generate or modify code using @mycrm-ui/react-table.

Use this part when the user wants a plain read-only table without advanced features such as sorting, selection, filtering, editing, row actions, virtual scroll, or column management.

Purpose

The basic pattern is the minimum table setup.

Prepare these three things first:

• columns
• data
• rowKey

If the user did not explicitly ask for more, do not add extra feature props.

Required Inputs

columns

Define the column structure.

Typical fields:

• key
• label
• render

const columns: ColumnDef<User>[] = [
  { key: "name", label: "Name", render: (row) => row.name },
  { key: "email", label: "Email", render: (row) => row.email },
  { key: "role", label: "Role", render: (row) => row.role },
];

data

An array of rows.

const data: User[] = [
  { id: 1, name: "Hong", email: "hong@example.com", role: "Admin" },
  { id: 2, name: "Kim", email: "kim@example.com", role: "User" },
];

rowKey

Return a stable unique key for each row.

Rules:

• Use a stable unique value.
• Prefer a real domain ID.
• Return a string.

rowKey={(row) => String(row.id)}

Do not use:

• array index
• unstable computed values

Minimal Pattern

import { Table } from "@mycrm-ui/react-table";
import type { ColumnDef } from "@mycrm-ui/react-table";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const columns: ColumnDef<User>[] = [
  { key: "name", label: "Name", render: (row) => row.name },
  { key: "email", label: "Email", render: (row) => row.email },
  { key: "role", label: "Role", render: (row) => row.role },
];

export default function UserTable({ rows }: { rows: User[] }) {
  return (
    <Table
      columns={columns}
      data={rows}
      rowKey={(row) => String(row.id)}
    />
  );
}

LLM Decision Rules

Use this guide when the request means:

• "Show a basic table"
• "Render a list as a table"
• "Start with a simple read-only table"

Then:

1. Define the row type.
2. Create ColumnDef<T>[].
3. Pass columns, data, and rowKey.
4. Stop there unless more features were explicitly requested.

Allowed Additions

• classNames if styling is requested
• custom render
• minimal types needed to complete the example

Do Not Add By Default

• sorting
• selection
• filter
• editing
• rowActions
• loading
• scroll
• columnManager
• expand
• tooltip
• copyable

Common Mistakes

Unstable rowKey

Bad:

rowKey={(_, index) => String(index)}

Good:

rowKey={(row) => String(row.id)}

Adding advanced features too early

Do not add sorting, filtering, selection, and editing all at once without a clear request.

Safe Output Template

import { Table } from "@mycrm-ui/react-table";
import type { ColumnDef } from "@mycrm-ui/react-table";

interface Row {
  id: number;
  name: string;
  email: string;
}

const columns: ColumnDef<Row>[] = [
  { key: "name", label: "Name", render: (row) => row.name },
  { key: "email", label: "Email", render: (row) => row.email },
];

export default function ExampleTable({ rows }: { rows: Row[] }) {
  return (
    <Table
      columns={columns}
      data={rows}
      rowKey={(row) => String(row.id)}
    />
  );
}

Move To The Next Guide When

• sorting is required
• checkbox selection is required
• filtering is required
• inline editing is required