Table

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# Basics

Styled tables can be created using the moonshine::table component

<x-moonshine::table
:columns="[
'#', 'First', 'Last', 'Email'
]"
:values="[
[1, fake()->firstName(), fake()->lastName(), fake()->safeEmail()],
[2, fake()->firstName(), fake()->lastName(), fake()->safeEmail()],
[3, fake()->firstName(), fake()->lastName(), fake()->safeEmail()]
]"
/>
# First Last Email
1 Gust Renner tkessler@example.com
2 Bart Rohan ward.wilber@example.net
3 Jon Hayes rudolph03@example.net

# Crud mode

The crudMode parameter allows you to additionally style tables

<x-moonshine::table
:crudMode="true"
:columns="[
'#', 'First', 'Last', 'Email'
]"
:values="[
[1, fake()->firstName(), fake()->lastName(), fake()->safeEmail()],
[2, fake()->firstName(), fake()->lastName(), fake()->safeEmail()],
[3, fake()->firstName(), fake()->lastName(), fake()->safeEmail()]
]"
/>
# First Last Email
1 Simone Batz orn.alexandrea@example.net
2 Lilla Lynch ebert.ezra@example.com
3 Eunice O'Conner rodriguez.ezra@example.com

# Not found

The notfound parameter allows you to display a message if there are no table elements

<x-moonshine::table
:columns="[
'#', 'First', 'Last', 'Email'
]"
:notfound="true"
/>

Records not found

# Slots

The table can be formed using slots

<x-moonshine::table>
<x-slot:thead class="text-center">
<th colspan="4">Header</th>
</x-slot:thead>
<x-slot:tbody>
<tr>
<th>1</th>
<th>{{ fake()->firstName() }}</th>
<th>{{ fake()->lastName() }}</th>
<th>{{ fake()->safeEmail() }}</th>
</tr>
<tr>
<th>2</th>
<th>{{ fake()->firstName() }}</th>
<th>{{ fake()->lastName() }}</th>
<th>{{ fake()->safeEmail() }}</th>
</tr>
<tr>
<th>3</th>
<th>{{ fake()->firstName() }}</th>
<th>{{ fake()->lastName() }}</th>
<th>{{ fake()->safeEmail() }}</th>
</tr>
</x-slot:tbody>
<x-slot:tfoot class="text-center">
<td colspan="4">Footer</td>
</x-slot:tfoot>
</x-moonshine::table>
Header
1 Catherine Mosciski heber.hill@example.org
2 Maya Hills annalise.stanton@example.org
3 Antonina Berge gleason.bianka@example.net
Footer

# Styles

To style the table, there are predefined classes that can be used for tr / td

Available classes:

bgc-purple bgc-pink bgc-blue bgc-green bgc-yellow bgc-red bgc-gray

<x-moonshine::table>
<x-slot:thead class="bgc-blue text-center">
<th colspan="3">Header</th>
</x-slot:thead>
<x-slot:tbody>
<tr>
<th class="bgc-pink">{{ fake()->firstName() }}</th>
<th class="bgc-gray">{{ fake()->lastName() }}</th>
<th class="bgc-purple">{{ fake()->safeEmail() }}</th>
</tr>
<tr>
<th class="bgc-green">{{ fake()->firstName() }}</th>
<th class="bgc-red">{{ fake()->lastName() }}</th>
<th class="bgc-yellow">{{ fake()->safeEmail() }}</th>
</tr>
</x-slot:tbody>
</x-moonshine::table>
Header
Jayson Ritchie mcglynn.casimir@example.com
Tillman Langosh chyna.breitenberg@example.org