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>
If the table feels too airy and spaced, there is a compact="true"
attribute to tighten things up.
Name | Department | |
---|---|---|
Alfred Rowe | Outsourcing | alfred@therowe.com |
Michael K. Ocansey | Tech | kabutey@gmail.com |
<x-bladewind.table
compact="true"
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>
There is no point manually building a table tediously when you have an array that contains everything you want to display as a table.
The table component has a data
attribute that accepts a json encoded array. The component builds its
table headings using the array keys.
Let us consider the array below and its resultant table.
$staff = [
[ 'id' => 1,
'first_name' => 'Michael',
'last_name' => 'Ocansey',
'department' => 'Engineering',
'marital_status' => 1
],
[
'id' => 2,
'first_name' => 'Alfred',
'last_name' => 'Rowe',
'department' => 'Engineering',
'marital_status' => 1
],
;[
'id' => 3,
'first_name' => 'Abigail',
'last_name' => 'Edwin',
'department' => 'Engineering',
'marital_status' => 0
],
];
<x-bladewind::table :data="$staff" />
data
to the component. Note there is no colon before the data attribute and in this case the data is passed as a json encoded string.
<x-bladewind::table data="{{ json_encode($staff) }}" />
id | first name | last name | department | marital status |
---|---|---|---|---|
1 | Michael | Ocansey | Engineering | 1 |
2 | Alfred | Rowe | Engineering | 1 |
3 | Abigail | Edwin | Engineering | 0 |
As you can tell from the above example, the component simply picks the array passed to it and generates a table. You can apply all the table attributes to remove the hover effect, remove the gaps or even make the table striped.
By default, the table picks the keys of the array and generates its table headings.
Any key with underscores will be replaced with spaces. first_name becomes first name.
An API will return staff data with the ID of each user, but it is rare to see the IDs displayed in a table.
The table component allows you to exclude some columns using the exclude_columns
attribute.
There is also the include_columns
attribute that lets you specify the only columns to be displayed.
If you have an array with 20 fields and you want to display 5 out of the 20 fields, it will be easier to specify the 5 columns in the include_columns
attribute rather than specifying 15 columns in the exclude_columns
attribute.
Let us exclude id
and marital_status
from our table above.
include_columns
takes precedence over exclude_columns
. If you specify both attributes, exclude_columns
will be ignored.first name | last name | department |
---|---|---|
Michael | Ocansey | Engineering |
Alfred | Rowe | Engineering |
Abigail | Edwin | Engineering |
<x-bladewind::table
exclude_columns="id, marital_status"
:data="$staff" />
Using the table component with dynamic data allows you to specify some extra cool attributes.
You can show action icons by passing a json encoded array in the action_icons
attribute.
Each action icon can have the name of the icon, the icon colour (default is the secondary button colour), a tooltip and the click action of the icon.
The icons will be displayed in the order they are entered into the array.
$action_icons = [
"icon:chat-bubble-left | tip:send user a message | color:green | click:sendMessage('{first_name}', '{last_name}')",
"icon:pencil | click:redirect('/user/{id}')",
"icon:trash | color:red | click:deleteUser({id}, '{first_name}', '{last_name}')",
];
<x-bladewind::table
exclude_columns="id, marital_status"
divider="thin"
:action_icons="$action_icons"
:data="$staff" />
first name | last name | department | actions |
---|---|---|---|
Michael | Ocansey | Engineering | |
Alfred | Rowe | Engineering | |
Abigail | Edwin | Engineering |
The icons are displayed from the $action_icons
array above. Let us analyze the first line of the $action_icons
array.
Note how each attribute is separated by a pipe (|).
icon:chat-bubble-left | This will display the chat-bubble-left icon |
tip:send user a message | On hover of the icon, the user will see a tooltip that says "send user a message" |
click:sendMessage('{first_name}', '{last_name}') | When the icon is clicked, the sendMessage Javascript function is triggered. The function name can be any function that exists in your code. Two parameters are passed to the function. The parameters can be any of the keys that exists in your array. In our earlier example our array contains first_name and last_name keys so we pass this to our function. It is important to wrap strings in a single quote. The keys also need to be wrapped in curly braces. The table component will replace '{first_name}' with the actual value of first_name from the array. |
color:green | The icon colour will be green. |
Below are the modals and Javascript functions being called when the icons are clicked.
<x-bladewind::modal name="send-message" title="">
<div class="mb-6">The message will be delivered to their company inbox if they are not currently online</div>
<x-bladewind::textarea placeholder="Type message here..." rows="5" />
</x-bladewind::modal>
<x-bladewind::modal name="delete-user" type="error" title="Confirm User Deletion">
Are you really sure you want to delete <b class="title"></b>?
This action cannot be reversed.
</x-bladewind::modal>
sendMessage = (first_name, last_name) => {
showModal('send-message');
domEl('.bw-send-message .modal-title').innerText = `Send Message to ${first_name} ${last_name}`;
}
deleteUser = (id, first_name, last_name) => {
showModal('delete-user');
domEl('.bw-delete-user .title').innerText = `${first_name} ${last_name}`;
}
redirect = (url) => {
window.open(url);
}
The table component provides a very basic way for users to search through table content.
If the searchable="true"
attribute is set,
a search field is placed above the table that makes it possible to search through any column of the table.
By placeholder text for the search input can be replaced by setting the search_placeholder
attribute on the table.
first name | last name | department | actions |
---|---|---|---|
Michael | Ocansey | Engineering | |
Alfred | Rowe | Engineering | |
Abigail | Edwin | Engineering |
<x-bladewind::table
searchable="true"
:data="$staff"
divider="thin"
search_placeholder="Find staff members by name..."
:action_icons="$action_icons"
exclude_columns="id, marital_status" />
There are times your array might contain keys that are not user-friendly enough to be column headings. From our array above assuming we wanted to replace
marital_status
to married?
, we will set the column_aliases
attribute.
This attributes accepts a json encoded array.
$column_aliases = [
'id' => 'ref #',
'marital_status' => 'married?'
];
<x-bladewind::table
exclude_columns="id"
divider="thin"
:action_icons="$action_icons"
:column_aliases="$column_aliases"
:data="$staff" />
ref # | first name | last name | department | married? |
---|---|---|---|---|
1 | Michael | Ocansey | Engineering | 1 |
2 | Alfred | Rowe | Engineering | 1 |
3 | Abigail | Edwin | Engineering | 0 |
The table below shows a comprehensive list of all the attributes available for the Table component.
Option | Default | Available Values |
---|---|---|
name | 'tbl-'.uniqid() | Name of the table. Useful if you want to target the table via Javascript. The name is added in the class="" attribute of the table. |
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. |
:data | null | Array of elements to generate the table from. When this has a value, there is no need to manually build the table. Ignore this attribute if you prefer to use data instead. |
data | null | Json encoded array of elements to generate the table from. When this has a value, there is no need to manually build the table. Ignore this attribute if you prefer to use :data instead.. |
exclude_columns | null | Comma separated list of columns to exclude when generating the table. The 'columns' need to match keys in your array. |
include_columns | null | Comma separated list of columns to include when generating the table. This list overwrites any columns specified in exclude_columns. In fact, the keys specified in this list will be the only ones used to generate the table. |
:action_icons | null |
Array of icon actions that will be displayed on each row of the table. Only used when data is not null. By default no action icons are displayed if value is null
This can also be passed as action_icons without the colon but then the array will need to be Json encoded.
|
action_title | actions | Heading of the column that shows the actions. |
:column_aliases | [] | Array of column aliases. Aliases are column names to use in place of what is defined in the data array. For example you may want a date_of_birth key to be displayed as birthday.
This can also be passed as column_aliases without the colon but then the array will need to be Json encoded. |
searchable | false/td> | Specify if the table is searchable. When true , a search input is placed above the table.true false |
search_placeholder | Search table below... | Only used when searchable="true" . Specifies the text to display in the search input field. |
<x-bladewind.table
striped="true"
divided="true"
divider="thin"
has_shadow="true"
compact="true"
searchable="false"
search_placeholder=""
name="staff-table"
:data="$data"
:column_aliases="$column_aliases"
include_columns="first_name, last_name, email"
exclude_columns="id,picture"
:action_icons="$action_icons"
action_title=""
hover_effect="true">
<x-slot name="header">
...
</x-slot>
<tr>
...
</tr>
</x-bladewind.table>
resources > views > components > bladewind > table.blade.php