[6.x] Ability to customise columns in asset browser

resources/js/components/assets/AssetManager.vue

@@ -8,6 +8,7 @@
         :initial-editing-asset-id="initialEditingAssetId"
         :selected-path="path"
         :selected-assets="selectedAssets"
+        :initial-columns="columns"
         @navigated="navigate"
         @selections-updated="updateSelections"
         @asset-doubleclicked="editAsset"
@@ -24,6 +25,7 @@ export default {
         actions: Array,
         canCreateContainers: Boolean,
         createContainerUrl: String,
+        columns: Array,
     },
 
     data() {

resources/js/components/assets/Browser/Browser.vue

@@ -70,11 +70,17 @@
                     :sort-column="sortColumn"
                     :sort-direction="sortDirection"
                     @selections-updated="(ids) => $emit('selections-updated', ids)"
+                    @visible-columns-updated="visibleColumns = $event"
                     v-slot="{ filteredRows: rows }"
                 >
                     <div :class="modeClass">
                         <div class="space-y-4">
-                            <data-list-search ref="search" v-model="searchQuery" />
+                            <!-- Search and Filter -->
+                            <div class="flex items-center justify-between gap-3">
+                                <data-list-search ref="search" v-model="searchQuery" />
+
+                                <data-list-column-picker v-if="mode === 'table'" :preferences-key="preferencesKey('columns')" />
+                            </div>
 
                             <breadcrumbs v-if="!restrictFolderNavigation" :path="path" @navigated="selectFolder" />
 
@@ -93,6 +99,7 @@
                                 v-on="sharedAssetEvents"
                                 :columns="columns"
                                 :loading="loading"
+                                :visible-columns="visibleColumns"
                                 @sorted="sorted"
                             />
 
@@ -219,21 +226,16 @@ export default {
         restrictFolderNavigation: Boolean, // Whether to restrict to a single folder and prevent navigation.
         selectedAssets: Array,
         selectedPath: String, // The path to display, determined by a parent component.
+        initialColumns: {
+            type: Array,
+            default: () => [],
+        },
     },
 
     data() {
         return {
-            columns: [
-                { label: __('File'), field: 'basename', visible: true, sortable: true },
-                { label: __('Size'), field: 'size', value: 'size_formatted', visible: true, sortable: true },
-                {
-                    label: __('Last Modified'),
-                    field: 'last_modified',
-                    value: 'last_modified_relative',
-                    visible: true,
-                    sortable: true,
-                },
-            ],
+            columns: this.initialColumns,
+            visibleColumns: this.initialColumns.filter(column => column.visible),
             containers: [],
             initializing: true,
             loading: true,
@@ -315,9 +317,27 @@ export default {
                 order: this.sortDirection,
                 search: this.searchQuery,
                 queryScopes: this.queryScopes,
+                columns: this.visibleColumnParameters,
             };
         },
 
+        visibleColumnParameters: {
+            get() {
+                if (this.visibleColumns === null || this.visibleColumns === undefined) {
+                    return null;
+                }
+
+                return this.visibleColumns.map(column => column.field).join(',');
+            },
+            set(value) {
+                this.visibleColumns = value.split(',').map(field => this.columns.find(column => column.field === field));
+            },
+        },
+
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
+
         reachedSelectionLimit() {
             return this.selectedAssets.length >= this.maxFiles;
         },
@@ -559,6 +579,7 @@ export default {
                     const data = response.data;
                     this.assets = data.data.assets;
                     this.meta = data.meta;
+                    this.columns = data.meta.columns;
 
                     if (this.searchQuery) {
                         this.folder = null;

resources/js/components/assets/Browser/Table.vue

@@ -33,16 +33,17 @@
                     @dragend="draggingFolder = null"
                 >
                     <td />
-                    <td @click="selectFolder(folder.path)">
-                        <a class="group flex cursor-pointer items-center">
-                            <file-icon
-                                extension="folder"
-                                class="inline-block h-8 w-8 text-blue-400 group-hover:text-blue ltr:mr-2 rtl:ml-2"
-                            />
-                            {{ folder.basename }}
-                        </a>
+                    <td v-for="column in visibleColumns">
+                        <template v-if="column.field === 'basename'">
+                            <a class="group flex cursor-pointer items-center" @click="selectFolder(folder.path)">
+                                <file-icon
+                                    extension="folder"
+                                    class="inline-block h-8 w-8 text-blue-400 group-hover:text-blue ltr:mr-2 rtl:ml-2"
+                                />
+                                {{ folder.basename }}
+                            </a>
+                        </template>
                     </td>
-                    <td :colspan="columns.length - 1" />
                     <td class="actions-column pr-3!">
                         <ItemActions
                             :url="actionUrl"
@@ -184,6 +185,7 @@ export default {
     props: {
         loading: Boolean,
         columns: Array,
+        visibleColumns: Array,
     },
 
     computed: {

resources/js/components/assets/Selector.vue

@@ -4,6 +4,7 @@
             <asset-browser
                 :initial-container="container"
                 :initial-per-page="$config.get('paginationSize')"
+                :initial-columns="columns"
                 :selected-path="folder"
                 :selected-assets="browserSelections"
                 :restrict-folder-navigation="restrictFolderNavigation"
@@ -51,6 +52,7 @@ export default {
         selected: Array,
         maxFiles: Number,
         queryScopes: Array,
+        columns: Array,
         restrictFolderNavigation: {
             type: Boolean,
             default() {

resources/js/components/data-list/ColumnPicker.vue

@@ -66,7 +66,7 @@
                                                 class="ltr:mr-2 rtl:ml-2"
                                                 v-model="column.visible"
                                                 @change="columnToggled(column)"
-                                                :disabled="selectedColumns.length === 1"
+                                                :disabled="selectedColumns.length === 1 || column.required"
                                             />
                                             {{ __(column.label) }}
                                         </div>

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -148,6 +148,7 @@
                 :view-mode="selectorViewMode"
                 :max-files="maxFiles"
                 :query-scopes="queryScopes"
+                :columns="columns"
                 @selected="assetsSelected"
                 @closed="closeSelector"
             >
@@ -265,6 +266,10 @@ export default {
             return Array.isArray(value) ? value[0] : value;
         },
 
+        columns() {
+            return this.meta.columns;
+        },
+
         /**
          * Whether assets should be restricted to the specified container
          * and folder. This will prevent navigation to other places.

resources/views/assets/browse.blade.php

@@ -13,6 +13,7 @@
         create-container-url="{{ cp_route('asset-containers.create') }}"
         initial-path="{{ $folder }}"
         initial-editing-asset-id="{{ $editing ?? null }}"
+        :columns="{{ $columns->toJson() }}"
     ></asset-manager>
 
     <x-statamic::docs-callout

src/CP/Column.php

@@ -18,6 +18,7 @@ class Column
     public $defaultVisibility = true;
     public $visible = true;
     public $sortable = true;
+    public $required = false;
     public $value;
 
     /**
@@ -151,6 +152,17 @@ public function numeric($numeric = null)
         return $this->fluentlyGetOrSet('numeric')->value($numeric);
     }
 
+    /**
+     * Get or set whether the column is required.
+     *
+     * @param  null|bool  $required
+     * @return mixed
+     */
+    public function required($required = null)
+    {
+        return $this->fluentlyGetOrSet('required')->value($required);
+    }
+
     /**
      * Cast column to array.
      *

src/Fieldtypes/Assets/Assets.php

@@ -6,6 +6,7 @@
 use Statamic\Actions\RenameAssetFolder;
 use Statamic\Assets\OrderedQueryBuilder;
 use Statamic\Contracts\Entries\Entry;
+use Statamic\CP\Column;
 use Statamic\Exceptions\AssetContainerNotFoundException;
 use Statamic\Facades\Action;
 use Statamic\Facades\Asset;
@@ -174,9 +175,44 @@ public function preload()
             'container' => $container = $this->container()->handle(),
             'dynamicFolder' => $dynamicFolder = $this->dynamicFolder(),
             'rename_folder' => $this->renameFolderAction($dynamicFolder),
+            'columns' => $this->getColumns(),
         ];
     }
 
+    protected function getColumns()
+    {
+        $columns = $this->container()->blueprint()->columns()->map(fn ($column) => clone $column);
+
+        $basename = Column::make('basename')
+            ->label(__('File'))
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true)
+            ->required(true);
+
+        $size = Column::make('size')
+            ->label(__('Size'))
+            ->value('size_formatted')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $lastModified = Column::make('last_modified')
+            ->label(__('Last Modified'))
+            ->value('last_modified_relative')
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(true);
+
+        $columns->put('basename', $basename);
+        $columns->put('size', $size);
+        $columns->put('last_modified', $lastModified);
+
+        $columns->setPreferred("assets.{$this->container()->handle()}.columns");
+
+        return $columns->rejectUnlisted()->values();
+    }
+
     private function dynamicFolder()
     {
         if (! $this->config('dynamic')) {