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. Ideal for tables that present information, track progress, or show categorized data, it supports various layouts and designs. Developers can fully customize it with flexible options for colors, borders, padding, and text alignment to match your app's design.

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 seven distinct variants: default , outline , shadow , unbordered , transparent , hoverable , and stripped . Each variant can be styled with a variety of colors, including white , primary , secondary , dark , success , warning , danger , info , light , misc , dawn , and silver .

<.table color="white" variant="outline"></.table>
<.table color="primary" variant="default"></.table>
<.table color="secondary" variant="shadow"></.table>
<.table color="dark" variant="unbordered"></.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="light" variant="default"></.table>
<.table color="misc" variant="shadow"></.table>
<.table color="dawn" variant="unbordered"></.table>
<.table color="silver" variant="transparent"></.table>

Rounded prop in Phoenix LiveView table content Component

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

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

Border prop

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

<.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 .

<.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 padding prop offers values such as extra_small , small , medium , large , and extra_large .

<.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.

<.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 .

<.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 .

<.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.

<.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 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 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 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 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 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
  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.

Integrating Other Mishka Chelekom Components Within the Table