Table

Updated Oct 16, 2026 v0.0.10

v0.0.10StableComponentStatelessApache-2.0

Installation mix mishka.ui.gen.component table

Source View Source

Overview of the Phoenix LiveView table Component

The Mishka Chelekom table component is a versatile and customizable Phoenix LiveView tool for displaying data in a structured table format.

Overview of the Phoenix LiveView table Component

Name	Role	Status
Mona Aghili [email protected]	Front-end developer	Offline
Arian Alijani [email protected]	QA Engineer	Vacation
Shahryar Tavakkoli [email protected]	Fullstack developer	Active

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

This Phoenix LiveView component also offers thematic colors, icon support, and responsive design, ensuring a seamless user experience for both desktop and mobile users. It is perfect for any project that requires an organized, visually appealing table to display and manage data effectively.

Table variant and color props

The table component supports nine distinct variants: base, default, outline, shadow, bordered, transparent, separated, hoverable, and stripped. Each variant except base can be styled with a variety of colors, including natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn. The default, bordered, separated, hoverable, and stripped variants also take white and dark.

Table variant and color props

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table color="natural" variant="outline"></.table>
<.table color="primary" variant="default"></.table>
<.table color="secondary" variant="shadow"></.table>
<.table color="dark" variant="stripped"></.table>
<.table color="success" variant="transparent"></.table>
<.table color="warning" variant="hoverable"></.table>
<.table color="danger" variant="stripped"></.table>
<.table color="info" variant="outline"></.table>
<.table color="silver" variant="default"></.table>
<.table color="misc" variant="shadow"></.table>
<.table color="dawn" variant="bordered"></.table>
<.table color="silver" variant="transparent"></.table>
<.table color="misc" variant="separated"></.table>
<!--Base-->
<.table></.table>

Rounded prop in Phoenix LiveView table Component

The rounded prop offers values like extra_small, small, medium, large, and extra_large.

Rounded prop in Phoenix LiveView table Component

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table rounded="extra_small"></.table>
<.table rounded="small"></.table>
<.table rounded="medium"></.table>
<.table rounded="large"></.table>
<.table rounded="extra_large"></.table>

Space prop in Phoenix LiveView table Component

The space prop only is applicable on separated variant. The space prop offers values like extra_small, small, medium, large, and extra_large.

Space prop in Phoenix LiveView table Component

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table variant="separated" space="extra_small"></.table>
<.table variant="separated" space="small"></.table>
<.table variant="separated" space="medium"></.table>
<.table variant="separated" space="large"></.table>
<.table variant="separated" space="extra_large" rounded="large"></.table>

Border prop

The border prop offers values like extra_small, small, medium, large, and extra_large.

Border prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table border="extra_small"></.table>
<.table border="small"></.table>
<.table border="medium"></.table>
<.table border="large"></.table>
<.table border="extra_large"></.table>

Padding prop

The padding prop offers values such as extra_small, small, medium, large, and extra_large.

Padding prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table padding="extra_small"></.table>
<.table padding="small"></.table>
<.table padding="medium"></.table>
<.table padding="large"></.table>
<.table padding="extra_large"></.table>

Text size prop

The text_size prop offers values such as extra_small, small, medium, large, and extra_large.

Text size prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table text_size="extra_small"></.table>
<.table text_size="small"></.table>
<.table text_size="medium"></.table>
<.table text_size="large"></.table>
<.table text_size="extra_large"></.table>

Text position prop

The text_position function allows you to customize the alignment of text within the table component, supporting several alignment options. You can set the position using values like left to align text to the left, right to align text to the right, and center to center the text. For a justified text layout, use justify. Additionally, you can control text alignment based on content flow direction by using start or end. By default, the text is aligned to the left if no value is provided.

Text position prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table text_position="left"></.table>
<.table text_position="right"></.table>
<.table text_position="center"></.table>
<.table text_position="justify"></.table>
<.table text_position="start"></.table>
<.table text_position="end"></.table>

Header border prop

The header_border function allows customization of the table header's border thickness. You can choose from predefined options like extra_small, small, medium, large, and extra_large.

