bladewindUI

Table

Display tabular data beautifully in a simple way.

This component like all other BladewindUI components is simple to use with a few options to customise the component to suit your app needs. A BladewindUI table consists of two parts. The table header and the table body.

Name Department Email
Alfred Rowe Outsourcing alfred@therowe.com
Michael K. Ocansey Tech kabutey@gmail.com

                
                     <x-bladewind.table>
                        <x-slot name="header">
                            <th>Name</th>
                            <th>Department</th>
                            <th>Email</th>
                        </x-slot>
                        <tr>
                            <td>Alfred Rowe</td>
                            <td>Outsourcing</td>
                            <td>alfred@therowe.com</td>
                        </tr>
                        <tr>
                            <td>Michael K. Ocansey</td>
                            <td>Tech</td>
                            <td>kabutey@gmail.com</td>
                        </tr>
                    </x-bladewind.table>
                
            




No Gaps

By default the BladewindUI table rows are displayed with wide gaps to place more emphasis on each row and it’s content. Each row also has a default hover effect that highlights the left and right borders of the row. These can both be turned off.

To remove the wide gaps between the table rows you need to set the divider attribute to thin, like this, divider="thin".

Name Department Email
Alfred Rowe Outsourcing alfred@therowe.com
Michael K. Ocansey Tech kabutey@gmail.com

                
                     <x-bladewind.table 
                        divider="thin">
                        <x-slot name="header">
                            <th>Name</th>
                            ...
                        </x-slot>
                        ...
                    </x-bladewind.table>
                
            




No Divider

It is also possible to completely turn off the divider lines.

To remove the divider completely, set the divided attribute to false, like this, divided="false".

Name Department Email
Alfred Rowe Outsourcing alfred@therowe.com
Michael K. Ocansey Tech kabutey@gmail.com

                
                     <x-bladewind.table 
                        divided="false">
                        <x-slot name="header">
                            <th>Name</th>
                            ...
                        </x-slot>
                        ...
                    </x-bladewind.table>
                
            



No Hover Effect

To remove the beautiful green side border effect when users hover on each row, set the hover attribute to false, like this, hover_effect="false".

Name Department Email
Alfred Rowe Outsourcing alfred@therowe.com
Michael K. Ocansey Tech kabutey@gmail.com

            
                    <x-bladewind.table 
                        hover_effect="false" 
                        divider="thin">

                    <x-slot name="header">
                        <th>Name</th>
                        ...
                    </x-slot>
                    ...
                </x-bladewind.table>
            
        




Striped Table

Design experts argue that it is sometimes easier for users to visually scan tabular data if the table has striped rows. We are not challenging the experts. We’ve however made it possible for you to make your BladewindUI tables have striped rows. Set striped="true" on the table component to get a striped table.

Name Department Email
Alfred Rowe Outsourcing alfred@therowe.com
Arsone Gandote Outsourcing arson@outsourcing.com
Michael K. Ocansey Tech kabutey@gmail.com
Michel Lellatom Animations wecolossal@gmail.com
Nora Abena Dankwa Animations norabenashine@gmail.com

                
                    <x-bladewind.table 
                        striped="true" 
                        divider="thin">

                    <x-slot name="header">
                        <th>Name</th>
                        ...
                    </x-slot>
                    ...
                </x-bladewind.table>
            
        




Cells for Totals

Accountants have this interesting habit of double underlining their totals. If that’s something that interests you, apply the class double-underline to the td that holds the total value you want double underlined.

Item Quantity Price (GHS)
Office furniture 2 4,300.00
HP Laser Jet Printer 1 3,000.00
7,300.00

                
                    <x-bladewind.table striped="true" divider="thin">

                    <x-slot name="header">
                        <th>Name</th>
                        ...
                    </x-slot>
                    ...
                    <tr>
                        <td colspan="2" class="text-right"></td>
                        <td class="double-underline text-right">
                            7,300.00
                        </td>
                    </tr>
                </x-bladewind.table>
            
        




Table With Drop Shadow

You can add a subtle shadow effect to your BladewindUI tables by setting has_shadow="true".

Item Quantity Price (GHS)
Office furniture 2 4,300.00
HP Laser Jet Printer 1 3,000.00
7,300.00

                
                    <x-bladewind.table 
                        has_shadow="true"
                        striped="true" 
                        divider="thin">

                    <x-slot name="header">
                        <th>Name</th>
                        ...
                    </x-slot>
                    ...
                </x-bladewind.table>
            
        




Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Table component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
striped false Determines if the table rows are striped. Even rows get the stripes. The value should be passed as a string, not boolean.
true false
divided true Determines if the table rows show the lines that divide them. The value should be passed as a string, not boolean.
true false
divider regular Determines how wide the gaps are between table rows.
regular thin
hover_effect false Determines if the borders of the table rows light up when hovered over. The value should be passed as a string, not boolean.
true false
has_shadow true Determines if the table has a drop shadow effect. The value should be passed as a string, not boolean.
true false
compact false If set to true, the spacing between the TRs are reduced.
true false
header blank This slot holds your table header information.

 

Table with all attributes defined

                
                    <x-bladewind.table 
                        striped="true" 
                        divided="true"
                        divider="thin"
                        has_shadow="true" 
                        compact="true"
                        hover_effect="true">

                        <x-slot name="header">
                            ...
                        </x-slot>

                        <tr>
                        ...
                        </tr>

                    </x-bladewind.table>
                
            

 

The source file for this component is available in resources > views > components > bladewind > table.blade.php