MAD Lab

Listagens e tabelas

mad-grid-filters mad-col-filter

Filtros completos

mad-grid-filters (toolbar) com busca id-ou-texto, combo de estado, período e um mad-col-filter de faixa de valor.

Filter by busca

Busca

Filter by estado

Estado

Filter by de

Filter by até

Até

Visible columns

Cod. Descrição Estado Data Valor

Cod.	Descrição	Estado	Data	– Valor
No records found
150	Pedido #150	Entregue	10/08/2026	R$ 4.095,50
149	Pedido #149	Enviado	23/01/2026	R$ 1.516,96
148	Pedido #148	Cancelado	27/04/2026	R$ 10.132,22
147	Pedido #147	Entregue	03/07/2026	R$ 5.723,62
146	Pedido #146	Enviado	02/07/2026	R$ 7.613,07
145	Pedido #145	Novo	08/01/2026	R$ 9.130,34
144	Pedido #144	Entregue	02/02/2026	R$ 14.601,98
143	Pedido #143	Enviado	15/12/2025	R$ 4.745,48

1–8 of 150

Per page:

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

@php
    // O grid "self" desta pagina compila pra uma chamada em cima da variavel
    // LEXICAL $__component. Este partial e incluido de dentro do componente
    // Blade nativo tutor-demo (escopo isolado), entao $__component nao chega
    // ate aqui sozinho. MadRenderContext::getComponent() le o MESMO dado via
    // stack estatico (push/pop em MadComponent::render()), que atravessa
    // esse aninhamento. NUNCA escreva o texto literal da tag grid+self dentro
    // de um comentario neste arquivo: o compilador de tags do MAD e
    // regex-based e nao entende comentario PHP — ele casaria a abertura da
    // tag aqui no comentario com o FECHAMENTO real la embaixo (que fica logo
    // depois do bloco de filtros), e tudo no meio vira corpo do bloco errado
    // (bug real, ja pego em produção neste lote — quebrava o parser).
    $__component = \Mad\Component\MadRenderContext::getComponent();
@endphp
<mad-grid self per-page="8" sticky>
    <mad-grid-filters style="toolbar">
        <mad-input-field name="busca" label="Busca" placeholder="Nº ou descrição..." />
        <mad-dbcombo-field name="estado_id" label="Estado" model="TutorDemoEstadoPedido" database="business" display="{nome}" order-by="ordem" />
        <mad-date-field name="dtIni" label="De" />
        <mad-date-field name="dtFim" label="Até" />
    </mad-grid-filters>

    <mad-columns>
        <mad-col field="id" label="Cod." width="70" sort />
        <mad-col field="descricao" label="Descrição" sort />
        <mad-col field="{estado->nome}" label="Estado" />
        <mad-col field="dt_pedido" label="Data" width="110" date="d/m/Y" sort />
        <mad-col field="valor_total" label="Valor" width="140" right money="R$">
            <mad-col-filter type="number-range" />
        </mad-col>
    </mad-columns>
</mad-grid>

app/control/Tutor/TutorGridsFiltros.php

public function onSearch(): void
{
    $this->searchQuery = function (Builder $q) {
        if ($this->busca !== '') {
            $v = trim($this->busca);
            is_numeric($v)
                ? $q->where('id', '=', (int) $v)
                : $q->where('descricao', 'like', "%{$v}%");
        }
    };
}

Filtro de coluna simples

mad-col-filter como popover de texto, direto na coluna — sem prop nenhuma no controller.

Visible columns

Cod. Descrição Valor

Cod.	Descrição	Valor
No records found
1	Pedido #1	R$ 2.358,46
2	Pedido #2	R$ 747,15
3	Pedido #3	R$ 7.424,20
4	Pedido #4	R$ 8.578,21
5	Pedido #5	R$ 4.406,22
6	Pedido #6	R$ 2.329,41
7	Pedido #7	R$ 4.309,89
8	Pedido #8	R$ 325,31

1–8 of 150

Per page:

