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

tsx
Copied
1
<DescriptionList
2
items={[
3
{ term: "Name", description: "Baosky" },
4
{ term: "Breed", description: "British Shorthair" },
5
{ term: "Age", description: "2 years 1 month" },
6
{ term: "Weight", description: "9 lbs" },
7
]}
8
/>

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.
tsx
Copied
1
<DescriptionList task="get_cat" />
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:
tsx
Copied
1
<DescriptionList
2
task="get_cat"
3
outputTransform={(o) => {
4
return {
5
...o,
6
Name: o.Name.toUpperCase(),
7
};
8
}}
9
/>

Component API

align
optional
Default
start
"start" | "end" | "center"

Alignment of the term and description.

grow
optional
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.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
items
optional
{ term: React.ReactNode; description: React.ReactNode; }[]

List of terms and descriptions.

loading
optional
boolean

Renders a loading state when true.

outputTransform
optional
(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.

task
optional
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
width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.