Tabular Data

In Mint tabular data you can use a special data structure which used by Ui.Table and Ui.DefinitionList.

Example

Below you can see the available options for the Ui.Cell in a table.

String
Html
Number
Code
Html Items
Some string!
124
<div></div>
<Ui.Table
headers=[
{ sortKey: "string", sortable: false, label: "String", shrink: false },
{ sortKey: "html", sortable: false, label: "Html", shrink: false },
{ sortKey: "number", sortable: false, label: "Number", shrink: true },
{ sortKey: "code", sortable: false, label: "Code", shrink: true },
{ sortKey: "html-items", label: "Html Items", sortable: false, shrink: true }
]
rows=[
{
"Summary of the row",
[
Ui.Cell.String("Some string!"),
Ui.Cell.Html(<Ui.Button size={Ui.Size.Em(0.75)} label="A Button!"/>),
Ui.Cell.Number(124),
Ui.Cell.Code(code: "<div></div>", breakSpaces: false),
Ui.Cell.HtmlItems(
breakOnMobile: true,
items:
[
<Ui.Icon icon={Ui.Icons.PENCIL}/>,
<Ui.Icon icon={Ui.Icons.CLOUD_DOWNLOAD}/>
])
]
}
]
breakpoint={600}
/>
Contents
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.