Merge pull request #27 from jacksonkasi1/dev

fix: add visual divider for sub-table header

Author: jacksonkasi1

apps/hono-example/src/routes/engine/configs/index.ts

@@ -2,10 +2,12 @@ import { tenants } from './tenants';
 import { users } from './users';
 import { products } from './products';
 import { orders } from './orders';
+import { orderItems } from './orderItems';
 
 export const configs = {
   tenants,
   users,
   products,
   orders,
+  orderItems,
 };

apps/hono-example/src/routes/engine/configs/orderItems.ts

@@ -0,0 +1,10 @@
+import { defineTable } from "@tablecraft/engine";
+import * as s from "@/db/schema";
+
+export const orderItems = defineTable(s.orderItems)
+  .as("orderItems")
+  .join(s.products, {
+    on: "order_items.product_id = products.id",
+    alias: "product",
+    columns: ["name", "price"]
+  });

apps/vite-web-example/src/App.tsx

@@ -7,6 +7,7 @@ import { Orders3Page } from "@/pages/orders3-page";
 import { UsersPage } from "@/pages/users-page";
 import { DashboardPage } from "@/pages/dashboard-page";
 import { OrdersRestPage } from "@/pages/orders-rest-page";
+import { OrdersSubRowPage } from "@/pages/orders-subrow-page";
 import { EmployeesStaticPage } from "@/pages/employees-static-page";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -27,6 +28,7 @@ function App() {
     { to: "/orders-rest", label: "Orders (REST)", icon: Plug },
     { to: "/employees", label: "Employees (Static)", icon: Database },
     { to: "/users", label: "Users", icon: Users },
+    { to: "/orders-subrow", label: "Sub-Rows", icon: Filter },
   ];
 
   return (
@@ -88,6 +90,7 @@ function App() {
             <Route path="/orders-rest" element={<OrdersRestPage />} />
             <Route path="/employees" element={<EmployeesStaticPage />} />
             <Route path="/users" element={<UsersPage />} />
+            <Route path="/orders-subrow" element={<OrdersSubRowPage />} />
           </Routes>
         </main>
       </div>

apps/vite-web-example/src/pages/orders-subrow-page.tsx

@@ -0,0 +1,71 @@
+import { DataTable } from "@tablecraft/table";
+import { createTableCraftAdapter } from "@tablecraft/table";
+import { createOrdersAdapter, type OrdersRow } from "../generated";
+import { API_BASE_URL } from "../api";
+import { useMemo } from "react";
+
+// --- Child Table Component ---
+function OrderItemsTable({ orderId }: { orderId: number }) {
+  // Create an adapter for the orderItems table, passing the orderId as a custom filter.
+  // We use useMemo so the adapter isn't recreated on every render.
+  const childAdapter = useMemo(() => {
+    return createTableCraftAdapter({
+      baseUrl: API_BASE_URL,
+      table: "orderItems",
+      customFilters: {
+        orderId: orderId, // Automatically translates to a filter constraint
+      },
+    });
+  }, [orderId]);
+
+  return (
+
+      <DataTable
+        adapter={childAdapter}
+        hiddenColumns={["orderId", "id", "tenantId", "deletedAt", "createdAt", "updatedAt"]}
+        config={{
+          enableUrlState: false,
+          enablePagination: false,
+          enableSearch: false,
+          enableDateFilter: false,
+          enableToolbar: false,
+          enableRowSelection: false,
+          columnResizingTableId: "order-items-table",
+          removeOuterBorder: true, // Strips the card wrapper for a seamless nested look!
+        }}
+      />
+
+  );
+}
+
+// --- Parent Table Component ---
+export function OrdersSubRowPage() {
+  const parentAdapter = useMemo(() => {
+    return createOrdersAdapter({
+      baseUrl: API_BASE_URL,
+    });
+  }, []);
+
+  return (
+    <div className="p-8 space-y-4 max-w-7xl mx-auto">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Orders (Master-Detail)</h1>
+        <p className="text-muted-foreground mt-1">
+          Click the arrow next to an order to see its items. The sub-table loads dynamically
+          and manages its own state without affecting the parent URL!
+        </p>
+      </div>
+
+      <DataTable<OrdersRow>
+        adapter={parentAdapter}
+        renderSubRow={({ row }) => <OrderItemsTable orderId={row.id} />}
+        config={{
+          enableSearch: true,
+          enableColumnResizing: true,
+          defaultPageSize: 10,
+        }}
+        hiddenColumns={["tenantId", "deletedAt", "updatedAt", "userId", "role"]}
+      />
+    </div>
+  );
+}

bun.lock

@@ -271,6 +271,8 @@ The `<DataTable>` component accepts the following props:
 | `columns`       | `ColumnDef<T>[]`       | Manual column definitions (optional)          |
 | `config`        | `Partial<TableConfig>` | Table configuration overrides                 |
 | `hiddenColumns` | `string[]`             | Columns to hide from UI (data still received) |
+| `renderSubRow`  | `(props) => ReactNode` | Render a nested component when a row expands  |
+| `getRowCanExpand`| `(row: T) => boolean` | Control which rows are allowed to be expanded |
 
 ### Configuration Options
 
@@ -286,6 +288,8 @@ The `<DataTable>` component accepts the following props:
     enableColumnVisibility: true,
     defaultPageSize: 20,
     pageSizeOptions: [10, 20, 50, 100],
+    removeOuterBorder: true,
+    defaultExpanded: false,
   }}
 />
 ```
@@ -366,7 +370,36 @@ import type { OrdersRow, OrdersColumn } from './generated';
 > - If a user has previously reordered columns, their saved order takes precedence.
 > - "Reset Column Order" (in the View popover or Settings gear) resets back to `defaultColumnOrder`, not the natural definition order.
 
-### System Column Pinning (`select` & `__actions`)
+### Sub-Rows (Master-Detail)
+
+TableCraft supports rendering nested sub-tables or any React component inside an expandable row. When you provide the `renderSubRow` prop, TableCraft automatically injects an `__expand` column with an arrow toggle button.
+
+```tsx
+<DataTable
+  adapter={parentAdapter}
+  renderSubRow={({ row, table }) => (
+    <OrderItemsTable orderId={row.id} />
+  )}
+  config={{
+    // Optional: expands all rows by default
+    defaultExpanded: true,
+  }}
+/>
+```
+
+If you want a child table to appear seamlessly without drawing a second "card" border inside the parent, configure the child's `<DataTable>` with `removeOuterBorder: true`.
+
+```tsx
+// Inside your OrderItemsTable component
+<DataTable
+  adapter={childAdapter}
+  config={{
+    removeOuterBorder: true, // Strips the card wrapper!
+  }}
+/>
+```
+
+### System Column Pinning (`select`, `__actions`, & `__expand`)
 
 `select` (row selection checkbox) and `__actions` (actions column) are **system columns** managed entirely by the table. They are pinned automatically on every order change:
 

docs/api-reference.md

@@ -178,6 +178,21 @@ All table state stored in URL for shareable links:
 * Date range
 {% endtab %}
 
+{% tab title="Sub-Rows" %}
+Build master-detail interfaces with nested expandable rows.
+
+```tsx
+<DataTable
+  adapter={parentAdapter}
+  renderSubRow={({ row }) => <OrderItemsTable orderId={row.id} />}
+  config={{
+    // Removes the outer card wrapper for a seamless nested look
+    removeOuterBorder: true,
+  }}
+/>
+```
+{% endtab %}
+
 {% tab title="Keyboard" %}
 Full keyboard accessibility:
 

docs/features.md

@@ -1,6 +1,6 @@
 {
   "name": "@tablecraft/table",
-  "version": "0.2.20",
+  "version": "0.2.23",
   "description": "Schema-driven data table for React — built on TanStack Table + Shadcn UI with native TableCraft engine support",
   "type": "module",
   "main": "dist/index.js",

packages/table/package.json

@@ -4,6 +4,7 @@ import type { TableConfig } from "../types";
  * Default table configuration.
  */
 const defaultConfig: TableConfig = {
+  defaultExpanded: false,
   enableRowSelection: true,
   enableKeyboardNavigation: false,
   enableClickRowSelect: false,
@@ -15,6 +16,7 @@ const defaultConfig: TableConfig = {
   enableUrlState: true,
   enableColumnResizing: true,
   enableToolbar: true,
+  removeOuterBorder: false,
   size: "default",
   columnResizingTableId: undefined,
   searchPlaceholder: undefined,