A component to displayed tabluar data.
Ui.DefinitionList
on mobile resultions (the breakpoint can be configured).Name | Email | Active |
---|---|---|
John Doe | john.doe@example.com | false |
Jane Doe | jane.doe@example.com | true |
<Ui.Table size={Ui.Size.Px(16)} bordered={true} orderDirection="desc" orderBy="name" breakpoint={0} headers=[ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false }, { sortKey: "active", sortable: false, label: "Active", shrink: true } ] rows=[ { "John Doe", [ Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com"), Ui.Cell.Code(code: "false", breakSpaces: false) ] }, { "Jane Doe", [ Ui.Cell.String("Jane Doe"), Ui.Cell.String("jane.doe@example.com"), Ui.Cell.Code(code: "true", breakSpaces: false) ] } ]/>
Name | Email |
---|---|
John Doe | john.doe@example.com |
Name | Email |
---|---|
John Doe | john.doe@example.com |
let rows = [ { "John Doe", [Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com")] } ]let headers = [ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false } ]<> <Ui.Table orderDirection="asc" headers={headers} breakpoint={0} orderBy="name" rows={rows} /> <Ui.Table orderDirection="desc" headers={headers} orderBy="name" breakpoint={0} rows={rows} /></>
Name | Email |
---|---|
John Doe | john.doe@example.com |
Name | Email |
---|---|
John Doe | john.doe@example.com |
let rows = [ { "John Doe", [Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com")] } ]let headers = [ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false } ]<> <Ui.Table headers={headers} breakpoint={0} orderBy="name" rows={rows}/> <Ui.Table headers={headers} orderBy="email" breakpoint={0} rows={rows}/></>
Name | Email |
---|---|
John Doe | john.doe@example.com |
<Ui.Table onOrderChange={ (data : Tuple(String, String)) { let {column, direction} = data Ui.Notifications.notifyDefault( <> "Order change to: " <b>"#{column}/#{direction}"</b> </>) } } breakpoint={0} headers=[ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false } ] rows=[ { "John Doe", [Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com")] } ]/>
Name | Email |
---|---|
John Doe | john.doe@example.com |
Name | Email |
---|---|
John Doe | john.doe@example.com |
Name | Email |
---|---|
John Doe | john.doe@example.com |
let rows = [ { "John Doe", [Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com")] } ]let headers = [ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false } ]<> <Ui.Table size={Ui.Size.Px(12)} headers={headers} breakpoint={0} rows={rows}/> <Ui.Table size={Ui.Size.Px(16)} headers={headers} breakpoint={0} rows={rows}/> <Ui.Table size={Ui.Size.Px(20)} headers={headers} breakpoint={0} rows={rows}/></>
The breakpoint which determines to show a Ui.DefinitionList
instead can be set using the breakpoint
property.
Name | Email |
---|---|
John Doe | john.doe@example.com |
Name | Email |
---|---|
John Doe | john.doe@example.com |
let rows = [ { "John Doe", [Ui.Cell.String("John Doe"), Ui.Cell.String("john.doe@example.com")] } ]let headers = [ { sortKey: "name", sortable: true, label: "Name", shrink: true }, { sortKey: "email", sortable: true, label: "Email", shrink: false } ]<> <Ui.Table headers={headers} breakpoint={500} rows={rows}/> <Ui.Table headers={headers} breakpoint={0} rows={rows}/></>
Mint UI is a design system and component library for building websites, web and desktop applications.