Cells

Cells are lightweight renderers designed for compact contexts — specifically inside the ArrayLayout where each field renders inline without labels or extra padding.

They mirror the controls exactly in behaviour, but use withJsonFormsCellProps instead of withJsonFormsControlProps, and are passed via the separate cells prop on <JsonForms />.

Setup

Cells are included in the main bundle. If you installed index.json, you already have them:

import { JsonForms } from '@jsonforms/react';
import { jsonFormsCells, jsonFormsRenderers } from '~/components/forms/renderers'; 

<JsonForms
    schema={schema}
    uischema={uischema}
    data={data}
    renderers={jsonFormsRenderers}
    cells={jsonFormsCells} 
    onChange={({ data }) => setData(data)}
/>

Or install individually:

npx shadcn@latest add https://mksingh.dev/r/jsonforms-text-cell.json

Available cells

TextCell

Handles string fields. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-text-cell.json

NumberCell

Handles number fields. Uses valueAsNumber. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-cell.json

IntegerCell

Handles integer fields. Truncates decimals via Math.trunc. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-integer-cell.json

BooleanCell

Handles boolean fields. Renders a compact Checkbox. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-cell.json

BooleanToggleCell

Switch variant for boolean fields. Activated by options.toggle: true. Rank 2.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-toggle-cell.json

DateCell

Handles "format": "date" fields. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-date-cell.json

TimeCell

Handles "format": "time" fields. Rank 1.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-time-cell.json

EnumCell

Handles enum array fields. Renders a compact Select. Rank 2.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-enum-cell.json

OneOfEnumCell

Handles oneOf enum schemas where options have const/title pairs. Rank 2.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-enum-cell.json

NumberFormatCell

Number cell that displays the value formatted with Intl.NumberFormat when unfocused (e.g. 1,234.56), and switches to a raw number input on focus. Rank 4 — overrides NumberCell by default.

npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-format-cell.json

Cell priority reference

If you don't want NumberFormatCell to override plain number inputs, remove it from the jsonFormsCells array in components/forms/renderers/index.ts — since you own the file, this is a one-line change.