Description list

Display and organize information
The DescriptionList component enables users to organize information and is commonly used to display metadata in key-value pairs.

Basic usage

Task backed
A DescriptionList can be backed by an Airplane task rather than setting the items prop. Set the task prop to call an Airplane task. The items are automatically inferred from the output of the Task.
The task can either return items as:
  1. A list of objects, where each object has a term and description property, e.g. [{term: "Name", description: "John Doe"}].
  2. An object where the keys are the term and the values are the description, e.g. {Name: "John Doe"}.

Customizing data
To use a task that outputs a format that isn't expected by DescriptionList, use outputTransform to convert the output. This prop is a function that receives the task output and returns new items.
For example, if we want to capitalize the cat's name, we can do the following:

Component API
NameDescriptionDefault
items
{ term: React.ReactNode; description: React.ReactNode; }[]
List of terms and descriptions.
align
"start" | "end" | "center"
Alignment of the term and description.
start
loading
boolean
Renders a loading state when true.
width
SizingToken | "{number}px"
Defines the width of the component.
auto
height
SizingToken | "{number}px"
Defines the height of the component.
auto
grow
boolean
If true, the element will grow to fill available space. This prop works only if the element is a direct child of a Stack.
task
string | AirplaneFunc | SlugQuery | FunctionQuery

The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.

If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task") or an AirplaneFunc—the return value of airplane.task() (task={myTask}).

If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug prop to pass the task configuration as a SlugQuery. If you are using an AirplaneFunc, specify the fn prop to pass the task configuration as a FunctionQuery.

SlugQuery
FunctionQuery

The refetchInterval prop represents how often (in milliseconds) the task query should be rerun to refetch data automatically.

The onSuccess and onError callbacks will run on task success or failure.

The executeOnMount, executeOnWindowFocus, and executeOnReconnect params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects. All of these options are true by default.

outputTransform
(output: TOutput) => { term: React.ReactNode; description: React.ReactNode; }[] | Record<string, React.ReactNode>
Callback to transform the task output before it populates the description list items.
PrivacyTermsSupport