List Nova Resources

0.6 2020-06-16 00:21 UTC

This package is auto-updated.

Last update: 2021-10-09 23:04:58 UTC


Latest Version on Github Total Downloads Twitter Follow

Add a variety of lists to your dashboard



composer require dillingham/nova-list-card

Basic Usage

php artisan nova:list-card RecentUsers

namespace App\Nova\Metrics;

use App\Nova\User;
use NovaListCard\ListCard;

class RecentUsers extends ListCard
     * Setup the card options
    public function __construct()
            ->heading('Recent Users')
            ->orderBy('created_at', 'desc')

View more examples

Possible Scenarios

  • Latest resource / oldest resource
  • Upcoming / past due resources
  • Top resource by relationship count
  • Top resource by relationship's column sum

Card Width

Set the card's width, default 1/3


Card Heading

->heading('Top Bloggers')

Resource Subtitle

Display resource subtitle beneath the title


or display resource proporties beneath the title



Adds timestamp beneath resource title

Optionally can add as a side value, see below.

Defaults: created_at & moment.js format: MM/DD/YYYY:

->timestamp('completed_at', 'MM/DD'),

Relative timestamps: 5 days ago | in 5 days

->timestamp('completed_at', 'relative'),

Side Values

Display resource values on the right side


Aggregated Count

Add counts of relationships:


Aggregated Sum

Add sum of relationship's column:

->withSum('orders', 'total')

Value formatting

You can change the value output using numeral.js

-value('orders_sum') // 55200
-value('orders_sum', '0.0a') // 55.2k
-value('orders_sum', '($ 0.00 a)') // $55.2k

Value Timestamp: add third parameter for moment.js formats

->value('created_at') // 2019-04-27 00:00:00
->value('created_at', 'MM/DD', 'timestamp') // 04/27
->value('created_at', 'relative', 'timestamp') // 5 days ago


Set the number of items to display, default: 5:



Set the order of the resources:

->orderBy('scheduled_at', 'desc')

Show View All Link

You can link to the resource's index


Or to a lens attached to the resource


Footer Link

You can link to a urL instead of using viewAll:

->footerLink('Google', 'https://google.com')

Scoped Resource

Check the card's uri key within IndexQuery:

public static function indexQuery($request, $query)
    if($request->input('nova-list-card') == 'upcoming-tasks') {

    return $query;

CSS Classes

Customize styles easily if you have your own theme.css

.nova-list-card {}
.nova-list-card-heading {}
.nova-list-card-body {}
.nova-list-card-item {}
.nova-list-card-title {}
.nova-list-card-subtitle {}
.nova-list-card-timestamp {}
.nova-list-card-value {}
.nova-list-card-footer-link {}

Also includes resource specific classes etc


Also can target specific rows

.nova-list-card-item-1 {}
.nova-list-card-item-2 {}
.nova-list-card-item-3 {}

The uri key is added to the card

#upcoming-tasks {}

You can also add classes manually

->classes('font-bold text-red some-custom-class')

You can also add alternate row formatting




->heading('Recent Contacts')
->heading('Contacts: Most tasks', 'Tasks')
->orderBy('tasks_count', 'desc')
->heading('Top Opportunities', 'Estimates')
->withSum('opportunities', 'estimate')
->value('opportunities_sum', '0.0a')
->orderBy('opportunities_sum', 'desc'),


Method Description
resource() declare the resource
heading() add a title to card
subtitle() display subtitle value
timestamp() display & format timestamp
value() display right side value
withCount() aggregate count value
withSum() aggregate sum value
orderBy() set the resource order
limit() set number of resources
viewAll() enable view all link
viewAllLens() enable lens view all
footerLink() add a static footer link
zebra() add alternate row color
id() unique id for card's requests
classes() add css classes to card


Hi 👋, Im Brian Dillingham, creator of this Nova package and others

Hope you find it useful. Feel free to reach out with feedback.

Follow me on twitter: @im_brian_d