Tables · Youj

Installation & usage

npx @youj/cli add app-customers

Also installs app-page, async-button, avatar, badge, button, icon-archive, icon-arrow-up-right, icon-download, icon-mail, icon-plus, icon-tag, icon-upload, icon-user-plus, icon-users, reveal, sparkline, stat-card, tables-data-grid, toast, youj-core, youj-ui-core.

The CLI copies the block to blocks/app/customers.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

customers-view.tsx

'use client'

import Link from 'next/link'
import { Customers, type CustomersProps } from '@/blocks/app/customers'

export function CustomersView({ customers, tags, healths, renewals }: Pick<CustomersProps, 'customers' | 'tags' | 'healths' | 'renewals'>) {
  return (
    <Customers
      customers={customers}
      tags={tags}
      healths={healths}
      renewals={renewals}
      copy={{ section: 'Revenue' }}
      linkComponent={Link}
      onRetry={() => {
        // your code
      }}
      onViewChange={(view) => {
        // your code
      }}
      onSelectedChange={(ids, rows) => {
        // your code
      }}
    />
  )
}

Reference

Props40 props, 2 types

Props

Customers props
Prop	Type	Default
`theme`	`ThemeInput` A theme to force on the block. Default: none, so it inherits the app's (YoujProvider or a ThemeScope around it).	–
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, across the whole width, with no top bar of its own. default true	`true`
`headingLevel`	`1 \| 2 \| 3` The title's heading level. default 1	`1`
`brand`	`{ name: string; logo?: ReactNode }` The product in the standalone top bar. default Tessera, with its initial as the logo	`Tessera, with its initial as the logo`
`customers`	`Customer[]` The accounts, one row each. Passing a new array replaces the rows. Default: `count` seeded demo accounts.	–
`count`	`number` How many demo accounts to show without `customers`. default 64	`64`
`loading`	`boolean` Loading, before the accounts arrive: skeleton stats and rows. default false	`false`
`error`	`ReactNode` Replaces the rows with an error panel; a string is its message. Default: none.	–
`onRetry`	`() => void` The error panel's Retry. Default: none.	–
`empty`	`ReactNode` Replaces the grid when there are no accounts. Default: the grid's empty state from `copy.empty…`, with an import.	–
`copy`	`Partial<CustomersCopy>` Any of the page's strings, to rewrite or translate. Default: the demo's English.	–
`locale`	`string` Formats numbers, money and dates. Default: the app's locale (YoujProvider's `locale`), else en-US.	–
`currency`	`string` The currency MRR is in. default 'USD'	`'USD'`
`summary`	`Partial<CustomersSummary>` The quarter's target and last month's figures, for the stats. Default: the demo's.	–
`tags`	`Record<string, { label: string }>` The tags rows can carry, by key, with their labels. default the demo's seven	`the demo's seven`
`healths`	`DataGridStatusOptions` The health values rows can carry, by key, with their labels and tones, in sort order. Default: healthy, trial, at risk and churning (labels from `copy.health`). The stat cards still count those four.	–
`renewals`	`DataGridStatusOptions` The renewal values rows can carry, by key, with their labels and tones, in sort order. Default: overdue, this month, next quarter and later (labels from `copy.renewal`). The stat cards still count overdue and this month.	–
`views`	`DataGridView[]` The saved views, as tabs. Default: All, At risk, Enterprise and Renewing soon, counted from the rows.	–
`view`	`string` The open view's id (controlled). Default: uncontrolled.	–
`defaultView`	`string` The view open at first, uncontrolled. Default: the first.	–
`onViewChange`	`(view: string) => void` Called when another view opens.	–
`selected`	`string[]` The selected rows' ids (controlled). Default: uncontrolled.	–
`defaultSelected`	`string[]` The rows selected at first, uncontrolled. Default: none.	–
`onSelectedChange`	`(ids: string[], rows: CustomerRow[]) => void` Called when the selection changes, with the ids and the rows.	–
`now`	`Date \| number` The moment relative dates count from. default the demo's fixed Sep 29, 2026, so server and browser agree	`the demo's fixed Sep 29, 2026, so server and browser agree`
`onRowClick`	`(row: CustomerRow) => void` A click on a row, anywhere but its own controls. Default: none (the row's chevron opens its panel).	–
`getHref`	`(row: CustomerRow) => string` An account's page: the panel's View account becomes a link to it. Default: no links.	–
`linkComponent`	`ElementType` Renders internal links, e.g. Next.js `Link`. default 'a'	`'a'`
`onOpen`	`Row` Open account (row menu) and View account (panel). Default: a demo toast.	–
`onEmail`	`Row` Email contact. Default: a demo toast.	–
`onAssign`	`Rows` Assign owner, from a row or the selection. Default: a demo toast.	–
`onTag`	`Rows` Add tag, from a row or the selection. Default: a demo toast.	–
`onExport`	`Rows` Export the selection. Default: a demo toast.	–
`onArchive`	`Rows` Archive: the rows leave at once and come back if it rejects. Default: archived here only.	–
`onRestore`	`Rows` Undo after an archive: the rows come back. Default: restored here only.	–
`onAutoRenewChange`	`(row: CustomerRow, value: boolean) => Promise<unknown> \| unknown` A row's auto-renew switch: it flips at once and flips back if this rejects. Default: a demo toast.	–
`onImport`	`() => Promise<unknown> \| unknown` The header's (and the empty state's) Import button. Default: does nothing.	–
`onCreate`	`() => Promise<unknown> \| unknown` The header's New customer button. Default: does nothing.	–
`actions`	`ReactNode` Header actions, replacing Import and New customer. Default: those two.	–
`classNames`	`Partial<Record<'header' \| 'stats' \| 'grid', string>>` Classes on key parts.	–

`Customer`

Customer props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`domain`Required	`string`	–
`plan`Required	`Plan \| (string & {})` The plan's name: the demo's are Enterprise, Business, Pro and Starter.	–
`health`Required	`Health`	–
`mrr`Required	`number` Monthly recurring revenue, in dollars.	–
`seats`Required	`number`	–
`seatLimit`Required	`number`	–
`usage`Required	`number[]` Weekly active users over the last 12 weeks.	–
`owners`Required	`DataGridPerson[]`	–
`tags`Required	`string[]`	–
`region`Required	`string`	–
`renewsAt`Required	`string` An ISO date.	–
`renewal`Required	`Renewal`	–
`lastSeen`Required	`string` An ISO date.	–
`autoRenew`Required	`boolean`	–
`contact`Required	`{ name: string; email: string; role: string }`	–
`tickets`Required	`number`	–
`nps`Required	`number`	–

`CustomersSummary`

CustomersSummary props
Prop	Type	Default
`mrrTarget`Required	`number` The quarter's MRR target.	–
`quarterPace`Required	`number` How far through the quarter today is, 0–1: the target meter's notch.	–
`lastMonthCount`Required	`number` Accounts a month ago, for the change under the count.	–
`mrrChange`Required	`number` MRR's change since last month, as a fraction (0.064 is +6.4%).	–
`riskChange`Required	`number` The at-risk count's change since last month, as a fraction.	–

Strings56 keys for copy

Built from8 components, 1 blocks

Accessibilitylandmarks, grid, keyboard

#Installation & usage

#Description

#Code

#Reference

Props

Customer

CustomersSummary

Strings

Built from

Components used

Built on

#Accessibility

Installation & usage

Description

Code

Reference

`Customer`

`CustomersSummary`

Accessibility