Data Table Component

Basic Table

ID	Name	Email	Role	Status
1	John Doe	john@example.com	Admin	Active
2	Jane Smith	jane@example.com	Editor	Active
3	Bob Johnson	bob@example.com	Viewer	Inactive
4	Alice Williams	alice@example.com	Editor	Active
5	Charlie Brown	charlie@example.com	Admin	Inactive

Table with Stripes

ID	Name	Email	Role	Status
1	John Doe	john@example.com	Admin	Active
2	Jane Smith	jane@example.com	Editor	Active
3	Bob Johnson	bob@example.com	Viewer	Inactive
4	Alice Williams	alice@example.com	Editor	Active
5	Charlie Brown	charlie@example.com	Admin	Inactive

Table with Caption

List of users with their roles and statuses
ID	Name	Email	Role	Status
1	John Doe	john@example.com	Admin	Active
2	Jane Smith	jane@example.com	Editor	Active
3	Bob Johnson	bob@example.com	Viewer	Inactive
4	Alice Williams	alice@example.com	Editor	Active
5	Charlie Brown	charlie@example.com	Admin	Inactive

Usage Examples

Basic Data Table

import { DataTable } from "@/components/data-table";

type User = {
  id: number;
  name: string;
  email: string;
};

const users: User[] = [
  { id: 1, name: "John Doe", email: "john@example.com" },
  { id: 2, name: "Jane Smith", email: "jane@example.com" }
];

const columns = [
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'email', title: 'Email' }
];

<DataTable data={users} columns={columns} />

Data Table with Custom Cell Rendering

const columns = [
  {
    key: 'status',
    title: 'Status',
    render: (value: string) => (
      <span className={`px-2 py-1 rounded-full text-xs ${value === 'Active' ? 'bg-green-500/20 text-green-600' : 'bg-red-500/20 text-red-600'}`}>
        {value}
      </span>
    )
  }
];

Data Table with Options

<DataTable
  data={users}
  columns={columns}
  caption="Users list"
  striped
  hoverable
/>