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

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>[email protected]</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Jane Smith</TableCell>
          <TableCell>[email protected]</TableCell>
          <TableCell>User</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

DataTable

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: "[email protected]", role: "Admin", status: "active" },
  { id: 2, name: "Jane Smith", email: "[email protected]", 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

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