PubTable

This is a table component. It is used to display a table and supports various table styles, such as default, hoverable, and striped.

Default Usage

Use PubTable with PubTableHead, PubTableBody, PubTableRow, PubTableHeadCell, and PubTableCell to compose a structured data table.

Product name	Color	Category	Price	Edit
Louis Vuitton Neverfull Tote	Brown	Handbag	₹1,65,000	Edit
Gucci GG Marmont Shoulder Bag	Black	Shoulder Bag	₹2,10,000	Edit
Nike Utility Backpack	Navy	Backpack	₹4,499	Edit

vue

<template>
  <pub-table>
    <pub-table-head>
      <pub-table-head-cell>Product name</pub-table-head-cell>
      <pub-table-head-cell>Color</pub-table-head-cell>
      <pub-table-head-cell>Category</pub-table-head-cell>
      <pub-table-head-cell>Price</pub-table-head-cell>
      <pub-table-head-cell>
        <span class="sr-only">Edit</span>
      </pub-table-head-cell>
    </pub-table-head>
    <pub-table-body>
      <pub-table-row>
        <pub-table-cell>Louis Vuitton Neverfull Tote</pub-table-cell>
        <pub-table-cell>Brown</pub-table-cell>
        <pub-table-cell>Handbag</pub-table-cell>
        <pub-table-cell>₹1,65,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Gucci GG Marmont Shoulder Bag</pub-table-cell>
        <pub-table-cell>Black</pub-table-cell>
        <pub-table-cell>Shoulder Bag</pub-table-cell>
        <pub-table-cell>₹2,10,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Nike Utility Backpack</pub-table-cell>
        <pub-table-cell>Navy</pub-table-cell>
        <pub-table-cell>Backpack</pub-table-cell>
        <pub-table-cell>₹4,499</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>
    </pub-table-body>
  </pub-table>
</template>

<script lang="ts" setup>
import {
    PubA,
    PubTable,
    PubTableBody,
    PubTableCell,
    PubTableHead,
    PubTableHeadCell,
    PubTableRow,
} from 'vuelicity'
</script>

Colored Table

Prop - `color` Usage

The color prop can be used to change the color of the table.

Product name	Color	Category	Price	Edit
Louis Vuitton Neverfull Tote	Brown	Handbag	₹1,65,000	Edit
Gucci GG Marmont Shoulder Bag	Black	Shoulder Bag	₹2,10,000	Edit
Nike Utility Backpack	Navy	Backpack	₹4,499	Edit

vue

<template>
  <pub-table color="green">
    <pub-table-head>
      <pub-table-head-cell>Product name</pub-table-head-cell>
      <pub-table-head-cell>Color</pub-table-head-cell>
      <pub-table-head-cell>Category</pub-table-head-cell>
      <pub-table-head-cell>Price</pub-table-head-cell>
      <pub-table-head-cell>
        <span class="sr-only">Edit</span>
      </pub-table-head-cell>
    </pub-table-head>
    <pub-table-body>
      <pub-table-row>
        <pub-table-cell>Louis Vuitton Neverfull Tote</pub-table-cell>
        <pub-table-cell>Brown</pub-table-cell>
        <pub-table-cell>Handbag</pub-table-cell>
        <pub-table-cell>₹1,65,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Gucci GG Marmont Shoulder Bag</pub-table-cell>
        <pub-table-cell>Black</pub-table-cell>
        <pub-table-cell>Shoulder Bag</pub-table-cell>
        <pub-table-cell>₹2,10,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Nike Utility Backpack</pub-table-cell>
        <pub-table-cell>Navy</pub-table-cell>
        <pub-table-cell>Backpack</pub-table-cell>
        <pub-table-cell>₹4,499</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>
    </pub-table-body>
  </pub-table>
</template>

<script lang="ts" setup>
import {
    PubA,
    PubTable,
    PubTableBody,
    PubTableCell,
    PubTableHead,
    PubTableHeadCell,
    PubTableRow,
} from 'vuelicity'
</script>

Striped Rows

Prop - `striped` Usage

