F
Filament•2y ago
Chrysippus

table for custom page

I created a custom page just to display a table of my OrderResource but I want to filter it where it only shows "order completed" basically I created this custom page just for SalesReport but I dont know what is the best way to have a table on my custom page TIA.
41 Replies
Dennis Koch
Dennis Koch•2y ago
Use a ListPage and define the required methods or follow the table builder docs
Chrysippus
ChrysippusOP•2y ago
im kinda stuck at "npm install" returning error I dont understand at all what these error means 
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vitejs/plugin-vue@4.2.3
npm ERR! Found: vite@3.2.2
npm ERR! node_modules/vite
npm ERR!   dev vite@"^3.2.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite@4.4.2
npm ERR! node_modules/vite
npm ERR!   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vitejs/plugin-vue@4.2.3
npm ERR! Found: vite@3.2.2
npm ERR! node_modules/vite
npm ERR!   dev vite@"^3.2.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite@4.4.2
npm ERR! node_modules/vite
npm ERR!   peer vite@"^4.0.0" from @vitejs/plugin-vue@4.2.3
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^4.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
Dennis Koch
Dennis Koch•2y ago
You use the admin panel right? So there is no need to install anything
Chrysippus
ChrysippusOP•2y ago
ohh, okayyy. But how about the error? is it okay to ignore it? now i got this error on my admin view Unable to locate Mix file: /css/filament.css.
Dennis Koch
Dennis Koch•2y ago
While resolving: @vitejs/[email protected] Found: [email protected] Could not resolve dependency: peer vite@"^4.0.0" from @vitejs/[email protected]
Chrysippus
ChrysippusOP•2y ago
hello, i skipped the installation as you said but im having no style at my page? any reaons? layouts/app.blade.php 
  <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />

        <meta name="application-name" content="{{ config('app.name') }}" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @livewireStyles
        <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!--  this returns error Unable to locate Mix file: /css/app.css. if i use mix()-->

        @livewireScripts
        <script src="{{ asset('js/app.js') }}"></script> <!-- this returns error Unable to locate Mix file: /css/app.css. if i use mix()-->
        @stack('scripts')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications')
    </body>
</html>
  <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />

        <meta name="application-name" content="{{ config('app.name') }}" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @livewireStyles
        <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!--  this returns error Unable to locate Mix file: /css/app.css. if i use mix()-->

        @livewireScripts
        <script src="{{ asset('js/app.js') }}"></script> <!-- this returns error Unable to locate Mix file: /css/app.css. if i use mix()-->
        @stack('scripts')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications')
    </body>
</html>
web.php 
Route::get('/admin/sales-report', Table::class);
Route::get('/admin/sales-report', Table::class);
Chrysippus
ChrysippusOP•2y ago
Table.php 
  class Table extends Component implements HasTable
{
    use InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return Order::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('order_number')->sortable()->searchable()
                ->weight('bold')
                ->copyable()
                ->copyMessage('Order number copied'),
            TextColumn::make('user.name')
                ->label('Customer')
                ->sortable()
                ->searchable(),
        ];
    }

    protected function isTablePaginationEnabled(): bool
    {
        return true;
    }

    protected function getTableRecordsPerPageSelectOptions(): array
    {
        return [10, 25, 50, 100];
    }

    public function render(): View
    {
        return view('livewire.table');
    }
}
  class Table extends Component implements HasTable
{
    use InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return Order::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('order_number')->sortable()->searchable()
                ->weight('bold')
                ->copyable()
                ->copyMessage('Order number copied'),
            TextColumn::make('user.name')
                ->label('Customer')
                ->sortable()
                ->searchable(),
        ];
    }

    protected function isTablePaginationEnabled(): bool
    {
        return true;
    }

    protected function getTableRecordsPerPageSelectOptions(): array
    {
        return [10, 25, 50, 100];
    }

    public function render(): View
    {
        return view('livewire.table');
    }
}
Nate
Nate•2y ago
Mix file? You're installing Vite though? Try this setup. In your app.blade.php instead of asset() you use the following: 
@vite(['resources/css/app.css', 'resources/js/app.js'])
@vite(['resources/css/app.css', 'resources/js/app.js'])
// Vite config file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/filament.css',
        'resources/css/app.css',
        'resources/js/app.js',
        // other custom scripts...
      ],
      refresh: true
    }),
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
    }
  }
});
// Vite config file
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/filament.css',
        'resources/css/app.css',
        'resources/js/app.js',
        // other custom scripts...
      ],
      refresh: true
    }),
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
    }
  }
});
// Filament service provider
class FilamentServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Filament::serving(static function () {
            Filament::registerViteTheme('resources/css/filament.css');
        });
    }

    // Other stuff ...
}
// Filament service provider
class FilamentServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Filament::serving(static function () {
            Filament::registerViteTheme('resources/css/filament.css');
        });
    }

    // Other stuff ...
}
/* resources/css/filament.css */
@import '../../vendor/filament/filament/resources/css/app.css';

