add Datagrid and Datalist components

src/BackpackServiceProvider.php

@@ -11,6 +11,7 @@
 use Illuminate\Routing\Router;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\File;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Str;
 use Illuminate\View\Compilers\BladeCompiler;
@@ -80,6 +81,7 @@ public function register()
         ViewNamespaces::addFor('widgets', 'crud::widgets');
 
         $this->loadViewComponents();
+        $this->registerDynamicBladeComponents();
 
         $this->registerBackpackErrorViews();
 
@@ -322,6 +324,38 @@ public function loadViewComponents()
         });
     }
 
+    /**
+     * Register dynamic Blade components from the Components directory.
+     *
+     * Any Blade component classes that are in that directory will be registered
+     * as dynamic components with the 'bp-{component-name}' prefix.
+     */
+    private function registerDynamicBladeComponents()
+    {
+        $path = __DIR__.'/app/View/Components';
+        $namespace = 'Backpack\\CRUD\\app\\View\\Components';
+
+        if (! is_dir($path)) {
+            return;
+        }
+
+        foreach (File::allFiles($path) as $file) {
+            $relativePath = str_replace(
+                ['/', '.php'],
+                ['\\', ''],
+                Str::after($file->getRealPath(), realpath($path).DIRECTORY_SEPARATOR)
+            );
+
+            $class = $namespace.'\\'.$relativePath;
+
+            // Check if the class exists and is a subclass of Illuminate\View\Component
+            // This ensures that only valid Blade components are registered.
+            if (class_exists($class) && is_subclass_of($class, \Illuminate\View\Component::class)) {
+                Blade::component('bp-'.Str::kebab(class_basename($class)), $class);
+            }
+        }
+    }
+
     /**
      * Load the Backpack helper methods, for convenience.
      */

src/ViewNamespaces.php

@@ -89,4 +89,25 @@ public static function getViewPathsFor(string $domain, string $viewName)
             return $item.'.'.$viewName;
         }, self::getFor($domain));
     }
+
+    /**
+     * Get view paths for a domain and view name with fallback support.
+     * This is useful for @includeFirst() calls that need a guaranteed fallback.
+     *
+     * @param  string  $domain  (eg. fields, filters, buttons, columns)
+     * @param  string  $viewName  (eg. text, select, checkbox)
+     * @param  string|null  $fallbackViewPath  (eg. 'crud::columns.text')
+     * @return array
+     */
+    public static function getViewPathsWithFallbackFor(string $domain, string $viewName, ?string $fallbackViewPath = null)
+    {
+        $paths = self::getViewPathsFor($domain, $viewName);
+
+        // Add fallback if provided and not already in the list
+        if ($fallbackViewPath && ! in_array($fallbackViewPath, $paths)) {
+            $paths[] = $fallbackViewPath;
+        }
+
+        return $paths;
+    }
 }