resources/views/tutor/examples/grids-filtros/coluna-simples.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-filter op="like" />
        </mad-col>
        <mad-col field="valor_total" label="Valor" width="130" right money="R$" />
    </mad-columns>
</mad-grid>

Filtro de coluna com dbcombo

mad-col-filter de corpo livre (mad-dbcombo-field) pra escolher o estado direto no cabeçalho.

Visible columns

Cod. Descrição Estado

Cod.	Descrição	Estado Estado
No records found
1	Pedido #1
2	Pedido #2
3	Pedido #3
4	Pedido #4
5	Pedido #5
6	Pedido #6
7	Pedido #7
8	Pedido #8

1–8 of 150

Per page:

resources/views/tutor/examples/grids-filtros/coluna-dbcombo.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="{estado->nome}" label="Estado">
            <mad-col-filter op="=" field="estado_id">
                <mad-dbcombo-field name="filter_value" label="Estado"
                    model="TutorDemoEstadoPedido" database="business" display="{nome}" order-by="ordem"
                    placeholder="Todos" />
            </mad-col-filter>
        </mad-col>
    </mad-columns>
</mad-grid>

← AnteriorAções de linha Próxima →Formatação e totais

Código-fonte completo da página

app/control/Tutor/TutorGridsFiltros.php

<?php

namespace App\Control\Tutor;

use App\Models\TutorDemo\TutorDemoPedido;
use App\Support\Tutor\TutorDemoSeed;
use Illuminate\Database\Eloquent\Builder;
use Mad\Grid\MadDataGrid;

/**
 * TutorGridsFiltros — <mad-grid-filters> declarativo + <mad-col-filter> por coluna.
 *
 * NÃO estende TutorPage pelo mesmo motivo de TutorGridsAcoes: <mad-grid-filters>
 * lê PROPS PÚBLICAS desta classe via auto-discovery ($busca/$estado_id) — um
 * MadGrid zero-PHP não tem onde guardar esse estado entre requests.
 */
class TutorGridsFiltros extends MadDataGrid
{
    protected static string $wrapper = self::INTERNAL;

    protected string $model       = TutorDemoPedido::class;
    protected array  $with        = ['cliente', 'estado'];
    protected string $defaultSort = 'id DESC';
    protected string $actionSide  = 'left';

    // Período automático da MadFiltersTrait sobre a coluna dt_pedido.
    protected string $periodType = 'date-range';
    protected string $dateField  = 'dt_pedido';

    // busca é id-or-texto (lógica custom) -> fora do auto-apply.
    protected array $skipAutoFilter = ['busca'];

    public string $busca     = '';
    public string $estado_id = ''; // nome = coluna -> auto-filter (=)

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

    public function onSearch(): void
    {
        $this->searchQuery = function (Builder $q) {
            if ($this->busca !== '') {
                $v = trim($this->busca);
                is_numeric($v)
                    ? $q->where('id', '=', (int) $v)
                    : $q->where('descricao', 'like', "%{$v}%");
            }
        };
    }

    protected function view(): string|array
    {
        return 'tutor.grids.filtros';
    }
}

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

<x-tutor-page page="grids_filtros">
    <x-tutor-demo demo="tutor.examples.grids-filtros.completo"
        title="Filtros completos" desc="mad-grid-filters (toolbar) com busca id-ou-texto, combo de estado, período e um mad-col-filter de faixa de valor."
        php="TutorGridsFiltros::onSearch" />

    <x-tutor-demo demo="tutor.examples.grids-filtros.coluna-simples"
        title="Filtro de coluna simples" desc="mad-col-filter como popover de texto, direto na coluna — sem prop nenhuma no controller." />

    <x-tutor-demo demo="tutor.examples.grids-filtros.coluna-dbcombo"
        title="Filtro de coluna com dbcombo" desc="mad-col-filter de corpo livre (mad-dbcombo-field) pra escolher o estado direto no cabeçalho." />
</x-tutor-page>

Filtros de grid