View Source Table

<Table>

A container organized by rows and columns.

Overview

Use <TableColumn> elements in the columns child, and <TableRow> elements in the rows child to build the table’s content. Each <TableRow> should have the same number of children as columns in the table.

<Table>
    <Group template={:columns}>
        <TableColumn id="name">Name</TableColumn>
        <TableColumn id="description">Description</TableColumn>
        <TableColumn id="length">Length</TableColumn>
    </Group>
    <Group template={:rows}>
        <TableRow id="basketball">
            <Text>Basketball</Text>
            <Text>Players attempt to throw a ball into an elevated basket.</Text>
            <Text>48 min</Text>
        </TableRow>
        <TableRow id="soccer">
            <Text>Soccer</Text>
            <Text>Players attempt to kick a ball into a goal.</Text>
            <Text>90 min</Text>
        </TableRow>
        <TableRow id="football">
            <Text>Football</Text>
            <Text>Players attempt to throw a ball into an end zone.</Text>
            <Text>60 min</Text>
        </TableRow>
    </Group>
</Table>

Sorting Tables

Use the sortOrder attribute to handle changes in the sorting options.

<Table sortOrder={@sports_sort_order} phx-change="sort-changed">
    ...
    <Group template={:rows}>
        <%= for sport <- Enum.sort_by(
            @sports,
            fn sport -> sport[hd(@sports_sort_order)["id"]] end,
            (if hd(@sports_sort_order)["order"], do: &</2, else: &>/2)
        ) do %>
            <TableRow id={sport["id"]}>
                <Text><%= sport["name"] %></Text>
                <Text><%= sport["description"] %></Text>
                <Text><%= sport["length"] %></Text>
            </TableRow>
        <% end %>
    </Group>
</Table>

Selecting Rows

Use the selection attribute to synchronize the selected row(s) with the LiveView.

<Table selection={@selected_sports} phx-change="selection-changed">
    ...
</Table>

Bindings

Children

  • columns - Up to 10 <TableColumn> elements that describe the possible columns.
  • rows - An arbitrary number of <TableRow> elements, each with a unique id attribute.