# Table Component

A flexible table component with support for basic table layouts and data-driven tables.

## Components

### Table
Basic table components for building custom table layouts:

- `Table` - Main table wrapper with overflow handling
- `TableHeader` - Table header section
- `TableBody` - Table body section
- `TableFooter` - Table footer section
- `TableRow` - Table row
- `TableHead` - Table header cell
- `TableCell` - Table data cell
- `TableCaption` - Table caption

### DataTable
A data-driven table component that automatically renders data arrays with customizable columns and cell rendering.

## Usage

### Basic Table

```tsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@investtal/table"

function BasicTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Jane Smith</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>User</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}
```

### DataTable

```tsx
import { DataTable } from "@investtal/table"

interface User {
  id: number
  name: string
  email: string
  role: string
  status: "active" | "inactive"
}

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

function UsersTable() {
  return (
    <DataTable
      data={users}
      columns={[
        { key: "id", header: "ID" },
        { key: "name", header: "Name" },
        { key: "email", header: "Email" },
        { key: "role", header: "Role" },
        {
          key: "status",
          header: "Status",
          render: (value) => (
            <span className={`px-2 py-1 rounded text-xs ${
              value === "active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
            }`}>
              {String(value)}
            </span>
          ),
        },
      ]}
    />
  )
}
```

## Features

- **Flexible Layout**: Use individual table components for custom layouts
- **Data-Driven**: DataTable component for automatic rendering of data arrays
- **Custom Rendering**: Custom cell rendering with render functions
- **Responsive**: Built-in overflow handling for mobile devices
- **Accessible**: Proper semantic HTML structure
- **Stylable**: Customizable with Tailwind CSS classes

## Props

### DataTable Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `TData[]` | - | Array of data objects to render |
| `columns` | `Column[]` | - | Column definitions |
| `className` | `string` | - | Additional CSS classes |
| `emptyMessage` | `string` | "No data available" | Message to show when data is empty |

### Column Definition

```tsx
interface Column<TData> {
  key: keyof TData
  header: string
  render?: (value: TData[keyof TData], row: TData) => React.ReactNode
}
```

## Future Enhancements

- Sorting functionality
- Pagination support
- Row selection
- Column filtering
- Advanced styling options
- Integration with TanStack Table for advanced features