bladewindUI
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 | |
---|---|---|
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>
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 | |
---|---|---|
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>
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 | |
---|---|---|
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>
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 | |
---|---|---|
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>
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 | |
---|---|---|
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>
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>
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>
The table below shows a comprehensive list of all the attributes available for the Table component.
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. |
<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>
resources > views > components > bladewind > table.blade.php