/* Somme overrides for your Filament theme. */
header.filament-main-topbar {
  background-color: hotpink;
}
/* resources/css/filament.css */
@import '../../vendor/filament/filament/resources/css/app.css';

/* Somme overrides for your Filament theme. */
header.filament-main-topbar {
  background-color: hotpink;
}
// package.json
{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.3",
    "alpinejs": "^3.4.2",
    "autoprefixer": "10.4.5",
    "laravel-vite-plugin": "^0.7.8",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24",
    "tippy.js": "^6.3.7",
    "vite": "^4.3.9"
    // other dev deps
  },
  "dependencies": {
    "@alpinejs/focus": "^3.10.2",
    "@awcodes/alpine-floating-ui": "^3.5.0"
    // rest of your deps
  },
  "overrides": {
    "autoprefixer": "10.4.5"
  }
}
// package.json
{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.3",
    "alpinejs": "^3.4.2",
    "autoprefixer": "10.4.5",
    "laravel-vite-plugin": "^0.7.8",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24",
    "tippy.js": "^6.3.7",
    "vite": "^4.3.9"
    // other dev deps
  },
  "dependencies": {
    "@alpinejs/focus": "^3.10.2",
    "@awcodes/alpine-floating-ui": "^3.5.0"
    // rest of your deps
  },
  "overrides": {
    "autoprefixer": "10.4.5"
  }
}
Chrysippus
ChrysippusOP•2y ago
have you encountered the same error?
Nate
Nate•2y ago
No but that's our productions setup and we have both Filament admin and custom pages with tables for our client app 🙂 That is using the latest Vite
Chrysippus
ChrysippusOP•2y ago
okay, lemme pull my update first, cause I got the error removed on my laptop but only if i uninstall this 
npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
this one causing me error if i install it, im thinking maybe something wrong on my setup. @natadata was able to build successful but at the end returns this error 
failed to load config from C:\xampp\htdocs\tsibugan-st\vite.config.js
error when starting dev server:
Error: Cannot find module '@vitejs/plugin-react'
Require stack:
- C:\xampp\htdocs\tsibugan-st\vite.config.js
- C:\xampp\htdocs\tsibugan-st\node_modules\vite\dist\node\chunks\dep-8609dc5d.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\xampp\htdocs\tsibugan-st\vite.config.js:37:35)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object._require.extensions.<computed> [as .js] (file:///C:/xampp/htdocs/tsibugan-st/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:66115:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
failed to load config from C:\xampp\htdocs\tsibugan-st\vite.config.js
error when starting dev server:
Error: Cannot find module '@vitejs/plugin-react'
Require stack:
- C:\xampp\htdocs\tsibugan-st\vite.config.js
- C:\xampp\htdocs\tsibugan-st\node_modules\vite\dist\node\chunks\dep-8609dc5d.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\xampp\htdocs\tsibugan-st\vite.config.js:37:35)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object._require.extensions.<computed> [as .js] (file:///C:/xampp/htdocs/tsibugan-st/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:66115:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
Nate
Nate•2y ago
@chrysippus2497 Sorry about that I left some stray code in the vite config I've updated it now Remove this line import react from '@vitejs/plugin-react'; It's because we use both livewire and react depending which page you are on
Chrysippus
ChrysippusOP•2y ago
the error was change 
failed to load config from C:\xampp\htdocs\tsibugan-st\vite.config.js
error when starting dev server:
Error: Build failed with 2 errors:
vite.config.js:1:267: ERROR: Transforming JavaScript decorators to the configured target environment ("node16") is not supported yet
vite.config.js:1:322: ERROR: Expected "class" after decorator but found ";"
    at failureErrorWithLog (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1639:15)
    at C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1051:25
    at runOnEndCallbacks (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1474:45)
    at buildResponseToResult (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1049:7)
    at C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1078:16
    at responseCallbacks.<computed> (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:700:9)
    at handleIncomingPacket (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:755:9)
    at Socket.readFromStdout (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:676:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)
failed to load config from C:\xampp\htdocs\tsibugan-st\vite.config.js
error when starting dev server:
Error: Build failed with 2 errors:
vite.config.js:1:267: ERROR: Transforming JavaScript decorators to the configured target environment ("node16") is not supported yet
vite.config.js:1:322: ERROR: Expected "class" after decorator but found ";"
    at failureErrorWithLog (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1639:15)
    at C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1051:25
    at runOnEndCallbacks (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1474:45)
    at buildResponseToResult (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1049:7)
    at C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:1078:16
    at responseCallbacks.<computed> (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:700:9)
    at handleIncomingPacket (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:755:9)
    at Socket.readFromStdout (C:\xampp\htdocs\tsibugan-st\node_modules\esbuild\lib\main.js:676:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)
sorry idk if this was on my setup... ohh wait, I have did something wrong on vite.config.js , lemme try again.
Chrysippus
ChrysippusOP•2y ago
its okay now, though my custom page with table looks different, I mean there's no sidebar or anything at all only the table livere/table.php 
<div>
    {{ $this->table }}
</div>
<div>
    {{ $this->table }}
</div>
Table.php 
<?php

namespace App\Http\Livewire;

use App\Models\Order;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Illuminate\Contracts\View\View;
use Filament\Tables\Contracts\HasTable;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;

class Table extends Component implements HasTable
{
    use InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return Order::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('order_number')->sortable()->searchable()
                ->weight('bold')
                ->copyable()
                ->copyMessage('Order number copied'),
            TextColumn::make('user.name')
                ->label('Customer')
                ->sortable()
                ->searchable(),
        ];
    }

    protected function isTablePaginationEnabled(): bool
    {
        return true;
    }

    protected function getTableRecordsPerPageSelectOptions(): array
    {
        return [10, 25, 50, 100];
    }

    public function render(): View
    {
        return view('livewire.table');
    }
}
<?php

