Table

New version v0.0.8 🚀

Table component for Phoenix LiveView with support for styling, borders, text alignment, padding, and dynamic headers, footers, and cells.

Installation:

mix mishka.ui.gen.component table

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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.

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

Table variant and color props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the 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

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

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

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

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the 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

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

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

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

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

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

You can use the Mishka Chelekom pagination component with the table component to efficiently navigate through large datasets.

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

Table Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
variant	string	No	Determines the style of the table. Values include outline, default, shadow, bordered, transparent, hoverable, stripped, separated.
rounded	string	No	Determines the border radius. Default is nil.
padding	string	No	Determines padding for items. Default is small.
main_wrapper_class	string	No	Custom CSS class for the main wrapper. Default is nil.
inner_wrapper_class	string	No	Custom CSS class for the inner wrapper. Default is nil.
table_wrapper_class	string	No	Custom CSS class for the table wrapper. Default is nil.
table_body_class	string	No	Custom CSS class for the table body. Default is nil.
text_size	string	No	Determines text size. Default is small.
color	string	No	Determines the color theme of the table. Supported values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default is natural.The default, stripped, hoverable and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
border	string	No	Determines border style. Default is nil.
header_border	string	No	Sets the border style for the table header. Default is nil.
rows_border	string	No	Sets the border style for rows in the table. Default is nil.
cols_border	string	No	Sets the border style for columns in the table. Default is nil.
thead_class	string	No	Adds custom CSS classes to the table header. Default is nil.
footer_class	string	No	Adds custom CSS classes to the table footer. Default is nil.
table_fixed	boolean	No	Enables or disables the table's fixed layout. Default is false.
text_position	string	No	Determines the text position. Default is left.

Table Row (tr) Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.

Table Data Cell (td) Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.

Table CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	base - outline - default - shadow - bordered - transparent - hoverable - stripped - separated	Yes
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - misc - dawn - silver	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--padding`	string	extra_small - small - medium - large - extra_large	Yes
`--type`	string	table - th - tr - td	Yes
`--only`	string	table - th - tr - td	Yes
`--module`	string	Something	NO