ArtiGrid

Vertical Time Line

The vertical timeline renders your records as a chronological sequence of cards along a central axis instead of a table, while keeping full CRUD in place. You map your columns to the timeline elements with timeline() and render it using render('timeline') — add, edit, view, and delete all work just like in the standard grid.

In this demo, events from the events table are ordered by start_date (newest first) and alternated left and right down the axis. Each entry pulls its icon and accent color from the icon and color columns, the color picker lets users choose that color when creating or editing an event, action buttons are grouped into a dropdown with buttonsArrange(), and delete is hidden for the record with id = 2.


<?php
    $grid = new ArtiGrid();
    $grid->table('events')
        ->timeline([
            'dateField'    => 'start_date',
            'titleField'   => 'title',
            'contentField' => 'description',
            'iconField'    => 'icon',      // optional: column with class FA, e.g. "fa fa-check"
            'colorField'   => 'color',      // Optional: Column with hex color
            'align'        => 'alternate',  // left | right | alternate
            'dateFormat'   => 'd-m-Y H:i',
            'orderDir'     => 'desc'
        ])
        ->required(false)
        ->validation_required([
            'title',
            'start_date',
            'end_date',
            'description',
            'color',
            'created_at',
            'updated_at'
        ])
        ->lang([
            'delete' => '¿Eliminar registro?'
        ])
        ->colorPicker('color', [
            'palette' => '#3788d8 #28a745 #dc3545 #fd7e14',
            'format'  => 'hex',
            'position'=> 'fixed'
        ])
        ->buttonsArrange()
        ->setActionCondition('delete', ['id', '!=', 2])
        ->modal(true);
    echo $grid->render('timeline');
?>

	id	title	description	start_date	end_date	color	all_day	created_at	updated_at	Actions