The compass tables are a great way to display your data in a table.
The tables are customizable and you can add your own custom cells to the table.
The package is automatically installed when you install the Compass Core package. However, Compass Core isn't required. If you want to install it separately, you can do so by running the following command in your terminal:
composer require git@gitlab.noardcode.nl:compass/tables.gitRemember to add the repository to your composer.json file if installation fails.
The GitLab access token can be obtained from yout GitLab instance.
"repositories": [
{
"type": "git",
"url": "https://___token___:[gitlab_access_token]@gitlab.noardcode.nl/compass/tables"
}
]Compass tables comes with a default configuration. You can publish the configuration file by running the following command:
php artisan vendor:publish --tag="tables-config"In this configuration file you can change the default configuration of the tables throughout the application.
To change to placement of table row actions globally the row-actions.placement key in the configration can be changed between left|right, by default actions are placed on the right side.
To define columns in your table you have to use the getTableColumns() method.
This method returns an array where you can specify the name, type and view that have to be used by the column.
Example:
public function getTableColumns(): array
{
return [
'avatar' => [
'title' => __('compass.core::users.Avatar'),
'type' => 'view',
'view' => 'compass.core::settings.users.components.avatar',
],
'roles.name' => [
'title' => __('compass.core::users.Roles'),
'type' => 'badge',
]
];
}You can add custom actions to the rows, for example a button to remove a row, these can be defined in the getRowActions() method.
Here you can add your buttons and logic which will return an array of these buttons to be used in a row.
public function getRowActions(): array
{
$actions = [];
// Predefined actions
$actions['show'] = true;
$actions['delete'] = true;
// Overruling a predefined action
$actions['show'] = [
'route' => 'admin.settings.users.show'
'icon' => 'user'
];
//Custom action
$actions['two_factor'] = [
'title' => __('compass.core::users.Configure 2FA'),
'data_attributes' => [
'toggle' => '#data-side-panel-two-factor',
'route' => 'admin.settings.users.two-factor',
],
'icon' => 'user-shield',
];
return $actions;
}When needing additional attributes on a table row, for example giving the row a different color.
The method getRowAttributes(Model $item) is available. The item variable received contains the data model used in the row.
Based on this data model, you can implement your custom logic to determine the attributes that should be returned.
public function getRowAttributes(Model|User $model): ?array
{
return ['class' => 'bg-danger', 'onclick' => 'alert("Dangerous alertbox");'];
}gets the name of the
If protected bool $selectable = true; allows you to select a row with a checkbox
| Option | Default value | Description |
|---|---|---|
| title | text | The title of the cell. |
| class | text or closure | The CSS classes of a cell, accepts text or a closure. The first time the closure is called is for the table heading, no parameter is provided. The iterations after the table heading will provide the resource collection item as parameter for the closure |
| sortable | false | If the cell is sortable. |
There are a few types of table cells that you can use in your resource collection. You can use the following types:
| Type | Additional data key | Example |
|---|---|---|
| Route | route | 'example' => ['type' => 'route', 'route' => 'admin.example.show'] |
| View | view | 'example' => ['type' => 'view', 'view' => 'example.view' ] |
| Date | date_format | 'example' => ['type' => 'date', 'date_format' => 'd-m-Y'] |
| Number | decimals | 'example' => ['type' => 'number', 'decimals' => 2] |
| Boolean | - | 'example' => ['type' => 'boolean'] |
| Badge | badge | 'example' => ['type' => 'badge', 'badge' => 'success'] |
| Html | - | 'example' => ['type' => 'html'] |
| Component | component | 'example' => ['type' => 'component', 'component' => 'example-component'] |
Component:
The component should implement the Noardcode\Compass\Tables\Contracts\CellComponentInterface. With this interface the
naming of the necessary properties
is forced.
To add footers to the table there are two slots available, footer and footerColumns. In must cases footerColmns should be the used slots. This slot takes configurations of the package and collection into account.
To add a footer to your table, just add a named slot to the component.
<x-noardcode-table :collection="$orders">
<x-slot name="footerColumns">
<th colspan="3" class="text-right">Cummulative</th>
<th class="text-right">1,144,60</th>
<th class="text-right">3</th>
<th></th>
</x-slot>
</x-noardcode-table>If one footer row is still not enough for your page, then you're free to use the general footer slot. This slot does not take configurations of the package and collection into account. While developing Compass modules you must take these configurable options into account!
<x-noardcode-table :collection="$orders">
<x-slot name="footer">
<tr>
@if($orders->isSelectable())
<th></th>
@endif
@if(\Noardcode\Compass\Tables\Components\Table::ROW_ACTIONS_LEFT == config('compass.tables.row-actions.placement'))
<th></th>
@endif
<th colspan="3" class="text-right">Page cummulative</th>
<th class="text-right">1.144,60</th>
<th class="text-right">3</th>
@if(\Noardcode\Compass\Tables\Components\Table::ROW_ACTIONS_RIGHT == config('compass.tables.row-actions.placement'))
<th></th>
@endif
</tr>
<tr>
@if($orders->isSelectable())
<th></th>
@endif
@if(\Noardcode\Compass\Tables\Components\Table::ROW_ACTIONS_LEFT == config('compass.tables.row-actions.placement'))
<th></th>
@endif
<th colspan="3" class="text-right">Total Cummulative</th>
<th class="text-right">11.440,60</th>
<th class="text-right">3</th>
@if(\Noardcode\Compass\Tables\Components\Table::ROW_ACTIONS_RIGHT == config('compass.tables.row-actions.placement'))
<th></th>
@endif
</tr>
</x-slot>
</x-noardcode-table>