Filament•2w ago

Styling issue with table builder pagination

I'm encountering an issue with the styling of the pagination in my table builder. Currently, the pagination is appearing on the left side, which is not the intended behavior. I'm expecting the pagination to be displayed on the right side with the correct styling. Would anyone be able to help me troubleshoot this styling issue? I've tried some things but haven't been able to resolve it. Table:

public function table(Table $table): Table
    {
        return $table
            ->query(Contact::query()->where('repository_id', $this->repository->id))
            ->recordUrl(fn (Contact $record) => route('repositories.contacts.show', [$this->repository, $record]))
            ->columns([
                TextColumn::make('name')
                    ->label(__('Name'))
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email')
                    ->label(__('Email'))
                    ->searchable()
                    ->sortable(),
            ])
            ->emptyStateHeading(__('No Contact'))
            ->emptyStateDescription(__('Here are all Contacts at the end.'))
            ->defaultSort('name')
            ->paginated([10, 25, 50, 100, 'all']);
    }

public function table(Table $table): Table
    {
        return $table
            ->query(Contact::query()->where('repository_id', $this->repository->id))
            ->recordUrl(fn (Contact $record) => route('repositories.contacts.show', [$this->repository, $record]))
            ->columns([
                TextColumn::make('name')
                    ->label(__('Name'))
                    ->searchable()
                    ->sortable(),
                TextColumn::make('email')
                    ->label(__('Email'))
                    ->searchable()
                    ->sortable(),
            ])
            ->emptyStateHeading(__('No Contact'))
            ->emptyStateDescription(__('Here are all Contacts at the end.'))
            ->defaultSort('name')
            ->paginated([10, 25, 50, 100, 'all']);
    }

tailwind.config.js:

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.js',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/livewire/flux-pro/stubs/**/*.blade.php',
        './vendor/livewire/flux/stubs/**/*.blade.php',
    ],

    darkMode: 'selector',

    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#ebf8ff',
                    100: '#ceedff',
                    200: '#9adcfb',
                    300: '#6bbdfd',
                    400: '#399bff',
                    500: '#1e7fff',
                    600: '#0066d4',
                    700: '#0049a3',
                    800: '#00347a',
                    900: '#00275f',
                    950: '#00173e',
                },
            },
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.js',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/livewire/flux-pro/stubs/**/*.blade.php',
        './vendor/livewire/flux/stubs/**/*.blade.php',
    ],

    darkMode: 'selector',

    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#ebf8ff',
                    100: '#ceedff',
                    200: '#9adcfb',
                    300: '#6bbdfd',
                    400: '#399bff',
                    500: '#1e7fff',
                    600: '#0066d4',
                    700: '#0049a3',
                    800: '#00347a',
                    900: '#00275f',
                    950: '#00173e',
                },
            },
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

1 Reply

Takashi•2w ago

screenshor is unclear. so i can't see what issue is occurred I think you can solve that problem with adding "->paginatedContainerClasses('flex justify-end');" to last

Gaming

Programming

Styling issue with table builder pagination