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']);
    }

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],
};

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],
};

Styling issue with table builder pagination

Similar Threads

Similar Threads

Similar Threads