src/app/View/Components/Datagrid.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Backpack\CRUD\app\View\Components;
+
+use Illuminate\View\Component;
+
+class Datagrid extends Component
+{
+    public $entry;
+    public $crud;
+    public $columns;
+    public $displayButtons;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct($entry, $crud = null, $columns = [], $displayButtons = true)
+    {
+        $this->columns = $columns ?? $crud?->columns() ?? [];
+        $this->entry = $entry;
+        $this->crud = $crud;
+        $this->displayButtons = $displayButtons;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render()
+    {
+        // if no columns are set, don't load any view
+        if (empty($this->columns)) {
+            return '';
+        }
+
+        return view('crud::components.datagrid');
+    }
+}

src/app/View/Components/Datalist.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Backpack\CRUD\app\View\Components;
+
+use Illuminate\View\Component;
+
+class Datalist extends Component
+{
+    public $entry;
+    public $crud;
+    public $columns;
+    public $displayButtons;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct($entry, $crud = null, $columns = [], $displayButtons = true)
+    {
+        $this->columns = $columns ?? $crud?->columns() ?? [];
+        $this->entry = $entry;
+        $this->crud = $crud;
+        $this->displayButtons = $displayButtons;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render()
+    {
+        // if no columns are set, don't load any view
+        if (empty($this->columns)) {
+            return '';
+        }
+
+        return view('crud::components.datalist');
+    }
+}

src/config/backpack/operations/show.php

@@ -11,6 +11,9 @@
     // To override per Controller use $this->crud->setShowContentClass('class-string')
     'contentClass' => 'col-md-12',
 
+    // Which component to use for displaying the Show page?
+    'component' => 'bp-datagrid', // options: bp-datagrid, bp-datalist, or a custom component alias
+
     // Automatically add all columns from the db table?
     'setFromDb' => true,
 

src/resources/assets/css/common.css

@@ -1180,3 +1180,108 @@ div.dt-scroll-body {
     margin-left: 2px;
     margin-right: auto;
 }
+
+/* DataGrid Component */
+
+/* Base mobile-first layout: 1 column */
+.bp-datagrid {
+    display: grid;
+    grid-gap: 1.5rem;
+    grid-template-columns: 1fr;
+}
+
+.bp-datagrid-title {
+    font-size: .625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    line-height: 1rem;
+    color: #66626c;
+    margin-bottom: 0.25rem;
+}
+
+/* Breakpoint 1: Small screens (≥768px) — 6 columns */
+@media (min-width: 768px) {
+    .bp-datagrid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+    .bp-datagrid-item.size-1 {
+        grid-column: span 1 / span 1;
+    }
+
+    .bp-datagrid-item.size-2 {
+        grid-column: span 2 / span 2;
+    }
+
+    .bp-datagrid-item.size-3 {
+        grid-column: span 3 / span 3;
+    }
+
+    .bp-datagrid-item.size-4 {
+        grid-column: span 4 / span 4;
+    }
+
+    .bp-datagrid-item.size-5 {
+        grid-column: span 5 / span 5;
+    }
+
+    .bp-datagrid-item.size-6 {
+        grid-column: span 6 / span 6;
+    }
+}
+
+/* Breakpoint 2: Large screens (≥1024px) — 12 columns */
+@media (min-width: 1024px) {
+    .bp-datagrid {
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    .bp-datagrid-item.size-1 {
+        grid-column: span 1 / span 1;
+    }
+
+    .bp-datagrid-item.size-2 {
+        grid-column: span 2 / span 2;
+    }
+
+    .bp-datagrid-item.size-3 {
+        grid-column: span 3 / span 3;
+    }
+
+    .bp-datagrid-item.size-4 {
+        grid-column: span 4 / span 4;
+    }
+
+    .bp-datagrid-item.size-5 {
+        grid-column: span 5 / span 5;
+    }
+
+    .bp-datagrid-item.size-6 {
+        grid-column: span 6 / span 6;
+    }
+
+    .bp-datagrid-item.size-7 {
+        grid-column: span 7 / span 7;
+    }
+
+    .bp-datagrid-item.size-8 {
+        grid-column: span 8 / span 8;
+    }
+
+    .bp-datagrid-item.size-9 {
+        grid-column: span 9 / span 9;
+    }
+
+    .bp-datagrid-item.size-10 {
+        grid-column: span 10 / span 10;
+    }
+
+    .bp-datagrid-item.size-11 {
+        grid-column: span 11 / span 11;
+    }
+
+    .bp-datagrid-item.size-12 {
+        grid-column: span 12 / span 12;
+    }
+}

src/resources/views/crud/components/datagrid.blade.php

@@ -0,0 +1,19 @@
+<div class="bp-datagrid p-3">
+    @foreach($columns as $column)
+        <div class="bp-datagrid-item size-{{ $column['size'] ?? '3' }}">
+            <div class="bp-datagrid-title">{!! $column['label'] !!}</div>
+            <div class="bp-datagrid-content">
+                @includeFirst(\Backpack\CRUD\ViewNamespaces::getViewPathsWithFallbackFor('columns', $column['type'], 'crud::columns.text'))
+            </div>
+        </div>
+    @endforeach
+
+    @if($displayButtons ?? $crud && $crud->buttons()->where('stack', 'line')->count())
+        <div class="bp-datagrid-item size-12">
+            <div class="bp-datagrid-title">{{ trans('backpack::crud.actions') }}</div>
+            <div class="bp-datagrid-content">
+                @include('crud::inc.button_stack', ['stack' => 'line'])
+            </div>
+        </div>
+    @endif
+</div>

src/resources/views/crud/components/datalist.blade.php

@@ -0,0 +1,25 @@
+<table class="table table-striped m-0 p-0">
+    <tbody>
+        @foreach($columns as $column)
+        <tr>
+            <td @if($loop->index === 0) class="border-top-0" @endif>
+                <strong>{!! $column['label'] !!}@if(!empty($column['label'])):@endif</strong>
+            </td>
+            <td @if($loop->index === 0) class="border-top-0" @endif>
+                @includeFirst(\Backpack\CRUD\ViewNamespaces::getViewPathsWithFallbackFor('columns', $column['type'], 'crud::columns.text'))
+            </td>
+        </tr>
+        @endforeach
+
+        @if($displayButtons && $crud && $crud->buttons()->where('stack', 'line')->count())
+        <tr>
+            <td>
+                <strong>{{ trans('backpack::crud.actions') }}</strong>
+            </td>
+            <td>
+                @include('crud::inc.button_stack', ['stack' => 'line'])
+            </td>
+        </tr>
+        @endif
+    </tbody>
+</table>

src/resources/views/crud/inc/show_tabbed_table.blade.php

@@ -8,8 +8,6 @@
     <div class="card">
         @include('crud::inc.show_table', ['columns' => $columnsWithoutTab, 'displayActionsColumn' => false])
     </div>
-@else
-    @include('crud::inc.show_table', ['columns' => $columnsWithoutTab])
 @endif
 
 <div class="tab-container {{ $horizontalTabs ? '' : 'container'}} mb-2">

src/resources/views/crud/inc/show_table.blade.php

@@ -1,39 +1,7 @@
-@if(count($columns))
-    <table class="table table-striped m-0 p-0">
-        <tbody>
-        @foreach($columns as $column)
-            <tr>
-                <td @if($loop->index === 0) class="border-top-0" @endif>
-                    <strong>{!! $column['label'] !!}@if(!empty($column['label'])):@endif</strong>
-                </td>
-                <td @if($loop->index === 0) class="border-top-0" @endif>
-                    @php
-                        // create a list of paths to column blade views
-                        // including the configured view_namespaces
-                        $columnPaths = array_map(function($item) use ($column) {
-                            return $item.'.'.$column['type'];
-                        }, \Backpack\CRUD\ViewNamespaces::getFor('columns'));
-
-                        // but always fall back to the stock 'text' column
-                        // if a view doesn't exist
-                        if (!in_array('crud::columns.text', $columnPaths)) {
-                            $columnPaths[] = 'crud::columns.text';
-                        }
-                    @endphp
-                    @includeFirst($columnPaths)
-                </td>
-            </tr>
-        @endforeach
-        @if($crud->buttons()->where('stack', 'line')->count() && ($displayActionsColumn ?? true))
-            <tr>
-                <td>
-                    <strong>{{ trans('backpack::crud.actions') }}</strong>
-                </td>
-                <td>
-                    @include('crud::inc.button_stack', ['stack' => 'line'])
-                </td>
-            </tr>
-        @endif
-        </tbody>
-    </table>
-@endif
+<x-dynamic-component
+    :component="$crud->getOperationSetting('component')"
+    :entry="$entry"
+    :crud="$crud"
+    :columns="$columns"
+    :display-buttons="$displayActionsColumn ?? true"
+/>