Header border prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table header_border="extra_small"></.table>
<.table header_border="small"></.table>
<.table header_border="medium"></.table>
<.table header_border="large"></.table>
<.table header_border="extra_large"></.table>

Rows border prop

The rows_border function allows customization of the table rows's border thickness. You can choose from predefined options like extra_small, small, medium, large, and extra_large.

Rows border prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table rows_border="extra_small"></.table>
<.table rows_border="small"></.table>
<.table rows_border="medium"></.table>
<.table rows_border="large"></.table>
<.table rows_border="extra_large"></.table>

Cols border prop

The cols_border attribute sets the border style for columns in the table. You can customize the column borders by assigning specific styles like extra_small, small, or medium to adjust the thickness. If no value is provided, the default is nil, which results in no column borders being applied. This flexibility allows for more refined control over the table’s layout and presentation.

Cols border prop

Name	Age	Address
Alice Johnson	34	New York, No. 5 Broadway
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table cols_border="extra_small"></.table>
<.table cols_border="small"></.table>
<.table cols_border="medium"></.table>
<.table cols_border="large"></.table>
<.table cols_border="extra_large"></.table>

Table fixed prop

The table_fixed prop adds the table-fixed Tailwind CSS class to the table. This class ensures that the table adheres to fixed column widths, where the width of the first row dictates the widths of all columns throughout the table. This setup is particularly useful for maintaining a consistent layout, as you can manually assign widths to specific columns while the remaining width is distributed evenly among columns without explicit widths.

Table fixed prop

Name	Age	Address	Phone Number
Alice Maria Johnson	34	Maryland, Greenbelt, 2203 Flanigan Oaks Drive	(123) 456-7890
Michael Jr Scott	45	Scranton, No. 2 Paper Road	(987) 654-3210
Emily Carter	29	San Francisco, No. 10 Bay Street	(555) 123-4567

heex

<.table table_fixed></.table>

Table header slot

The header slot is used to create the heading of each column in the table. This slot has class prop so you can add custom classes to the headings.

Table header slot

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table>
  <:header class="your_heading_classes">Name</:header>

  <:header class="your_heading_classes">Age</:header>

  <:header class="your_heading_classes">Address</:header>

  <:header class="your_heading_classes">Action</:header>
</.table>

Table header icon and icon class

The icon attribute allows you to display an icon within table header slot. The icon_class attribute provides the option to apply custom styling to the icon by specifying a CSS class.

Table header icon and icon class

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table>
  <:header class="your_heading_classes">Name</:header>

  <:header class="your_heading_classes">Age</:header>

  <:header class="your_heading_classes">Address</:header>

  <:header icon="hero-pencil-square" icon_class="size-5"></:header>
</.table>

Table footer slot

The footer slot is used to create the footer of each column in the table. This slot has class prop so you can add custom classes to the headings.

Table footer slot

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street
Footer slot

heex

<.table>
  <:footer class="your_heading_classes">Name</:footer>

  <:footer class="your_heading_classes">Age</:footer>

  <:footer class="your_heading_classes">Address</:footer>
</.table>

Table footer icon and icon class

The icon attribute allows you to display an icon within table footer slot. The icon_class attribute provides the option to apply custom styling to the icon by specifying a CSS class.

Table footer icon and icon class

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table>
  <:footer class="your_heading_classes">Name</:footer>

  <:footer class="your_heading_classes">Age</:footer>

  <:footer class="your_heading_classes">Address</:footer>

  <:footer icon="hero-pencil-square" icon_class="size-5"></:footer>
</.table>

Table th, td, tr components

You can use the tr, th, and td components to create table rows, table headers, and table data cells respectively. These components allow for customizable class attributes and styling, helping you structure your table efficiently within Phoenix LiveView.

Table th, td, tr components

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

heex

<.table
  header_border="extra_small"
  rows_border="extra_small"
  cols_border="extra_small"
