بنية جدول البيانات

فتحات الأعمدة، عمود إجراء اختياري، والحالة الفارغة.

الحد الأدنى

ID	Name	Role	Email
1	Alice	Admin	alice@example.com
2	Bob	User	bob@example.com
3	Charlie	Editor	charlie@example.com

    <.data_table
  class="data-table max-w-none"
  rows={@rows}
>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:col :let={row} label="Role">{row.role}</:col>
  <:col :let={row} label="Email">{row.email}</:col>
</.data_table>

مع action

ID	Name	Role	Email
1	Alice	Admin	alice@example.com
2	Bob	User	bob@example.com
3	Charlie	Editor	charlie@example.com

    <.data_table
  class="data-table max-w-none"
  rows={@rows}
>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:col :let={row} label="Role">{row.role}</:col>
  <:col :let={row} label="Email">{row.email}</:col>
  <:action :let={row}>
    <.action class="button button--sm" aria-label={"Edit #{row.name}"}>
      <.heroicon name="hero-pencil-square" />
    </.action>
  </:action>
</.data_table>

فارغ

ID	Name
No rows

    <.data_table
  class="data-table max-w-none"
  rows={[]}
>
  <:col :let={row} label="ID">{row.id}</:col>
  <:col :let={row} label="Name">{row.name}</:col>
  <:empty>
    <p>No rows</p>
  </:empty>
</.data_table>