In Mint tabular data you can use a special data structure which used by Ui.Table and Ui.DefinitionList.
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}/>
Mint UI is a design system and component library for building websites, web and desktop applications.