Ajax Table Card
Description
A customisable Laravel Nova card that fetches data through ajax calls.
Why?
To allow displaying certain data on the dashboard or any other place of your choice, while fetching the data through an AJAX call to reduce the initial page load time.
Installation instruction
composer require twentyonetf/ajax-table-card
How?
- Create a class that extends
AjaxTableCard
<?php
namespace App\Nova\Cards;
use Twentyonetf\AjaxTableCard\AjaxTableCard;
class NewUsers extends AjaxTableCard
{
/**
* The width of the card (1/3, 1/2, or full).
*
* @var string
*/
public $width = 'full';
public string $title = 'New Users';
public array $header = [
'ID', 'Name', 'Email', 'View'
];
public bool $expanded = true;
public bool $link = '/api/new-users;
}
- Register card like any nova card, for example:
NovaServiceProviderif you want it on the dashboard.
/**
* Get the cards that should be displayed on the Nova dashboard.
*
* @return array
*/
protected function cards(): array
{
return [
(new NewUsers())
];
}
- Generate and pass the data to the card.
Route::get('/api/new-users', function () {
$users = User::today()->get();
$data = $users->map(function ($user) {
return [
$session->id,
$user->name,
$user->email,
"/admin/resources/users/{$user->id}"
];
});
return $data;
})
Customisation
| Option | Type | Description | default |
|---|---|---|---|
| $title | string |
Used to set the title of the card. | Ajax Table Card |
| $header | array |
An array of the items in the header of the table. | null |
| $link | string |
The link to fetch the data from. | null |
| $cache | string |
How long to cache the data for. | 86400 |
| $linkable | bool |
Is the last column of the table a link to a page? | true |
| $expanded | bool |
The default status of table, expanded or collapsed | true |
| $countable | bool |
Display a counter of how many results next to the title | true |
Screenshots
3 Feb 23, 2022
7 Dec 9, 2022
5 Nov 7, 2022
39 Sep 29, 2022
5 Apr 2, 2022
9 Dec 27, 2022
44 Jan 1, 2023
117 Dec 11, 2022
25 Dec 22, 2022
17 Dec 15, 2022
3 Sep 25, 2022
5 Jul 18, 2022
3.5k Dec 26, 2022
13 Feb 8, 2022
6.9k Jan 2, 2023
27 Nov 20, 2022
3 Aug 4, 2022
0 Jul 28, 2022