Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/design/table_page.ex
defmodule MoonWeb.Pages.Design.TablePage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Design.Table
alias MoonWeb.Components.Page
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Examples.Design.TableExample
# import Phoenix.Component, only: [live_render: 3]
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/table",
name: "Table"
}
]
)
data(checked, :list, default: [])
@spec render(any) :: Phoenix.LiveView.Rendered.t()
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Table" image="facing/components/table.png">
<p>
A component for displaying large amounts of data in rows and columns.
</p>
</ComponentPageDescription>
<ExamplesList examples={[
TableExample.Default,
TableExample.ZebraStyle,
TableExample.Headless,
TableExample.WithCellBorders,
TableExample.DifferentRowGaps,
TableExample.DifferentRowSizes,
TableExample.ClickableRows,
TableExample.Checkboxes,
TableExample.Sorting,
TableExample.WithPaging,
TableExample.Editable,
TableExample.Responsive,
TableExample.WithFooter
]} />
<ExampleAndCode id="example-table-example-stream" title="Phoenix stream">
<:example>
<TableExample.Stream id="table-example-stream" container={{:div, class: "w-full"}} />
</:example>
<:code>{TableExample.Stream.code()}</:code>
</ExampleAndCode>
<PropsTable title="Table props" module={Table} />
<PropsTable title="Table.Column props" module={Table.Column} />
<PropsTable module={Table.Input} />
</Page>
"""
end
end