WIP

Author: pascalbaljet

app/app/Http/UserTableView.php

@@ -31,6 +31,7 @@ public function __invoke($resource = false, $paginateMethod)
         ])->table(function (InertiaTable $table) {
             $table
                 ->withGlobalSearch()
+                ->defaultSort('name')
                 ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false)
                 ->column(key: 'email', searchable: true, sortable: true)
                 ->column(key: 'language_code', label: 'Language')

app/tests/Browser/PaginationTest.php

@@ -103,7 +103,12 @@ public function it_generates_a_simple_paginator($url, $method)
                 ->orderBy('name')
                 ->get();
 
-            $pageTen = $method === 'simple' ? '?page=10' : '?cursor=eyJuYW1lIjoiUHJvZi4gVGhlbyBTY2hpbW1lbCIsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0';
+            $cursor = '?cursor=' . str_replace(['+', '/', '='], ['-', '_', ''], base64_encode(json_encode([
+                'name'               => $users->get(89)->name,
+                '_pointsToNextItems' => true,
+            ])));
+
+            $pageTen = $method === 'simple' ? '?page=10' : $cursor;
 
             $browser
                 ->visit($url)

js/HeaderCell.vue

@@ -1,10 +1,12 @@
 <template>
   <th
     v-show="!cell.hidden"
+    class="no-padding"
     :class="{ 'cursor-pointer': cell.sortable }"
   >
     <component
       :is="cell.sortable ? 'button' : 'div'"
+      class="py-3 px-6 w-full"
       @click.prevent="onClick"
     >
       <span class="flex flex-row items-center">

js/Table.vue

@@ -448,7 +448,12 @@ watch(queryBuilderData, () => {
 //
 
 function sortBy(column) {
-    queryBuilderData.value.sort = queryBuilderData.value.sort == column ? `-${column}` : column;
+    if(queryBuilderData.value.sort == column) {
+        queryBuilderData.value.sort = `-${column}`;
+    } else {
+        queryBuilderData.value.sort = column;
+    }
+
     queryBuilderData.value.cursor = null;
     queryBuilderData.value.page = 1;
 }
@@ -460,20 +465,9 @@ function show(key) {
 }
 
 function header(key) {
-    let columnSort = false;
-
-    const sort = queryBuilderProps.value.sort;
-
-    if (sort == key) {
-        columnSort = "asc";
-    } else if (sort == `-${key}`) {
-        columnSort = "desc";
-    }
-
     const intKey = findDataKey("columns", key);
     const columnData = clone(queryBuilderProps.value.columns[intKey]);
 
-    columnData.sorted = columnSort;
     columnData.onSort = sortBy;
 
     return columnData;
@@ -485,16 +479,19 @@ table :deep(th) {
     font-weight: 500;
     font-size: 0.75rem;
     line-height: 1rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
     text-align: left;
     --tw-text-opacity: 1;
     color: rgba(107, 114, 128, var(--tw-text-opacity));
     letter-spacing: 0.05em;
 }
 
+table :deep(th:not(.no-padding)) {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
 table :deep(td) {
     font-size: 0.875rem;
     line-height: 1.25rem;

php/Column.php

@@ -11,7 +11,8 @@ public function __construct(
         public string $label,
         public bool $canBeHidden,
         public bool $hidden,
-        public bool $sortable
+        public bool $sortable,
+        public bool|string $sorted
     ) {
     }
 
@@ -23,6 +24,7 @@ public function toArray()
             'can_be_hidden' => $this->canBeHidden,
             'hidden'        => $this->hidden,
             'sortable'      => $this->sortable,
+            'sorted'        => $this->sorted,
         ];
     }
 }

php/InertiaTable.php

@@ -15,6 +15,7 @@ class InertiaTable
     private Collection $columns;
     private Collection $searchInputs;
     private Collection $filters;
+    private string $defaultSort = '';
 
     public function __construct(Request $request)
     {
@@ -37,6 +38,19 @@ public function name(string $name): self
         return $this;
     }
 
+    /**
+     * Default sort for this table.
+     *
+     * @param string $defaultSort
+     * @return self
+     */
+    public function defaultSort(string $defaultSort): self
+    {
+        $this->defaultSort = $defaultSort;
+
+        return $this;
+    }
+
     /**
      * Collects all properties and sets the default
      * values from the request query.
@@ -64,8 +78,8 @@ protected function getQueryBuilderProps(): array
             'globalSearch' => $this->searchInputs->firstWhere('key', 'global'),
 
             'cursor' => $this->request->query('cursor'),
-            'sort' => $this->request->query('sort'),
-            'page' => Paginator::resolveCurrentPage(),
+            'sort'   => $this->request->query('sort', $this->defaultSort) ?: null,
+            'page'   => Paginator::resolveCurrentPage(),
         ];
     }
 
@@ -78,12 +92,20 @@ protected function transformColumns(): Collection
     {
         $columns = $this->request->query('columns', []);
 
-        if (empty($columns)) {
-            return $this->columns;
-        }
+        $sort = $this->request->query('sort', $this->defaultSort);
+
+        return $this->columns->map(function (Column $column) use ($columns, $sort) {
+            $key = $column->key;
 
-        return $this->columns->map(function (Column $column) use ($columns) {
-            $column->hidden = ! in_array($column->key, $columns);
+            if (! empty($columns)) {
+                $column->hidden = ! in_array($key, $columns);
+            }
+
+            if ($sort === $key) {
+                $column->sorted = 'asc';
+            } elseif ($sort === "-{$key}") {
+                $column->sorted = 'desc';
+            }
 
             return $column;
         });
@@ -147,7 +169,8 @@ public function column(string $key = null, string $label = null, bool $canBeHidd
             label: $label ?: Str::headline($key),
             canBeHidden: $canBeHidden,
             hidden: $hidden,
-            sortable: $sortable
+            sortable: $sortable,
+            sorted: false
         ));
 
         if ($searchable) {