> ## Documentation Index
> Fetch the complete documentation index at: https://tally.outhebox.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards and detail sheet

> How the grid turns into cards on narrow screens, and the sheet a tapped card opens.

On a narrow viewport `<Tally>` renders each row as a card instead of a table row. Cards use the same view, the same rows and the same selection as the grid. Tapping a card title opens a sheet with every visible field.

## When cards show

| Prop | Default | Notes |
| - | - | - |
| `layout` | `auto` | `auto`, `grid` or `cards`. |
| `cardsBelow` | `620` | With `auto`, cards show when the root is narrower than this. |
| `detail` | `true` | `false` disables the sheet. A function renders its body. |

The width is the width of the `<Tally>` root, not of the window. A grid in a narrow sidebar switches to cards on a wide screen. The viewport carries `data-layout="cards"` while cards show.

## Card roles

Every column has a card role. It decides where the column goes on the card.

| Role | Placement | Default for |
| - | - | - |
| `title` | The card heading. The first title column wins. | `text` |
| `badge` | A row of badges under the heading. | `enum`, `bool` |
| `metric` | A list of labelled values. | `number`, `int`, `currency`, `percent`, `bar`, `duration` |
| `meta` | A line of secondary values. Extra title columns go here. | `date`, `email`, `url`, `id`, `person` |
| `hidden` | Not on the card. Still listed in the detail sheet. | |

The role comes from the column type. Set `card` on a column to override it. Without a title column, the first visible column is the title. Hidden columns of the view are left out of cards and of the sheet.

```ts schema.ts theme={null}
import { createSchema } from 'tally-core'

export const schema = createSchema({
  key: 'id',
  columns: [
    { id: 'account', label: 'Account', avatar: true, subtitle: 'domain' },
    { id: 'domain', card: 'hidden' },
    {
      id: 'plan',
      type: 'enum',
      options: [{ value: 'free' }, { value: 'pro' }, { value: 'team' }],
    },
    { id: 'mrr', label: 'MRR', type: 'currency' },
    { id: 'seats', type: 'int', card: 'meta' },
    { id: 'renewal', type: 'date', relative: true },
    { id: 'notes', wrap: true, card: 'meta' },
  ],
})
```

`avatar` draws an initials tile before the title. `subtitle` names a field shown under the title. A `meta` column with `wrap` takes a full line.

## Detail sheet

The sheet is a drawer. Its heading is the card title. The first `metric` column is the hero value, and every other visible column follows as a label and value pair, drawn with the same renderers as the grid.

Pass a function as `detail` to render the body yourself. It receives the grid, the row item and `close`. The heading and the close button stay.

```tsx accounts.tsx theme={null}
import type { ReactNode } from 'react'
import type { Grid } from 'tally-core'
import { Tally, type DetailRenderer } from 'tally-react'

const detail: DetailRenderer = ({ grid, item, close }) => (
  <section>
    <p>{typeof item.row['notes'] === 'string' ? item.row['notes'] : ''}</p>
    <button
      type="button"
      onClick={() => {
        void grid.deleteRows([item.key])
        close()
      }}
    >
      Delete
    </button>
  </section>
)

export function Accounts({ grid }: { grid: Grid }): ReactNode {
  return <Tally grid={grid} label="Accounts" layout="auto" cardsBelow={720} detail={detail} />
}
```

| Field | Type | Notes |
| - | - | - |
| `grid` | `Grid` | The grid the card belongs to. |
| `item` | `RowItem` | `key`, `row`, `index` and the row's position. |
| `close` | `() => void` | Closes the sheet. |

## Selection and groups

Every card has a checkbox that toggles the row, so bulk actions work on phones. Groups render as group rows between cards and collapse the same way.

See [Custom renderers and editors](https://tally.outhebox.dev/docs/guides/custom-renderers-and-editors.md) to change how values look on cards and in the sheet.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.