Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Tables

Using Tables

To use a table, use the <ui:table> tag. Define columns within the header slot and define the rows within the default slot.

Here's what an example table might look like:

Basic Table
Copied!
Col 1 Col 2
Cell 1 Cell 2
Cell 3 Cell 4 
 1<ui:table>
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14</ui:table>
 1<ui:table>
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14</ui:table>

Properties

The following properties can be used to customize the table:

Property Type Default Description
empty boolean false Displays an empty state message when true.
emptyMessage string No data found Custom message for the empty state.
hover boolean false Enables hover effects on table rows.
hoverColor string secondary Sets the hover color. Options: primary, secondary, success, warning, danger.
inset boolean false Adjusts table styling when used within a card.
radius string sm Sets the border radius. Options: none, sm, md, lg.
shadow string sm Sets the shadow size. Options: sm, md, lg.
striped boolean false Enables striped rows for better readability.

Hover

The hover property adds a background color to table rows when they are hovered. Customize the color using the hoverColor property - options are primary, secondary, success, warning, danger.

Row Hover
Copied!
Col 1 Col 2
Cell 1 Cell 2
Cell 3 Cell 4 
 1<ui:table :hover="true" hover-color="primary">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14</ui:table>
 1<ui:table :hover="true" hover-color="primary">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14</ui:table>

Striping

The striped property alternates row colors for improved readability.

Striped Rows
Copied!
Col 1 Col 2
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6 
 1<ui:table :striped="true">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14    <ui:row>
15        <ui:cell>Cell 5</ui:cell>
16        <ui:cell>Cell 6</ui:cell>
17    </ui:row>
18</ui:table>
 1<ui:table :striped="true">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10    <ui:row>
11        <ui:cell>Cell 3</ui:cell>
12        <ui:cell>Cell 4</ui:cell>
13    </ui:row>
14    <ui:row>
15        <ui:cell>Cell 5</ui:cell>
16        <ui:cell>Cell 6</ui:cell>
17    </ui:row>
18</ui:table>

Empty State

The empty property displays a message when the table has no data. Customize the message with emptyMessage.

Empty State
Copied!
No records available, sadly.
 1<ui:table :empty="true" empty-message="No records available, sadly.">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10</ui:table>
 1<ui:table :empty="true" empty-message="No records available, sadly.">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5    </x-slot:header>
 6    <ui:row>
 7        <ui:cell>Cell 1</ui:cell>
 8        <ui:cell>Cell 2</ui:cell>
 9    </ui:row>
10</ui:table>

Inset

The inset property is used for nesting Tables within Cards. It uses negative margin to negate the padding of the card.

Inset Table
Copied!

Card with Inset Table

Col 1 Col 2
Cell 1 Cell 2
Cell 3 Cell 4

Card with Normal Table

Col 1 Col 2
Cell 1 Cell 2
Cell 3 Cell 4 
 1<ui:card>
 2    <x-slot:header>
 3        <ui:heading tag="h4">Card with Inset Table</ui:heading>
 4    </x-slot:header>
 5    <ui:table :inset="true">
 6        <x-slot:header>
 7            <ui:col>Col 1</ui:col>
 8            <ui:col>Col 2</ui:col>
 9        </x-slot:header>
10        <ui:row>
11            <ui:cell>Cell 1</ui:cell>
12            <ui:cell>Cell 2</ui:cell>
13        </ui:row>
14        <ui:row>
15            <ui:cell>Cell 3</ui:cell>
16            <ui:cell>Cell 4</ui:cell>
17        </ui:row>
18    </ui:table>
19</ui:card>
20 
21<ui:card class="mt-6">
22    <x-slot:header>
23        <ui:heading tag="h4">Card with Normal Table</ui:heading>
24    </x-slot:header>
25    <ui:table>
26        <x-slot:header>
27            <ui:col>Col 1</ui:col>
28            <ui:col>Col 2</ui:col>
29        </x-slot:header>
30        <ui:row>
31            <ui:cell>Cell 1</ui:cell>
32            <ui:cell>Cell 2</ui:cell>
33        </ui:row>
34        <ui:row>
35            <ui:cell>Cell 3</ui:cell>
36            <ui:cell>Cell 4</ui:cell>
37        </ui:row>
38    </ui:table>
39</ui:card>
 1<ui:card>
 2    <x-slot:header>
 3        <ui:heading tag="h4">Card with Inset Table</ui:heading>
 4    </x-slot:header>
 5    <ui:table :inset="true">
 6        <x-slot:header>
 7            <ui:col>Col 1</ui:col>
 8            <ui:col>Col 2</ui:col>
 9        </x-slot:header>
10        <ui:row>
11            <ui:cell>Cell 1</ui:cell>
12            <ui:cell>Cell 2</ui:cell>
13        </ui:row>
14        <ui:row>
15            <ui:cell>Cell 3</ui:cell>
16            <ui:cell>Cell 4</ui:cell>
17        </ui:row>
18    </ui:table>
19</ui:card>
20 
21<ui:card class="mt-6">
22    <x-slot:header>
23        <ui:heading tag="h4">Card with Normal Table</ui:heading>
24    </x-slot:header>
25    <ui:table>
26        <x-slot:header>
27            <ui:col>Col 1</ui:col>
28            <ui:col>Col 2</ui:col>
29        </x-slot:header>
30        <ui:row>
31            <ui:cell>Cell 1</ui:cell>
32            <ui:cell>Cell 2</ui:cell>
33        </ui:row>
34        <ui:row>
35            <ui:cell>Cell 3</ui:cell>
36            <ui:cell>Cell 4</ui:cell>
37        </ui:row>
38    </ui:table>
39</ui:card>

