Table

1import { Table } from "@ecos/ui";
2
3<Table
4  tableData={{
5    headers: [
6      { key: "product", label: "Product" },
7      { key: "category", label: "Category" },
8      { key: "price", label: "Price" },
9    ],
10    rows: [
11      {
12        product: "Gold Sheet",
13        category: "Semi-Finished",
14        price: "£125.00",
15      },
16      {
17        product: "Silver Wire",
18        category: "Wire",
19        price: "£42.50",
20      },
21    ],
22  }}
23/>

1<Table
2  headline="Pricing Overview"
3  headlineLevel="h2"
4  tableData={{
5    headers: [
6      { key: "tier", label: "Tier" },
7      { key: "price", label: "Monthly Price" },
8    ],
9    rows: [
10      { tier: "Starter", price: "£10" },
11      { tier: "Professional", price: "£25" },
12    ],
13  }}
14/>

1<Table
2  tableData={{
3    headers: [
4      { key: "product", label: "Product" },
5      { key: "qty", label: "Qty", align: "center" },
6      { key: "price", label: "Price", align: "right" },
7    ],
8    rows: [
9      {
10        product: "Gold Sheet",
11        qty: 2,
12        price: "£125.00",
13      },
14      {
15        product: "Silver Wire",
16        qty: 10,
17        price: "£42.50",
18      },
19    ],
20  }}
21/>

1<Table
2  tableData={{
3    headers: [
4      {
5        key: "product",
6        label: "Product",
7        isBold: true,
8      },
9      {
10        key: "status",
11        label: "Status",
12        isMuted: true,
13      },
14    ],
15    rows: [
16      {
17        product: "Gold Sheet",
18        status: "In Stock",
19      },
20      {
21        product: "Silver Wire",
22        status: "Out of Stock",
23      },
24    ],
25  }}
26/>

1<Table
2  removeBanding
3  tableData={{
4    headers: [
5      { key: "feature", label: "Feature" },
6      { key: "enabled", label: "Enabled" },
7    ],
8    rows: [
9      {
10        feature: "Alternating row backgrounds",
11        enabled: "No",
12      },
13      {
14        feature: "Header row",
15        enabled: "Yes",
16      },
17    ],
18  }}
19/>

1<Table
2  hideHeaders
3  tableData={{
4    headers: [
5      { key: "name", label: "Name" },
6      { key: "value", label: "Value" },
7    ],
8    rows: [
9      {
10        name: "SKU",
11        value: "ABC123",
12      },
13      {
14        name: "Category",
15        value: "Semi-Finished",
16      },
17    ],
18  }}
19/>

1<Table
2  tableData={{
3    headers: [
4      { key: "product", label: "Product" },
5      { key: "status", label: "Status" },
6    ],
7    rows: [
8      {
9        product: "Gold Sheet",
10        status: (
11          <Badge variant="success">
12            Active
13          </Badge>
14        ),
15      },
16      {
17        product: "Silver Wire",
18        status: (
19          <Badge variant="warning">
20            Pending
21          </Badge>
22        ),
23      },
24    ],
25  }}
26/>

1import {
2  TablePrimitive,
3  TableHeaderPrimitive,
4  TableBodyPrimitive,
5  TableRowPrimitive,
6  TableHeadPrimitive,
7  TableCellPrimitive,
8} from "@ecos/ui";
9
10<TablePrimitive>
11  <TableHeaderPrimitive>
12    <TableRowPrimitive>
13      <TableHeadPrimitive>
14        Product
15      </TableHeadPrimitive>
16      <TableHeadPrimitive>
17        Price
18      </TableHeadPrimitive>
19    </TableRowPrimitive>
20  </TableHeaderPrimitive>
21
22  <TableBodyPrimitive>
23    <TableRowPrimitive>
24      <TableCellPrimitive>
25        Gold Sheet
26      </TableCellPrimitive>
27      <TableCellPrimitive>
28        £125.00
29      </TableCellPrimitive>
30    </TableRowPrimitive>
31  </TableBodyPrimitive>
32</TablePrimitive>