Documentation Playground
Skip to content
Docs

Table

Semantic table element for presenting data.
Full name Email Group
Danilo Sousa danilo@example.com Developer
Zahra Ambessa zahra@example.com Admin
Jasper Eriksson jasper@example.com Developer 
<.table>
  <.table_header>
    <.table_row>
      <.table_column_header_cell>Full name</.table_column_header_cell>
      <.table_column_header_cell>Email</.table_column_header_cell>
      <.table_column_header_cell>Group</.table_column_header_cell>
    </.table_row>
  </.table_header>
  <.table_body>
    <.table_row>
      <.table_row_header_cell>Danilo Sousa</.table_row_header_cell>
      <.table_cell>danilo@example.com</.table_cell>
      <.table_cell>Developer</.table_cell>
    </.table_row>
    <.table_row>
      <.table_row_header_cell>Zahra Ambessa</.table_row_header_cell>
      <.table_cell>zahra@example.com</.table_cell>
      <.table_cell>Admin</.table_cell>
    </.table_row>
    <.table_row>
      <.table_row_header_cell>Jasper Eriksson</.table_row_header_cell>
      <.table_cell>jasper@example.com</.table_cell>
      <.table_cell>Developer</.table_cell>
    </.table_row>
  </.table_body>
</.table>

API Reference

Groups header and body parts in a semantic table. Supports common margin props on the root.

Root

Groups the table_header and table_body parts.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
layout string "auto" Table layout algorithm. One of 'auto' or 'fixed'.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
size string "2" Table size from 1 to 3. Controls text size and cell padding.
style string ""
variant string "surface" Visual style variant. One of 'surface' or 'ghost'.
class Additional CSS classes to add to the element.
Type string Default nil
layout Table layout algorithm. One of 'auto' or 'fixed'.
Type string Default "auto"
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
size Table size from 1 to 3. Controls text size and cell padding.
Type string Default "2"
style
Type string Default ""
variant Visual style variant. One of 'surface' or 'ghost'.
Type string Default "surface"

Contains the column headings for the table.

Prop Type Default Description

Body

Displays the table data.

Prop Type Default Description

Row

A row of table cells.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
style string ""
class Additional CSS classes to add to the element.
Type string Default nil
style
Type string Default ""

Cell

A basic table cell.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
style string ""
class Additional CSS classes to add to the element.
Type string Default nil
style
Type string Default ""

ColumnHeaderCell

The header of a table column.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
style string ""
class Additional CSS classes to add to the element.
Type string Default nil
style
Type string Default ""

RowHeaderCell

The header of a table row.

Prop Type Default Description
class string nil Additional CSS classes to add to the element.
style string ""
class Additional CSS classes to add to the element.
Type string Default nil
style
Type string Default ""

Examples

Size

Use the size prop to control how large the text and padding of the table cells should be.

Full name Email
Danilo Sousa danilo@example.com
Zahra Ambessa zahra@example.com
Full name Email
Danilo Sousa danilo@example.com
Zahra Ambessa zahra@example.com
Full name Email
Danilo Sousa danilo@example.com
Zahra Ambessa zahra@example.com 
<.flex direction="column" gap="5" max_width="350px">
  <.table size="1">
    <.table_header>
      <.table_row>
        <.table_column_header_cell>Full name</.table_column_header_cell>
        <.table_column_header_cell>Email</.table_column_header_cell>
      </.table_row>
    </.table_header>
    <.table_body>
      <.table_row>
        <.table_row_header_cell>Danilo Sousa</.table_row_header_cell>
        <.table_cell>danilo@example.com</.table_cell>
      </.table_row>
      <.table_row>
        <.table_row_header_cell>Zahra Ambessa</.table_row_header_cell>
        <.table_cell>zahra@example.com</.table_cell>
      </.table_row>
    </.table_body>
  </.table>
  <.table size="2">
    <.table_header>
      <.table_row>
        <.table_column_header_cell>Full name</.table_column_header_cell>
        <.table_column_header_cell>Email</.table_column_header_cell>
      </.table_row>
    </.table_header>
    <.table_body>
      <.table_row>
        <.table_row_header_cell>Danilo Sousa</.table_row_header_cell>
        <.table_cell>danilo@example.com</.table_cell>
      </.table_row>
      <.table_row>
        <.table_row_header_cell>Zahra Ambessa</.table_row_header_cell>
        <.table_cell>zahra@example.com</.table_cell>
      </.table_row>
    </.table_body>
  </.table>
  <.table size="3">
    <.table_header>
      <.table_row>
        <.table_column_header_cell>Full name</.table_column_header_cell>
        <.table_column_header_cell>Email</.table_column_header_cell>
      </.table_row>
    </.table_header>
    <.table_body>
      <.table_row>
        <.table_row_header_cell>Danilo Sousa</.table_row_header_cell>
        <.table_cell>danilo@example.com</.table_cell>
      </.table_row>
      <.table_row>
        <.table_row_header_cell>Zahra Ambessa</.table_row_header_cell>
        <.table_cell>zahra@example.com</.table_cell>
      </.table_row>
    </.table_body>
  </.table>
</.flex>

With a backplate

Use variant="surface" to add a visually enclosed backplate to the table.

Full name Email Group
Danilo Sousa danilo@example.com Developer
Zahra Ambessa zahra@example.com Admin
Jasper Eriksson jasper@example.com Developer 
<.table variant="surface">
  <.table_header>
    <.table_row>
      <.table_column_header_cell>Full name</.table_column_header_cell>
      <.table_column_header_cell>Email</.table_column_header_cell>
      <.table_column_header_cell>Group</.table_column_header_cell>
    </.table_row>
  </.table_header>
  <.table_body>
    <.table_row>
      <.table_row_header_cell>Danilo Sousa</.table_row_header_cell>
      <.table_cell>danilo@example.com</.table_cell>
      <.table_cell>Developer</.table_cell>
    </.table_row>
    <.table_row>
      <.table_row_header_cell>Zahra Ambessa</.table_row_header_cell>
      <.table_cell>zahra@example.com</.table_cell>
      <.table_cell>Admin</.table_cell>
    </.table_row>
    <.table_row>
      <.table_row_header_cell>Jasper Eriksson</.table_row_header_cell>
      <.table_cell>jasper@example.com</.table_cell>
      <.table_cell>Developer</.table_cell>
    </.table_row>
  </.table_body>
</.table>
← Tab Nav Tabs →