Ui.Table

A component to displayed tabluar data.

  • The table is fully controlled meaning that it's just a view and you need to do the sorting yourself.
  • The table collapses into a Ui.DefinitionList on mobile resultions (the breakpoint can be configured).
Interactive Demo

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

Name
Email
Active
John Doe
john.doe@example.com
false
Jane Doe
jane.doe@example.com
true
Order Direction
desc
Order By
name
Size (16px)
Breakpoint (0px)
Bordered
<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)
]
}
]/>
Order Direction

The order direction of ordered column can be indicated with the orderDescription 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
orderDirection="asc"
headers={headers}
breakpoint={0}
orderBy="name"
rows={rows}
/>
<Ui.Table
orderDirection="desc"
headers={headers}
orderBy="name"
breakpoint={0}
rows={rows}
/>
</>
Order By

Which column is the ordered one can be indicated with the orderBy 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={0} orderBy="name" rows={rows}/>
<Ui.Table headers={headers} orderBy="email" breakpoint={0} rows={rows}/>
</>
Order Change

The onOrderChange property is called when the user request a change in ordering.

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")]
}
]
/>
Size

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

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}/>
</>
Breakpoint

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

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.