Hover Cells

The <ui:cell> component has its own special hover property. When enabled, it makes the cell's contents invisible until the parent row is hovered. This is useful for hiding interactive elements like buttons until they're needed -- increasing readability in congested tables.

Hover Cells
Copied!
Col 1 Col 2 Col 3
Cell 1 Cell 2
Cell 4 Cell 5 Cell 6 
 1<ui:table :hover="true">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5        <ui:col>Col 3</ui:col>
 6    </x-slot:header>
 7    <ui:row>
 8        <ui:cell>Cell 1</ui:cell>
 9        <ui:cell>Cell 2</ui:cell>
10        <ui:cell :hover="true">
11            <ui:button size="sm">Button for Row Actions</ui:button>
12        </ui:cell>
13    </ui:row>
14    <ui:row>
15        <ui:cell>Cell 4</ui:cell>
16        <ui:cell>Cell 5</ui:cell>
17        <ui:cell :hover="true">Cell 6</ui:cell>
18    </ui:row>
19</ui:table>
 1<ui:table :hover="true">
 2    <x-slot:header>
 3        <ui:col>Col 1</ui:col>
 4        <ui:col>Col 2</ui:col>
 5        <ui:col>Col 3</ui:col>
 6    </x-slot:header>
 7    <ui:row>
 8        <ui:cell>Cell 1</ui:cell>
 9        <ui:cell>Cell 2</ui:cell>
10        <ui:cell :hover="true">
11            <ui:button size="sm">Button for Row Actions</ui:button>
12        </ui:cell>
13    </ui:row>
14    <ui:row>
15        <ui:cell>Cell 4</ui:cell>
16        <ui:cell>Cell 5</ui:cell>
17        <ui:cell :hover="true">Cell 6</ui:cell>
18    </ui:row>
19</ui:table>

Muted Rows

Passing a boolean value to the muted property on any <ui:row> will reduce the opacity of the row's contents.

1<ui:row :muted="true">
2    <ui:cell>Muted Row</ui:cell>
3</ui:row>
1<ui:row :muted="true">
2    <ui:cell>Muted Row</ui:cell>
3</ui:row>
Copied!
Muted Rows
Copied!
Name Email Status
John Doe john@example.com Active
Jane Doe jane@example.com Inactive
Jim Doe jim@example.com Active 
 1<ui:table>
 2    <x-slot:header>
 3        <ui:col>Name</ui:col>
 4        <ui:col>Email</ui:col>
 5        <ui:col>Status</ui:col>
 6    </x-slot:header>
 7    <ui:row>
 8        <ui:cell>John Doe</ui:cell>
 9        <ui:cell>john@example.com</ui:cell>
10        <ui:cell>Active</ui:cell>
11    </ui:row>
12    <ui:row :muted="true">
13        <ui:cell>Jane Doe</ui:cell>
14        <ui:cell>jane@example.com</ui:cell>
15        <ui:cell>Inactive</ui:cell>
16    </ui:row>
17    <ui:row>
18        <ui:cell>Jim Doe</ui:cell>
19        <ui:cell>jim@example.com</ui:cell>
20        <ui:cell>Active</ui:cell>
21    </ui:row>
22</ui:table>
 1<ui:table>
 2    <x-slot:header>
 3        <ui:col>Name</ui:col>
 4        <ui:col>Email</ui:col>
 5        <ui:col>Status</ui:col>
 6    </x-slot:header>
 7    <ui:row>
 8        <ui:cell>John Doe</ui:cell>
 9        <ui:cell>john@example.com</ui:cell>
10        <ui:cell>Active</ui:cell>
11    </ui:row>
12    <ui:row :muted="true">
13        <ui:cell>Jane Doe</ui:cell>
14        <ui:cell>jane@example.com</ui:cell>
15        <ui:cell>Inactive</ui:cell>
16    </ui:row>
17    <ui:row>
18        <ui:cell>Jim Doe</ui:cell>
19        <ui:cell>jim@example.com</ui:cell>
20        <ui:cell>Active</ui:cell>
21    </ui:row>
22</ui:table>

Related Components

Col

Use <ui:col> to define a column within the table -- it's a wrapper for the <th> tag.

The Column Component
1<ui:col>Column 1</ui:col>
1<ui:col>Column 1</ui:col>
Copied!

Row

Use <ui:row> to define a row within the table -- it's a wrapper for the <tr> tag.

The Row Component
1<ui:row>
2    <ui:cell>Cell 1</ui:cell>
3    <ui:cell>Cell 2</ui:cell>
4</ui:row>
1<ui:row>
2    <ui:cell>Cell 1</ui:cell>
3    <ui:cell>Cell 2</ui:cell>
4</ui:row>
Copied!

Cell

Use <ui:cell> to define a cell within a row.

The Cell Component
1<ui:cell>Content</ui:cell>
1<ui:cell>Content</ui:cell>
Copied!
Like this project? Stop by the bear cave to stargaze.