On This Page

Table component

The TableView component provides advanced styling for tables.

TableView

User Status Actions
User #1 Pending
User #2 Ready
User #3 Pending
User #2 Ready
Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.layout
Styles
static any[] use = [TableView]
Content
TableView{
    THead{
        Th`User`
        Th`Status`
        Th`Actions`
    }
    TBody{
        Tr{
            Td`User #1`
            Td`Pending`
            Td{
                PrimaryButton{ T`Edit` }
            }
        }
        Tr{
            Td`User #2`
            Td`Ready`
            Td{
                PrimaryButton{ T`Edit` }
            }
        }
        Tr{
            Td`User #3`
            Td`Pending`
            Td{
                PrimaryButton{ T`Edit` }
            }
        }
        Tr{
            Td`User #2`
            Td`Ready`
            Td{
                PrimaryButton{ T`Edit` }
            }
        }
    }
}