Viewing

Fields are the read-only building blocks of a Chelone UI. Each one reads a single value from the current record — supplied by a RecordContext — and renders it: a string, a number, a boolean, a date, a formatted currency, a resolved reference. You place fields inside a <DataTable> cell, a <Show> view, or any component under a record context, and they Just Work.

How a field reads the record

A field takes a source, the record property to display, and reads its value from context via useFieldValue. The plain fields (<TextField>, <NumberField>, <DateField> and the rest) only read: they fetch nothing and hold no state, so the same <TextField> works in a list row and a detail page.

Two kinds of field do more:

• The Reference fields fetch through the data provider. <ReferenceField> and <ReferenceArrayField> call getMany, <ReferenceManyField> and <ReferenceManyCount> call getManyReference, and <ReferenceOneField> looks up the one related record. Each shows a loading state while it waits and needs a data provider, so render it under <Admin>.
• <ApiKeyField> keeps state: whether the key is revealed, and whether it was just copied.

import { BooleanField, NumberField, ReferenceField, TextField } from "@chelone/react";
 
<TextField source="title" />
<NumberField source="views" />
<ReferenceField source="author_id" reference="authors">
  <TextField source="name" />
</ReferenceField>
<BooleanField source="published" />

Fields in a DataTable

A <DataTable.Col> renders one cell per row, with each row's record in context. Put a field in the column's field prop or its children. A column with only a source prints the raw value, and a column with a source is sortable by its header:

import { DataTable, List, ReferenceField, TextField } from "@chelone/react";
 
<List>
  <DataTable>
    <DataTable.Col source="title" field={TextField} />
    <DataTable.NumberCol source="views" />
    <DataTable.Col label="Author">
      <ReferenceField source="author_id" reference="authors" />
    </DataTable.Col>
  </DataTable>
</List>

The field families

• Text & numbers: <TextField>, <NumberField>, <CurrencyField>, <DateField>, <DurationField>, <EmailField>, <UrlField>, <PhoneField>, <ColorField>, <CronField>, <RatingField>.
• Booleans & chips: <BooleanField>, <BadgeField>, <ChipField>, <SelectField>.
• References: <ReferenceField> (a foreign key to one record), <ReferenceManyField> / <ReferenceArrayField> (a record to many), <ReferenceOneField>, <ReferenceManyCount> (how many related records).
• Composite: <RecordField> (labelled row for a <Show>), <ArrayField>, <TextArrayField>, <FunctionField> (render anything from the record), <WrapperField>.
• Files & media: <FileField>, <ImageField>.
• JSON: <JsonField> prints a JSON value as indented text and loads nothing extra. <MonacoJsonField> shows it in a read-only Monaco editor and is an add-on installed from the registry.
• Markdown: <MdxField> shows a markdown string as formatted text in a read-only editor. It is an add-on installed from the registry.
• SaaS: <ApiKeyField>, <SubscriptionPlanField>, <UsageMeterField>, <WebhookEndpointField>.
• List controls: the components that sit around a <DataTable> rather than inside a cell: <BulkActionsToolbar>, <ExportButton>, <FilterButton>, <FilterLiveForm>, <SortButton>, <ListPagination>, <InfinitePagination>, <SavedQueriesList>.

Each page in the sidebar is a props reference for one component: its props, with the types read from the source. The pages have no live examples.

Fields vs inputs

Fields display; inputs edit. A <TextField source="title" /> shows the title; a <TextInput source="title" /> binds it to a form. They pair by source: read with the field, write with the input.