Create a List View

Lists display data in a table format with search, pagination, and actions.

File Locations

YAML Configuration:

app-configs/{app}/lists/{name}-list.yml

Livewire Component:

app-modules/{module}/resources/views/components/{name}-list.blade.php

Example YAML Configuration

Example: app-configs/accounting/lists/customers-list.yml

title: Customers
newLabel: New Customer
component: customer-detail
disableSearch: false
redirectAction: ''
columns:
  - field: name
    label: Name
    width: 12
    type: text
  - field: company_name
    label: Company Name
    width: 10
  - field: email
    label: Email
    width: 12
  - field: address
    label: Address
    width: 12
  - field: zipcode
    label: Zip Code
    width: 10
  - field: city
    label: City
    width: 10

List Properties

Column Properties

Livewire Component

Example: customers-list.blade.php

<?php

use Livewire\Component;
use Noerd\Traits\NoerdList;
use Nywerk\Customer\Models\Customer;

new class extends Component {
    use NoerdList;

    public function listAction(mixed $modelId = null, array $relations = []): void
    {
        $this->dispatch(
            event: 'noerdModal',
            modalComponent: 'customer-detail',
            source: $this->getComponentName(),
            arguments: ['modelId' => $modelId, 'relations' => $relations],
        );
    }

    public function with()
    {
        $rows = Customer::paginate(self::PAGINATION);

        return [
            'listConfig' => $this->buildList($rows),
        ];
    }

    public function rendering()
    {
        if ((int) request()->id) {
            $this->listAction(request()->id);
        }

        if (request()->create) {
            $this->listAction();
        }
    }
}; ?>

<x-noerd::page :disableModal="$disableModal">

    <x-noerd::list />

</x-noerd::page>

Key Concepts

• Trait: NoerdList provides all necessary properties and methods
• No constants needed: The trait handles component identification
• listAction(): Dispatches modal events to open detail views with ['modelId' => $modelId]
• $this->getComponentName(): Returns the current component name for the source parameter
• buildList(): Generates the list configuration from the YAML
• request()->id: URL parameter for direct access to a specific record
• <x-noerd::list />: Renders the table

Default Sorting

To set a custom default sort order, use setDefaultSort() in your mount() method:

public function mount(): void
{
    $this->mountList();
    $this->setDefaultSort('created_at', false);  // Sort by created_at descending
}

Parameters:

• $field: Column name to sort by
• $ascending: true for ascending (A-Z), false for descending (Z-A)

Without setDefaultSort(), lists default to id descending.

See List Search for more details on search and sorting.

Next Steps

Continue with Create a Detail View to build forms for editing records.