The striped prop can be used to add a stripe pattern to the rows of the table.

Product name	Color	Category	Price	Edit
Louis Vuitton Neverfull Tote	Brown	Handbag	₹1,65,000	Edit
Gucci GG Marmont Shoulder Bag	Black	Shoulder Bag	₹2,10,000	Edit
Nike Utility Backpack	Navy	Backpack	₹4,499	Edit

vue

<template>
  <pub-table striped>
    <pub-table-head>
      <pub-table-head-cell>Product name</pub-table-head-cell>
      <pub-table-head-cell>Color</pub-table-head-cell>
      <pub-table-head-cell>Category</pub-table-head-cell>
      <pub-table-head-cell>Price</pub-table-head-cell>
      <pub-table-head-cell>
        <span class="sr-only">Edit</span>
      </pub-table-head-cell>
    </pub-table-head>
    <pub-table-body>
      <pub-table-row>
        <pub-table-cell>Louis Vuitton Neverfull Tote</pub-table-cell>
        <pub-table-cell>Brown</pub-table-cell>
        <pub-table-cell>Handbag</pub-table-cell>
        <pub-table-cell>₹1,65,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Gucci GG Marmont Shoulder Bag</pub-table-cell>
        <pub-table-cell>Black</pub-table-cell>
        <pub-table-cell>Shoulder Bag</pub-table-cell>
        <pub-table-cell>₹2,10,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Nike Utility Backpack</pub-table-cell>
        <pub-table-cell>Navy</pub-table-cell>
        <pub-table-cell>Backpack</pub-table-cell>
        <pub-table-cell>₹4,499</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>
    </pub-table-body>
  </pub-table>
</template>

<script lang="ts" setup>
import {
    PubA,
    PubTable,
    PubTableBody,
    PubTableCell,
    PubTableHead,
    PubTableHeadCell,
    PubTableRow,
} from 'vuelicity'
</script>

Striped Columns

Prop - `striped-columns` Usage

The striped-columns prop can be used to add a stripe pattern to the columns of the table.

Product name	Color	Category	Price	Edit
Louis Vuitton Neverfull Tote	Brown	Handbag	₹1,65,000	Edit
Gucci GG Marmont Shoulder Bag	Black	Shoulder Bag	₹2,10,000	Edit
Nike Utility Backpack	Navy	Backpack	₹4,499	Edit

vue

<template>
  <pub-table striped-columns>
    <pub-table-head>
      <pub-table-head-cell>Product name</pub-table-head-cell>
      <pub-table-head-cell>Color</pub-table-head-cell>
      <pub-table-head-cell>Category</pub-table-head-cell>
      <pub-table-head-cell>Price</pub-table-head-cell>
      <pub-table-head-cell>
        <span class="sr-only">Edit</span>
      </pub-table-head-cell>
    </pub-table-head>
    <pub-table-body>
      <pub-table-row>
        <pub-table-cell>Louis Vuitton Neverfull Tote</pub-table-cell>
        <pub-table-cell>Brown</pub-table-cell>
        <pub-table-cell>Handbag</pub-table-cell>
        <pub-table-cell>₹1,65,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Gucci GG Marmont Shoulder Bag</pub-table-cell>
        <pub-table-cell>Black</pub-table-cell>
        <pub-table-cell>Shoulder Bag</pub-table-cell>
        <pub-table-cell>₹2,10,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Nike Utility Backpack</pub-table-cell>
        <pub-table-cell>Navy</pub-table-cell>
        <pub-table-cell>Backpack</pub-table-cell>
        <pub-table-cell>₹4,499</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>
    </pub-table-body>
  </pub-table>
</template>

<script lang="ts" setup>
import {
    PubA,
    PubTable,
    PubTableBody,
    PubTableCell,
    PubTableHead,
    PubTableHeadCell,
    PubTableRow,
} from 'vuelicity'
</script>

Hover state

Prop - `hoverable` Usage

The hoverable prop can be used to add a hover state to the rows of the table.

