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.

                
                     <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".

                
                     <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".

                
                     <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".

            
                    <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.

                
                    <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.

                
                    <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".

                
                    <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.

 

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>