Skip to content

Inline Badges

The inline badge list can be used to display a collection of entities like tags.

Example for show page

For rendering the badge list inside of a show page the x-coreui::out.inline-badge-list View component must be used inside the blade template of the show page:

<x-coreui::data-row :label="trans('bc-core-domain::user.attributes.tenants')">
    <x-coreui::out.inline-badge-list :value="$user->tenants()->pluck('name')"/>
</x-coreui::data-row>

Example for DataTables

For rendering the badge list inside of a datatable the InlineBadgeList View class must be used inside the controller where the DataTable is assembled:

return Factory::make(app(UserContract::class)::query())
    ->editColumn(
        'tenants',
        function ($user) {
            return Blade::renderComponent(new InlineBadgeList(
                value: $user->tenants()->pluck('name'),
                maxItems: 3,
                detailsLink: route('users.show', ['user' => $user->id]),
            ));
        },
    )
    // Mark columns as raw HTML columns so that the containing HTML is rendered
    // by the browser See https://yajrabox.com/docs/laravel-datatables/master/raw-columns
    ->rawColumns(['tenants'])
    ->setRowId('id');

In Addition it is important to mark the tenants column as non-orderable in the coresponding blade template: 

<x-base::th :dataset="[
    'data' => 'tenants',
    'orderable' => 'false',
    'searchable' => 'false'
]">@choice('bc-core-domain::tenant.name', 2)</x-base::th>

Value

Value is a required argument. It must be a collection containing one of the following types:

  • string
  • object with a label property
  • array with a label index

maxItems is an optional argument. It allows limiting the items to display. If maxItems is set detailsLink must also be set,