Product name	Color	Category	Price	Edit
Louis Vuitton Neverfull Tote	Brown	Handbag	₹1,65,000	Edit
Gucci GG Marmont Shoulder Bag	Black	Shoulder Bag	₹2,10,000	Edit
Nike Utility Backpack	Navy	Backpack	₹4,499	Edit

vue

<template>
  <pub-table hoverable>
    <pub-table-head>
      <pub-table-head-cell>Product name</pub-table-head-cell>
      <pub-table-head-cell>Color</pub-table-head-cell>
      <pub-table-head-cell>Category</pub-table-head-cell>
      <pub-table-head-cell>Price</pub-table-head-cell>
      <pub-table-head-cell>
        <span class="sr-only">Edit</span>
      </pub-table-head-cell>
    </pub-table-head>
    <pub-table-body>
      <pub-table-row>
        <pub-table-cell>Louis Vuitton Neverfull Tote</pub-table-cell>
        <pub-table-cell>Brown</pub-table-cell>
        <pub-table-cell>Handbag</pub-table-cell>
        <pub-table-cell>₹1,65,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Gucci GG Marmont Shoulder Bag</pub-table-cell>
        <pub-table-cell>Black</pub-table-cell>
        <pub-table-cell>Shoulder Bag</pub-table-cell>
        <pub-table-cell>₹2,10,000</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>

      <pub-table-row>
        <pub-table-cell>Nike Utility Backpack</pub-table-cell>
        <pub-table-cell>Navy</pub-table-cell>
        <pub-table-cell>Backpack</pub-table-cell>
        <pub-table-cell>₹4,499</pub-table-cell>
        <pub-table-cell>
          <pub-a href="#">
            Edit
          </pub-a>
        </pub-table-cell>
      </pub-table-row>
    </pub-table-body>
  </pub-table>
</template>

<script lang="ts" setup>
import {
    PubA,
    PubTable,
    PubTableBody,
    PubTableCell,
    PubTableHead,
    PubTableHeadCell,
    PubTableRow,
} from 'vuelicity'
</script>

Reference

PubTable

Properties

Name	Type	Default	Description	Options
class	String	`''`	Additional CSS classes to apply.
wrapperClass	String	`''`	Additional CSS classes to apply to the wrapper.
color	String	`default`	The theme color of the table.	`'default'`, `'red'`, `'blue'`, `'green'`, `'yellow'`, `'pink'`, `'cyan'`, `'purple'`, `'grey'`
striped	Boolean	`false`	Add a stripe pattern to the rows.
stripedColumns	Boolean	`false`	Add a stripe pattern to the columns.
hoverable	Boolean	`false`	Add a hover state to the rows.

Slots

Name	Description
default	Table content — `PubTableHead` and `PubTableBody` elements.

PubTableBody

Slots

Name	Description
default	One or more `PubTableRow` elements.

PubTableCell

Slots

Name	Description
default	Default slot for content.

PubTableHead

Slots

Name	Description
default	One or more `PubTableHeadCell` elements.

PubTableHeadCell

Slots

Name	Description
default	Default slot for content.

PubTableRow

Slots

Name	Description
default	One or more `PubTableCell` elements.

PubTable ​

Default Usage ​

Colored Table ​

Prop - color Usage ​

Striped Rows ​

Prop - striped Usage ​

Striped Columns ​

Prop - striped-columns Usage ​

Hover state ​

Prop - hoverable Usage ​

Reference ​

PubTable ​

Properties ​

Slots ​

PubTableBody ​

Slots ​

PubTableCell ​

Slots ​

PubTableHead ​

Slots ​

PubTableHeadCell ​

Slots ​

PubTableRow ​

Slots ​

PubTable

Default Usage

Colored Table

Prop - `color` Usage

Striped Rows

Prop - `striped` Usage

Striped Columns

Prop - `striped-columns` Usage

Hover state

Prop - `hoverable` Usage

Reference

PubTable

Properties

Slots

PubTableBody

Slots

PubTableCell

Slots

PubTableHead

Slots

PubTableHeadCell

Slots

PubTableRow

Slots