namespace App\Http\Livewire;

use App\Models\Order;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Illuminate\Contracts\View\View;
use Filament\Tables\Contracts\HasTable;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;

class Table extends Component implements HasTable
{
    use InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return Order::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('order_number')->sortable()->searchable()
                ->weight('bold')
                ->copyable()
                ->copyMessage('Order number copied'),
            TextColumn::make('user.name')
                ->label('Customer')
                ->sortable()
                ->searchable(),
        ];
    }

    protected function isTablePaginationEnabled(): bool
    {
        return true;
    }

    protected function getTableRecordsPerPageSelectOptions(): array
    {
        return [10, 25, 50, 100];
    }

    public function render(): View
    {
        return view('livewire.table');
    }
}
Chrysippus
ChrysippusOP•2y ago
i haven't run this yet though, maybe its coz of this, i'll try later, ill push this first and rest. 
npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
awcodes
awcodes•2y ago
if you're using the admin panel you're making this a lot more difficult that it needs to be. https://filamentphp.com/docs/2.x/admin/resources/custom-pages
Filament
Custom pages - Resources - Admin Panel - Filament
The elegant TALL stack admin panel for Laravel artisans.
Chrysippus
ChrysippusOP•2y ago
im confused, I asked earlier I thought im on the right track putting a table on my custom-page on admin-panel following the table builder docs....
awcodes
awcodes•2y ago
or https://filamentphp.com/docs/2.x/admin/pages/getting-started if it's not part of a resource
Filament
Getting started - Pages - Admin Panel - Filament
The elegant TALL stack admin panel for Laravel artisans.
awcodes
awcodes•2y ago
yea, but when you are using the admin panel you can just extend the Page class, which is the livewire component, and the view will have the <x-filament::page> blade component in it that will setup the 'shell', ie, navigation, scripts, styles, etc.
Chrysippus
ChrysippusOP•2y ago
ohh...
awcodes
awcodes•2y ago
then you can just add {{ $this->table }} to the blade view and add all your table traits and methods to the Class that is extending Page
Chrysippus
ChrysippusOP•2y ago
I wasted my entire night debugging then 😆
awcodes
awcodes•2y ago
sorry, didn't realize earlier that you were using the admin panel. It seemed like you were trying to do the standalone versions of the packages.
Chrysippus
ChrysippusOP•2y ago
thankyou for the headsup. could've been way easier. thanks again.
awcodes
awcodes•2y ago
Sorry for the lost time.
Chrysippus
ChrysippusOP•2y ago
no worries, part of learning ❤️
Chrysippus
ChrysippusOP•2y ago
it worked!! thank you all for the help ❤️ !!. gotta continue later 🤘
Kiran Timsina
Kiran Timsina•17mo ago
@awcodes @chrysippus2497 Awesome! I was looking for the same! But I'm receiving this error: Property [$table] not found on component: [app.filament.pages.flavor-report] Seems like I missed out some portion to initiliaze the table.
Vp
Vp•17mo ago
Kiran Timsina
Kiran Timsina•17mo ago
@.valpuia I am using a page that I craeted using artisan make:filament-page. Do I need all those methods listed there?
Vp
Vp•17mo ago
Kiran Timsina
Kiran Timsina•17mo ago
@.valpuia Thank's a tons. This might be exactly what I might be looking for. Trying it right away
Vp
Vp•17mo ago
Wc, but I think you need to refer the first link.. check both, one of them will answer your problem
Kiran Timsina
Kiran Timsina•17mo ago
@.valpuia Widget works but it shows up in the main dashboard, and not a different page. So now I need to load this widget into a page?
Vp
Vp•17mo ago
you can put inside particular resource to avoid showing in dashboard, but like I said, you need to refer the first link (Table)
Kiran Timsina
Kiran Timsina•17mo ago
This is exactly what I'm looking to achieve. A different page where i can load one or two reports. And I will have a tons of these for reports.
Vp
Vp•17mo ago
ok, How i did was I create one resource (simple) then I change the view using protected static string $view = 'filament.resources.new-page.index'; from ManageResourcePage.. and from this page, I called my widget (2-3) from getHeaderWidgets() and I display different table in one page.. hope this helps to achieve what you want
Kiran Timsina
Kiran Timsina•17mo ago
This looks intuitive! But resource needs to a have a model, right?
Vp
Vp•17mo ago
Yes.. can you create new post with your code, error etc and I'll check with you.. extending some other post which is marked "Resolved" is not great..
Chrysippus
ChrysippusOP•17mo ago
from your CustomPage that should be located at app/Filament/Pages/CustomPage u should implement the HasTable then from your resources/views/filament/pages there should be a blade-file that has a same name of your CustomPage (e.g custom-page.blade.php) you should call {{ $this->table }} inside filamenet::page tags then from your CustomPage u can modify what you want to do, like getTableQuery() getTableColumns() getTableFilters() etc.. don't forget to put use InteractsWithTable; inside your class
Kiran Timsina
Kiran Timsina•17mo ago
Thank YOu @chrysippus2497
Want results from more Discord servers?
Add your server