# `PetalComponents.Table`
[🔗](https://github.com/petalframework/petal_components/blob/v3.2.0/lib/petal_components/table.ex#L1)

# `table`

Renders a table with generic styling.

## Examples

    <.table id="users" rows={@users}>
      <:col :let={user} label="id"><%= user.id %></:col>
      <:col :let={user} label="username"><%= user.username %></:col>
      <:empty_state>No data here yet</:empty_state>
    </.table>

## Attributes

* `id` (`:string`)
* `class` (`:any`) - CSS class. Defaults to `nil`.
* `variant` (`:string`) - Defaults to `"basic"`. Must be one of `"ghost"`, or `"basic"`.
* `rows` (`:list`) - the list of rows to render. Defaults to `[]`.
* `row_id` (`:any`) - the function for generating the row id. Defaults to `nil`.
* `row_click` (`:any`) - the function for handling phx-click on each row. Defaults to `nil`.
* `row_item` (`:any`) - the function for mapping each row before calling the :col slot. Defaults to `&Function.identity/1`.
* Global attributes are accepted. Supports all globals plus: `["colspan", "rowspan"]`.
## Slots

* `col` - Accepts attributes:

  * `label` (`:string`)
  * `class` (`:any`)
  * `row_class` (`:any`)
* `empty_state` - A message to show when the table is empty, to be used together with :col. Accepts attributes:

  * `row_class` (`:any`)

# `td`

## Attributes

* `class` (`:any`) - CSS class. Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["colspan", "headers", "rowspan"]`.
## Slots

* `inner_block`

# `th`

## Attributes

* `class` (`:any`) - CSS class. Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["colspan", "rowspan"]`.
## Slots

* `inner_block`

# `tr`

## Attributes

* `class` (`:any`) - CSS class. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `user_inner_td`

## Attributes

* `class` (`:any`) - CSS class. Defaults to `nil`.
* `label` (`:string`) - Adds a label your user, e.g name. Defaults to `nil`.
* `sub_label` (`:string`) - Adds a sub-label your to your user, e.g title. Defaults to `nil`.
* `avatar_assigns` (`:map`) - if using an avatar, this map will be passed to the avatar component as props. Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*