@bfrs/agentic-components 0.3.9 → 0.4.0

package/BFRS_AGENTIC_COMPONENTS.md

@@ -2412,6 +2412,121 @@ Step-by-step progress indicator. Calculates `done` / `active` / `pending` state
 
 ---
 
+## Table / Thead / Tbody / Tfoot / Tr / Th / Td
+
+Primitive table components with DataTable-matching styles, density support, and row hover effects. Use these for custom layouts where `DataTable` is too prescriptive.
+
+### React
+
+```tsx
+import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "@bfrs/agentic-components";
+
+<Table density="compact" sticky aria-label="Orders">
+  <Thead sticky>
+    <Tr>
+      <Th>Order</Th>
+      <Th align="right">Amount</Th>
+      <Th>Status</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    {orders.map((order) => (
+      <Tr key={order.id} onClick={() => navigate(`/orders/${order.id}`)}>
+        <Td>{order.id}</Td>
+        <Td align="right">₹{order.amount}</Td>
+        <Td>{order.status}</Td>
+      </Tr>
+    ))}
+  </Tbody>
+  <Tfoot>
+    <Tr>
+      <Th colSpan={2}>Total</Th>
+      <Th align="right">₹{total}</Th>
+    </Tr>
+  </Tfoot>
+</Table>
+```
+
+#### Table props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `density` | `"compact" \| "default" \| "comfortable"` | `"default"` | Cell padding density — propagates to Th/Td via React context |
+| `maxHeight` | `string \| number` | — | Enables vertical scrolling at this height |
+| `minWidth` | `string \| number` | — | Minimum table width (useful for fixed-layout tables) |
+| `className` | `string` | — | Applied to the outer border wrapper |
+| `tableClassName` | `string` | — | Applied to the `<table>` element |
+| `aria-label` | `string` | `"Table"` | Accessibility label |
+| `children` | `ReactNode` | — | `Thead`, `Tbody`, `Tfoot` elements |
+
+#### Thead props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sticky` | `boolean` | `false` | Sticks the header at the top of the scroll container |
+| `className` | `string` | — | Extra class on `<thead>` |
+
+#### Tr props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `() => void` | — | Row click handler; adds `cursor-pointer` automatically |
+| `className` | `string` | — | Extra class on `<tr>` |
+
+#### Th props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `"left" \| "center" \| "right"` | `"left"` | Text alignment |
+| `colSpan` | `number` | — | HTML colspan |
+| `className` | `string` | — | Extra class on `<th>` |
+
+#### Td props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `"left" \| "center" \| "right"` | `"left"` | Text alignment |
+| `colSpan` | `number` | — | HTML colspan |
+| `className` | `string` | — | Extra class on `<td>` |
+
+### Angular (custom elements)
+
+Custom elements: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`.
+
+`bfrs-table` propagates `density` to all descendant `bfrs-th` and `bfrs-td` elements automatically. Row hover transitions the background color of all `bfrs-td` children via JavaScript events.
+
+```html
+<bfrs-table density="compact" max-height="400px" aria-label="Orders">
+  <bfrs-thead sticky>
+    <bfrs-tr>
+      <bfrs-th>Order</bfrs-th>
+      <bfrs-th align="right">Amount</bfrs-th>
+      <bfrs-th>Status</bfrs-th>
+    </bfrs-tr>
+  </bfrs-thead>
+  <bfrs-tbody>
+    <bfrs-tr *ngFor="let order of orders" (click)="navigate(order.id)">
+      <bfrs-td>{{ order.id }}</bfrs-td>
+      <bfrs-td align="right">₹{{ order.amount }}</bfrs-td>
+      <bfrs-td>{{ order.status }}</bfrs-td>
+    </bfrs-tr>
+  </bfrs-tbody>
+</bfrs-table>
+```
+
+| Attribute | Element | Description |
+|-----------|---------|-------------|
+| `density` | `bfrs-table` | `"compact"`, `"default"`, or `"comfortable"` — propagated to all th/td |
+| `max-height` | `bfrs-table` | CSS max-height for scroll container |
+| `min-width` | `bfrs-table` | CSS min-width on the table |
+| `aria-label` | `bfrs-table` | Accessibility label |
+| `sticky` | `bfrs-thead` | Boolean — sticks header at scroll top |
+| `on-click` | `bfrs-tr` | Emits `click` event; adds `cursor-pointer` |
+| `align` | `bfrs-th`, `bfrs-td` | `"left"`, `"center"`, or `"right"` |
+| `density` | `bfrs-th`, `bfrs-td` | Override density per cell (set explicitly; overrides table propagation) |
+
+---
+
 ## What NOT to do
 
 - Do not use raw Tailwind classes for spacing, color, or typography — use `Stack`, `Text`, and component props instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bfrs/agentic-components",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "private": false,
   "description": "Shiprocket agentic component library and documentation showcase.",
   "keywords": [