UI Lab | Table

Table

Table component for displaying and organizing tabular data.

ID	Name	Email	Status
1	Alice Johnson	alice@example.com	Active
2	Bob Smith	bob@example.com	Inactive
3	Carol White	carol@example.com	Active

import { Table } from "@/components/table";
 
interface User {
  id: number;
  name: string;
  email: string;
  status: string;
}
 
const data: User[] = [
  { id: 1, name: "Alice Johnson", email: "alice@example.com", status: "Active" },
  { id: 2, name: "Bob Smith", email: "bob@example.com", status: "Inactive" },
];
 
export function Example() {
  return (
    <Table
      data={data}
      columns={[
        { key: "id", label: "ID" },
        { key: "name", label: "Name" },
        { key: "email", label: "Email" },
        { key: "status", label: "Status" },
      ]}
    />
  );
}

Basic Table

A simple data table displaying structured information with columns and rows. Use this for displaying tabular data in your application.

ID	Name	Email	Status
1	Alice Johnson	alice@example.com	Active
2	Bob Smith	bob@example.com	Inactive
3	Carol White	carol@example.com	Active

import React from 'react';
import { Table } from 'ui-lab-components';
 
export default function Example() {
  const data = [
    { id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'Active' },
    { id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'Inactive' },
    { id: 3, name: 'Carol White', email: 'carol@example.com', status: 'Active' }
  ];
 
  return (
    <Table
      data={data}
      columns={[
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' },
        { key: 'status', label: 'Status' }
      ]}
    />
  );
}