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 | |
---|---|---|---|
1 | Yvonne | Stanton | trantow.elva@example.org |
2 | Elmer | Crist | gorczany.michelle@example.com |
3 | Mabelle | Weimann | dwaters@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 | |
---|---|---|---|
1 | Alanis | Hammes | lucius.sawayn@example.net |
2 | Wade | Kemmer | purdy.anna@example.net |
3 | Philip | Hauck | jboyer@example.org |
# 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 | Sterling | Schimmel | nlegros@example.net |
2 | Gayle | Frami | presley.leffler@example.net |
3 | Imelda | Greenfelder | vrunolfsson@example.org |
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 | ||
---|---|---|
Maye | Hagenes | bailee.marvin@example.net |
Elda | Towne | konopelski.caitlyn@example.com |