Ui.DefinitionList

A definition list is the mobile equivalent of a table.

Interactive Demo

You can play around with a Ui.DefinitionList below using the controls.

John Doe
Jane Doe
<Ui.DefinitionList
headers=["First Name", "Last Name"]
rows=[
{"John Doe", [Ui.Cell.String("John"), Ui.Cell.String("Doe")]},
{"Jane Doe", [Ui.Cell.String("Jane"), Ui.Cell.String("Doe")]}
]
/>
Headers

The headers property defines the labels for the cells.

Summary
<Ui.DefinitionList
headers=["Cell 1 Label", "Cell 2 Label"]
rows=[
{
"Summary",
[Ui.Cell.String("Cell 1 Content"), Ui.Cell.String("Cell 2 Content")]
}
]
/>
Rows

The rows property defines the rows (of cells).

Summary 1
Summary 2
Summary 3
<Ui.DefinitionList
headers=["Cell 1 Label", "Cell 2 Label"]
rows=[
{
"Summary 1",
[Ui.Cell.String("Row 1 Cell 1"), Ui.Cell.String("Row 1 Cell 2")]
},
{
"Summary 2",
[Ui.Cell.String("Row 2 Cell 1"), Ui.Cell.String("Row 2 Cell 2")]
},
{
"Summary 3",
[Ui.Cell.String("Row 3 Cell 1"), Ui.Cell.String("Row 3 Cell 2")]
}
]
/>
Size

The size of the component can be set with the size property.

John Doe
Jane Doe
John Doe
Jane Doe
John Doe
Jane Doe
let rows =
[
{"John Doe", [Ui.Cell.String("John"), Ui.Cell.String("Doe")]},
{"Jane Doe", [Ui.Cell.String("Jane"), Ui.Cell.String("Doe")]}
]
<>
<Ui.DefinitionList
headers=["First Name", "Last Name"]
size={Ui.Size.Px(12)}
rows={rows}
/>
<Ui.DefinitionList
headers=["First Name", "Last Name"]
size={Ui.Size.Px(16)}
rows={rows}
/>
<Ui.DefinitionList
headers=["First Name", "Last Name"]
size={Ui.Size.Px(20)}
rows={rows}
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.