MAD Lab

Listagens e tabelas

mad-grid mad-col mad-columns mad-pagination

Básico

mad-grid (modo zero-PHP) com mad-columns/mad-col mínimos.

Visible columns

Cod. Descrição Data Valor

Cod.	Descrição	Data	Valor
No records found
1	Pedido #1	11/03/2026	R$ 2.358,46
2	Pedido #2	18/03/2026	R$ 747,15
3	Pedido #3	26/10/2025	R$ 7.424,20
4	Pedido #4	15/12/2025	R$ 8.578,21
5	Pedido #5	25/05/2026	R$ 4.406,22
6	Pedido #6	04/07/2026	R$ 2.329,41
7	Pedido #7	19/06/2026	R$ 4.309,89
8	Pedido #8	04/03/2026	R$ 325,31

1–8 of 150

Per page:

resources/views/tutor/examples/grids-basico/basico.blade.php

<mad-grid model="TutorDemoPedido" per-page="8">
    <mad-columns>
        <mad-col field="id" label="Cod." width="70" sort />
        <mad-col field="descricao" label="Descrição" />
        <mad-col field="dt_pedido" label="Data" width="110" date="d/m/Y" sort />
        <mad-col field="valor_total" label="Valor" width="130" right money="R$" />
    </mad-columns>
</mad-grid>

Larguras, alinhamento e relação

width, center, right, sort e um campo de relação ({cliente->nome}) juntos.

Visible columns

Cod. Descrição Cliente Categoria Data Valor

Cod.	Descrição	Data	Valor
No records found
1	Pedido #1	11/03/2026	R$ 2.358,46
2	Pedido #2	18/03/2026	R$ 747,15
3	Pedido #3	26/10/2025	R$ 7.424,20
4	Pedido #4	15/12/2025	R$ 8.578,21
5	Pedido #5	25/05/2026	R$ 4.406,22
6	Pedido #6	04/07/2026	R$ 2.329,41
7	Pedido #7	19/06/2026	R$ 4.309,89
8	Pedido #8	04/03/2026	R$ 325,31

1–8 of 150

Per page:

resources/views/tutor/examples/grids-basico/completo.blade.php

<mad-grid model="TutorDemoPedido" per-page="8" sticky>
    <mad-columns>
        <mad-col field="id" label="Cod." width="70" center sort />
        <mad-col field="descricao" label="Descrição" sort />
        <mad-col field="{cliente->nome}" label="Cliente" sort />
        <mad-col field="{categoria->nome}" label="Categoria" />
        <mad-col field="dt_pedido" label="Data" width="110" center date="d/m/Y" sort />
        <mad-col field="valor_total" label="Valor" width="130" right money="R$" sort />
    </mad-columns>
</mad-grid>

mad-pagination (componente standalone)

Paginação avulsa para quando você não usa o mad-grid.

Componente apresentacional

O <mad-pagination> é standalone — não faz parte da engine do <mad-grid>, é pensado para quando você monta sua própria listagem por fora dele. Ele renderiza os botões a partir de total (número de PÁGINAS, não de registros) e da página atual; o clique chama uma função global madPaginate(n) que o CALLER precisa fornecer — nesta versão do framework ela não vem implementada, então o clique aqui é só ilustrativo. Para listagens reais, use <mad-grid> — a paginação dele já funciona sozinha.

resources/views/tutor/examples/grids-basico/paginacao.blade.php

@php
    // $that (como $__component) e uma variavel LEXICAL setada por
    // MadComponent::render() no template de TOPO da pagina. Este partial e
    // incluido de dentro do componente Blade nativo tutor-demo (escopo
    // isolado), entao $that nao chega ate aqui sozinho — precisa ser
    // reobtido via o stack estatico de MadRenderContext (push/pop em
    // MadComponent::render(), atravessa qualquer aninhamento de componentes).
    $that = \Mad\Component\MadRenderContext::getComponent();
@endphp
<mad-pagination :total="$that->totalPaginasCategorias()" per-page="3" show-info />

<mad-callout type="warning" title="Componente apresentacional" icon="info">
    O <code>&lt;mad-pagination&gt;</code> é standalone — não faz parte da engine
    do <code>&lt;mad-grid&gt;</code>, é pensado para quando você monta sua
    própria listagem por fora dele. Ele renderiza os botões a partir de
    <code>total</code> (número de PÁGINAS, não de registros) e da página
    atual; o clique chama uma função global <code>madPaginate(n)</code> que o
    CALLER precisa fornecer — nesta versão do framework ela não vem
    implementada, então o clique aqui é só ilustrativo. Para listagens reais,
    use <code>&lt;mad-grid&gt;</code> — a paginação dele já funciona sozinha.
</mad-callout>

← AnteriorReatividade Próxima →Ações de linha

Código-fonte completo da página

app/control/Tutor/TutorGridsBasico.php

<?php

namespace App\Control\Tutor;

use App\Models\TutorDemo\TutorDemoCategoria;
use App\Support\Tutor\TutorDemoSeed;
use App\Support\Tutor\TutorPage;

/**
 * TutorGridsBasico — estrutura minima do MadDataGrid: <mad-grid>, <mad-columns>,
 * <mad-col> e o componente standalone <mad-pagination>.
 *
 * Todos os exemplos usam <mad-grid model="..."> (modo zero-PHP — ver
 * "Modo zero-PHP" em grid-datagrid.md) porque esta pagina nao precisa de
 * regra de negocio nenhuma: e so leitura. Acoes/filtros/formatacao (que
 * exigem onSearch()/handlers custom) moram nas outras 3 paginas do lote.
 */
class TutorGridsBasico extends TutorPage
{
    protected string $catalogKey = 'grids_basico';

    public function mount(array $params = []): void
    {
        TutorDemoSeed::ensure();
    }

    /** Leitura exposta pro exemplo do &lt;mad-pagination&gt; standalone (R038: nada de query no @php do Blade). */
    public function totalPaginasCategorias(): int
    {
        return (int) ceil(TutorDemoCategoria::query()->count() / 3);
    }
}

resources/views/tutor/grids/basico.blade.php

<x-tutor-page page="grids_basico">
    <x-tutor-demo demo="tutor.examples.grids-basico.basico"
        title="Básico" desc="mad-grid (modo zero-PHP) com mad-columns/mad-col mínimos." />

    <x-tutor-demo demo="tutor.examples.grids-basico.completo"
        title="Larguras, alinhamento e relação" desc="width, center, right, sort e um campo de relação ({cliente->nome}) juntos." />

    <x-tutor-demo demo="tutor.examples.grids-basico.paginacao"
        title="mad-pagination (componente standalone)" desc="Paginação avulsa para quando você não usa o mad-grid." />
</x-tutor-page>

Grid básico