Cinder.Table (Cinder v0.18.1)

Copy Markdown View Source

Table component for displaying data in a traditional HTML table layout.

DEPRECATED: Use Cinder.collection instead. This module will be removed in version 1.0.

<!-- Use this instead -->
<Cinder.collection resource={MyApp.User} actor={@current_user}>
  <:col :let={user} field="name" filter sort>{user.name}</:col>
</Cinder.collection>

See the Upgrading Guide for migration instructions.

Basic Usage

<Cinder.Table.table resource={MyApp.User} actor={@current_user}>
  <:col :let={user} field="name" filter sort>{user.name}</:col>
  <:col :let={user} field="email" filter>{user.email}</:col>
  <:col :let={user} field="created_at" sort>{user.created_at}</:col>
</Cinder.Table.table>

With Query

<Cinder.Table.table query={MyApp.User |> Ash.Query.filter(active: true)} actor={@current_user}>
  <:col :let={user} field="name" filter sort>{user.name}</:col>
  <:col :let={user} field="email" filter>{user.email}</:col>
</Cinder.Table.table>

See Also

Summary

Functions

table(assigns) deprecated

Renders a data table.

Functions

table(assigns)

This function is deprecated. Use Cinder.collection/1 instead.

Renders a data table.

DEPRECATED: Use Cinder.collection instead.

This is equivalent to calling Cinder.collection with layout={:table}.

Attributes

  • resource (:atom) - The Ash resource to query. Defaults to nil.
  • query (:any) - The Ash query to execute. Defaults to nil.
  • actor (:any) - Actor for authorization. Defaults to nil.
  • tenant (:any) - Tenant for multi-tenant resources. Defaults to nil.
  • scope (:any) - Ash scope containing actor and tenant. Defaults to nil.
  • id (:string) - Unique identifier for the table. Defaults to "cinder-table".
  • page_size (:any) - Number of items per page. Defaults to 25.
  • theme (:any) - Theme name or theme map. Defaults to "default".
  • url_state (:any) - URL state object from UrlSync.handle_params. Defaults to false.
  • query_opts (:list) - Additional Ash query options. Defaults to [].
  • initial_load (:any) - :async (default) or :sync, which puts the first page of data in the server-rendered HTML. See Cinder.Collection. Defaults to nil.
  • on_state_change (:any) - Custom state change handler. Defaults to nil.

  • on_query_change (:any) - Event name sent to parent when the query changes. Parent receives {event_name, %{query: Ash.Query.t(), count: integer() | nil, id: string()}}. Defaults to nil.

  • show_pagination (:boolean) - Whether to show pagination controls. Defaults to true.
  • show_filters (:boolean) - Whether to show filter controls. Defaults to nil.
  • loading_message (:string) - Message to show while loading. Defaults to nil.
  • filters_label (:string) - Label for the filters component. Defaults to nil.
  • search (:any) - Search configuration. Defaults to nil.
  • empty_message (:string) - Message when no results. Defaults to nil.
  • error_message (:string) - Message to show on error. Defaults to nil.
  • class (:string) - Additional CSS classes. Defaults to "".
  • row_click (:any) - Function to call when a row is clicked. Defaults to nil.
  • item_class (:any) - CSS class(es) for each row. A string, or a fn item -> class end function evaluated per row, appended to the theme's row class. Defaults to nil.

Slots

  • col - Accepts attributes:
    • field (:string)
    • filter (:any)
    • filter_options (:list)
    • sort (:any)
    • search (:boolean)
    • label (:string)
    • class (:string)
  • filter - Accepts attributes:
    • field (:string)
    • filter (:any)
    • label (:string)
  • loading - Custom loading state content.
  • empty - Custom empty state content.
  • error - Custom error state content.