Sign Up

List View Conventions

Standard implementation pattern for index/list pages in the app.

All app list/index views should use the shared data table primitives instead of bespoke table markup.

Required Stack

  • DataTable from @kit/ui/boofdev/data-table
  • useDataTable from @kit/ui/boofdev/data-table
  • DataTableSortList from @kit/ui/boofdev/data-table

Reference Implementations

  • Customers: apps/web/components/customers/customers-table.tsx
  • Inventory: apps/web/app/home/[account]/inventory/_components/inventory-table.tsx
  • Bookings: apps/web/app/home/[account]/bookings/_components/bookings-table.tsx

Query-State Contract

List views should keep table state in URL query params so server components can refetch correctly:

  • page
  • perPage
  • sort
  • Filter/search keys for the feature (for example q, status, locationId)

Use useDataTable(..., { shallow: false }) when list changes require server refetch.

Why This Is Required

  • Consistent table UX across all product areas
  • Shared accessibility, pagination, row-actions, and sorting behavior
  • Lower maintenance by reusing one table system
  • Predictable route/query behavior for deep links and back/forward navigation

Exception Policy

Use a custom table implementation only when there is a hard requirement that the shared data table cannot support. Document the reason in the PR.