>
  <:header>Name</:header>
  <:header>Age</:header>
  <:header>Address</:header>
  <:header>Edit</:header>

  <.tr>
    <.td>Alice Johnson</.td>
    <.td>34</.td>
    <.td>No. 5 Broadway, New York, NY 10004, United States</.td>
    <.td><button>Edit</button></.td>
  </.tr>

  <.tr>
    <.td>Michael Scott</.td>
    <.td>45</.td>
    <.td>Scranton, No. 2 Paper Road</.td>
    <.td><button>Edit</button></.td>
  </.tr>

  <.tr>
    <.td>Emily Carter</.td>
    <.td>29</.td>
    <.td>San Francisco, No. 10 Bay Street</.td>
    <.td><button>Edit</button></.td>
  </.tr>
</.table>

Use Mishka Chelekom pagination with tables

The pagination component can be used with the table component for efficient pagination of table data, allowing users to navigate through large datasets easily.

Use Mishka Chelekom pagination with tables

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Integrating Other Mishka Chelekom Components Within the Table

Name	Age	Address
Alice Johnson	34	No. 5 Broadway, New York, NY 10004, United States
Michael Scott	45	Scranton, No. 2 Paper Road
Emily Carter	29	San Francisco, No. 10 Bay Street

Trend	Data Points	Location	Status
Global Market Trends	1,245	Worldwide	Live trends
Tech Industry Growth	987	Silicon Valley	Trending
Real Estate Market	753	San Francisco	Trending

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	A unique identifier is used to manage state and interaction
`class`	`any`	—	—	No	Custom CSS class for additional styling
`main_wrapper_class`	`string`	—	—	No	Custom CSS class
`inner_wrapper_class`	`string`	—	—	No	Custom CSS class
`table_wrapper_class`	`string`	—	—	No	Custom CSS class
`table_body_class`	`string`	—	—	No	Custom CSS class
`variant`	`string`	`base`	`basebase_hoverablebase_separatedbase_strippedoutlinedefaultshadowborderedtransparenthoverablestrippedseparated`	No	Determines the style
`rounded`	`string`	—	—	No	Determines the border radius
`padding`	`string`	`small`	`extra_smallsmallmediumlargeextra_large`	No	Determines padding for items
`text_size`	`string`	`small`	—	No	Determines text size
`color`	`string`	`natural`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfomiscdawnsilver`	No	Determines color theme
`border`	`string`	`extra_small`	—	No	Determines border style
`header_border`	`string`	—	—	No	Sets the border style for the table header
`rows_border`	`string`	—	—	No	Sets the border style for rows in the table
`cols_border`	`string`	—	—	No	Sets the border style for columns in the table
`thead_class`	`string`	—	—	No	Adds custom CSS classes to the table header
`footer_class`	`string`	—	—	No	Adds custom CSS classes to the table footer
`table_fixed`	`boolean`	`false`	—	No	Enables or disables the table's fixed layout
`text_position`	`string`	`left`	—	No	Determines the element's text position
`space`	`string`	`medium`	—	No	Determines the table row spaces
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller
`rows`	`list`	`[]`	—	No	—
`row_id`	`any`	—	—	No	the function for generating the row id
`row_click`	`any`	—	—	No	the function for handling phx-click on each row
`row_item`	`any`	—	—	No	the function for mapping each row before calling the :col and :action slots

Slots

Name	Required	Description
`inner_block`	No	Inner block that renders HEEx content
`header`	No	—
`footer`	No	—
`col`	No	—
`action`	No	the slot for showing user actions in the last table column

Attributes of the header slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling
`icon`	`any`	—	—	No	Icon displayed alongside of an item
`icon_class`	`any`	—	—	No	Determines custom class for the icon

Attributes of the footer slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling
`icon`	`any`	—	—	No	Icon displayed alongside of an item
`icon_class`	`any`	—	—	No	Determines custom class for the icon

Attributes of the col slot

Name	Type	Default	Values	Required	Description
`label`	`string`	—	—	No	—
`label_class`	`string`	—	—	No	—

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--variant`	`basebase_hoverablebase_separatedbase_strippedoutlinedefaultshadowborderedtransparenthoverablestrippedseparated`
`--color`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfomiscdawnsilver`
`--padding`	`extra_smallsmallmediumlargeextra_large`
`--type`	`tablethtrtd`
`--module`	A module name of your own

What it generates

Functions tablethtrtd

Helpers None

Generated with it icon

Command mix mishka.ui.gen.component table