# Table

Renders a tabular display for presenting structured data with customizable styles.

### **Import**
```tsx
import { Table } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { TableContainer,
  TableCaption,
  TableHead,
  TableRow,
  TableHeadCell,
  TableBody,
  TableCell, } from '@app-studio/web';

export const DefaultDemo = () => {
  interface DataRow {
    invoice: string;
    paymentStatus: string;
    totalAmount: string;
    paymentMethod: string;
  }

  const columns = [
    { title: 'Invoice', field: 'invoice' },
    { title: 'Payment Status', field: 'paymentStatus' },
    { title: 'Total Amount', field: 'totalAmount' },
    { title: 'Payment Method', field: 'paymentMethod' },
  ];
  const data: DataRow[] = [
    {
      invoice: 'INV001',
      paymentStatus: 'Paid',
      totalAmount: '$250.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV002',
      paymentStatus: 'Pending',
      totalAmount: '$150.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV003',
      paymentStatus: 'Unpaid',
      totalAmount: '$350.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV004',
      paymentStatus: 'Paid',
      totalAmount: '$450.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV005',
      paymentStatus: 'Paid',
      totalAmount: '$550.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV006',
      paymentStatus: 'Pending',
      totalAmount: '$200.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV007',
      paymentStatus: 'Unpaid',
      totalAmount: '$300.00',
      paymentMethod: 'Credit Card',
    },
  ];
  return (
    <TableContainer>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHead>
        <TableRow>
          {columns.map((column) => (
            <TableHeadCell key={column.field}>{column.title}</TableHeadCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((row, index) => (
          <TableRow key={index}>
            {columns.map((column, columnIndex) => (
              <TableCell key={column.field} isFirstColumn={columnIndex === 0}>
                {row[column.field as keyof DataRow]}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </TableContainer>
  );
};
```

### **data**
An array of data objects to be displayed in the table rows.

- **Type:** `any[]`
- **Default:** `None`
- **Possible Values:** `any[]`

```tsx
import React from 'react';
import { Table } from '@app-studio/web';

export const DataDemo = () => {
  const cols = [
    { title: 'Invoice', field: 'invoice' },
    { title: 'Payment Status', field: 'paymentStatus' },
    { title: 'Total Amount', field: 'totalAmount' },
    { title: 'Payment Method', field: 'paymentMethod' },
  ];
  const invoices = [
    {
      invoice: 'INV001',
      paymentStatus: 'Paid',
      totalAmount: '$250.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV002',
      paymentStatus: 'Pending',
      totalAmount: '$150.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV003',
      paymentStatus: 'Unpaid',
      totalAmount: '$350.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV004',
      paymentStatus: 'Paid',
      totalAmount: '$450.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV005',
      paymentStatus: 'Paid',
      totalAmount: '$550.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV006',
      paymentStatus: 'Pending',
      totalAmount: '$200.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV007',
      paymentStatus: 'Unpaid',
      totalAmount: '$300.00',
      paymentMethod: 'Credit Card',
    },
  ];
  return <Table.Template columns={cols} data={invoices} />;
};
```

### **footer**
An optional array of footer cells to display at the bottom of the table.

- **Type:** `FooterCell[]`
- **Default:** `None`
- **Possible Values:** `Array<{ value: string; props?: ViewProps; }>`

```tsx
import React from 'react';
import { Table } from '@app-studio/web';

export const FooterDemo = () => {
  const cols = [
    { title: 'Invoice', field: 'invoice' },
    { title: 'Payment Status', field: 'paymentStatus' },
    { title: 'Total Amount', field: 'totalAmount' },
    { title: 'Payment Method', field: 'paymentMethod' },
  ];
  const invoices = [
    {
      invoice: 'INV001',
      paymentStatus: 'Paid',
      totalAmount: '$250.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV002',
      paymentStatus: 'Pending',
      totalAmount: '$150.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV003',
      paymentStatus: 'Unpaid',
      totalAmount: '$350.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV004',
      paymentStatus: 'Paid',
      totalAmount: '$450.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV005',
      paymentStatus: 'Paid',
      totalAmount: '$550.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV006',
      paymentStatus: 'Pending',
      totalAmount: '$200.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV007',
      paymentStatus: 'Unpaid',
      totalAmount: '$300.00',
      paymentMethod: 'Credit Card',
    },
  ];
  return (
    <Table
      views={{
        tfoot: {
          borderTop: '1px solid gray',
          borderBottom: '1px solid gray',
        },
      }}
    >
      <Table.Template
        columns={cols}
        data={invoices}
        footer={[
          {
            value: 'Total Amount',
            props: { colSpan: 3, style: { fontWeight: 'bold' } },
          },
          { value: '$2,500.00' },
        ]}
      />
    </Table>
  );
};
```

### **caption**
An optional caption for the table, providing a brief title or explanation.

- **Type:** `React.ReactNode`
- **Default:** `None`
- **Possible Values:** `React.ReactNode`

```tsx
import React from 'react';
import { Table } from '@app-studio/web';

export const CaptionDemo = () => {
  const cols = [
    { title: 'Invoice', field: 'invoice' },
    { title: 'Payment Status', field: 'paymentStatus' },
    { title: 'Total Amount', field: 'totalAmount' },
    { title: 'Payment Method', field: 'paymentMethod' },
  ];
  const invoices = [
    {
      invoice: 'INV001',
      paymentStatus: 'Paid',
      totalAmount: '$250.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV002',
      paymentStatus: 'Pending',
      totalAmount: '$150.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV003',
      paymentStatus: 'Unpaid',
      totalAmount: '$350.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV004',
      paymentStatus: 'Paid',
      totalAmount: '$450.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV005',
      paymentStatus: 'Paid',
      totalAmount: '$550.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV006',
      paymentStatus: 'Pending',
      totalAmount: '$200.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV007',
      paymentStatus: 'Unpaid',
      totalAmount: '$300.00',
      paymentMethod: 'Credit Card',
    },
  ];
  return (
    <Table.Template
      caption="A list of your recent invoices."
      columns={cols}
      data={invoices}
    />
  );
};
```