Components / No data

No data

# Introduction

The <zinq:no-data> component is used to display a message when there is no data to show.

# Usage

EachNo data component requires following:

  • text attribute: The message to display when there is no data.
  • button slot: The button to display when there is no data.
There are no messages...
Send a message
  
<zinq:no-data text="There are no messages...">
    <x-slot name="button">
        <zinq:link href="#" primary class="mt-4">Send a message</zinq:link>
    </x-slot>
</zinq:no-data>

# Icon

The child components are optional, but you can use the <zinq:ripple-icon> component to display a nice icon.

There are no messages...
Send a message
  
<zinq:no-data text="There are no messages...">
    <x-slot name="button">
        <zinq:link href="#" primary class="mt-4">Send a message</zinq:link>
    </x-slot>
    <zinq:ripple-icon>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
        </svg>
    </zinq:ripple-icon>
</zinq:no-data>

# Conditional rendering

You can use the on attribute to conditionally render the component.

It provides a nice syntax when working with collections. You don't need to wrap the component with @if directive.

  
<zinq:no-data :on="$messages->isEmpty()">
    ...
</zinq:no-data>