DatePicker filter not shown. FlatPicker not loading?

[rtaylor82]

After upgrading to 4.3.2 the DatePicker filter does not show. All other filters work.

How do I troubleshoot FlatPicker not loading? There are no errors in the console...

[rtaylor82]

Completely re-installed package. No custom views and still no errors on console. Just does not load or even try to load flatpickr;

Worth noting, if I leave off the import './../../vendor/power-components/livewire-powergrid/dist/powergrid.css'; line in app.js then the export button shows. If I include it, then the export button disappears...

[luanfreitasdev]

Hello. Can you tell if there is a column (addColumns) called 'transaction_date_formatted'?

[rtaylor82]

Yes there is... here is the whole file:

namespace App\Http\Livewire;

use App\Models\Company;
use App\Models\Transaction;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Carbon;
use NumberFormatter;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Filters\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridEloquent;
use PowerComponents\LivewirePowerGrid\Rules\Rule;
use PowerComponents\LivewirePowerGrid\Rules\RuleActions;
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;

final class TransactionsTable extends PowerGridComponent
{
    use ActionButton, WithExport;

    public int $companyId;

    /*
    |--------------------------------------------------------------------------
    |  Features Setup
    |--------------------------------------------------------------------------
    | Setup Table's general features
    |
    */
    public function setUp(): array
    {
        $this->showCheckBox();

        return [
            Exportable::make('export')
                ->striped()
                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
            Header::make()->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */

    /**
     * PowerGrid datasource.
     *
     * @return Builder<\App\Models\Transaction>
     */
    public function datasource(): Builder
    {
        $company = Company::find($this->companyId);
        if (! $company) {
            abort(403);
        }
        //find company
        return Transaction::query()->join('companies', 'transactions.account_number', '=', 'companies.processor_id')
            ->select('transactions.*')
            ->where('transactions.account_number', '=', $company->processor_id)
            ->where('transactions.transaction_description', '=', '+CC');
    }

    /*
    |--------------------------------------------------------------------------
    |  Relationship Search
    |--------------------------------------------------------------------------
    | Configure here relationships to be used by the Search and Table Filters.
    |
    */

    /**
     * Relationship search.
     *
     * @return array<string, array<int, string>>
     */
    public function relationSearch(): array
    {
        return [];
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    | ❗ IMPORTANT: When using closures, you must escape any value coming from
    |    the database using the `e()` Laravel Helper function.
    |
    */
    public function addColumns(): PowerGridEloquent
    {
        $moneyFormatter = new NumberFormatter('en_US', NumberFormatter::CURRENCY);

        return PowerGrid::eloquent()
            ->addColumn('id')
            ->addColumn('account_number')
            ->addColumn('transaction_date')
            ->addColumn('transaction_date_formatted', fn (Transaction $model) => Carbon::parse(e($model->transaction_date))->format('m/d/Y'))
            ->addColumn('fund_date')
            ->addColumn('fund_date_formatted', fn (Transaction $model) => Carbon::parse(e($model->fund_date))->format('m/d/Y'))
            ->addColumn('gross_amount')
            ->addColumn('gross_amount_formatted', fn (Transaction $model) => $moneyFormatter->formatCurrency(e($model->gross_amount), 'USD'))
            ->addColumn('discount_fee')
            ->addColumn('discount_fee_formatted', fn (Transaction $model) => $moneyFormatter->formatCurrency(e($model->discount_fee), 'USD'))
            ->addColumn('per_trans_fee')
            ->addColumn('per_trans_fee_formatted', fn (Transaction $model) => $moneyFormatter->formatCurrency(e($model->per_trans_fee), 'USD'))
            ->addColumn('net_amount')
            ->addColumn('net_amount_formatted', fn (Transaction $model) => $moneyFormatter->formatCurrency(e($model->net_amount), 'USD'))
            ->addColumn('first_name')
            ->addColumn('last_name')
            ->addColumn('email');
//            ->addColumn('name')
//            ->addColumn('name_lower', fn (Transaction $model) => strtolower(e($model->name)))
//            ->addColumn('created_at')
//            ->addColumn('created_at_formatted', fn (Transaction $model) => Carbon::parse($model->created_at)->format('d/m/Y H:i:s'));
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |
    */

    /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [
            Column::make('Trans Date', 'transaction_date_formatted', 'transaction_date')
                ->sortable(),

            Column::make('Fund Date', 'fund_date_formatted', 'fund_date')
                ->sortable(),

            Column::make('Gross', 'gross_amount_formatted', 'gross_amount')
                ->searchable()
                ->sortable(),

            Column::make('Disc Fee', 'discount_fee_formatted', 'discount_fee')
                ->sortable(),

            Column::make('Trans Fee', 'per_trans_fee_formatted', 'per_trans_fee')
                ->sortable(),

            Column::make('Net Amount', 'net_amount_formatted', 'net_amount')
                ->sortable(),
        ];
    }

    public function filters(): array
    {
        return [
            Filter::datepicker('transaction_date_formatted', 'transaction_date'),
//            Filter::datepicker('fund_date_formatted', 'fund_date'),
        ];
    }
}