Core

Detail Builder

Declarative detail layouts with field, cursor, and custom sections.

Variants

Invoice detail

invoice-detail.ts

const config = createDetail<Invoice>()
  .withQueryKey((id) => ['invoice', id])
  .withFetch((id) => fetchInvoice(id))
  .withHeader({
    title: (d) => d.customer,
    subtitle: (d) => d.email,
  })
  .withSections([
    fieldsSection('overview', 'Overview', [
      field('Customer', 'customer'),
      field('Email', 'email'),
      field('Status', 'status'),
      field('Amount', 'amount'),
    ]),
  ])
  .build()

<DetailLayout id="inv_1024" config={config} />

Dependencies

@tanstack/react-query
@/components/ui/*
@/components/module/data-view
@/components/module/modal

Usage

Install

bun add @tanstack/react-query

Usage

import { DetailLayout } from '@/components/module/detail-builder'