table layout styling

So whenever I implement layout functionality such as Split or stack. The entire table just keels over.

            ->columns([
                Tables\Columns\TextColumn::make('id')
                    ->label('ID')
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->searchable(),
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\TextColumn::make('name')
                        ->searchable(),
                    Tables\Columns\TextColumn::make('username')
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->searchable(),
                ]),
                Tables\Columns\TextColumn::make('email')
                    ->searchable(),
                Tables\Columns\TextColumn::make('email_verified_at')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('status')
                    ->badge(),
                Tables\Columns\TextColumn::make('roles')
                    ->formatStateUsing(function ($record) {
                        return $record->roles->pluck('name')->join(', ');
                    })
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('dt_last_logged_in')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])

            ->columns([
                Tables\Columns\TextColumn::make('id')
                    ->label('ID')
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->searchable(),
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\TextColumn::make('name')
                        ->searchable(),
                    Tables\Columns\TextColumn::make('username')
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->searchable(),
                ]),
                Tables\Columns\TextColumn::make('email')
                    ->searchable(),
                Tables\Columns\TextColumn::make('email_verified_at')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('status')
                    ->badge(),
                Tables\Columns\TextColumn::make('roles')
                    ->formatStateUsing(function ($record) {
                        return $record->roles->pluck('name')->join(', ');
                    })
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('dt_last_logged_in')
                    ->dateTime()
                    ->toggleable(isToggledHiddenByDefault: true)
                    ->sortable(),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])

Example

2 Replies

Jamie CeeOP•3d ago

It should only stack the name and username fields? Also all toggleable columns dont seem to have its functionality when using Stack, Split etc

Jamie CeeOP•3d ago

Another example, where it's just all over and messy

            ->columns([
                Tables\Columns\Layout\Split::make([
                    Tables\Columns\Layout\Stack::make([
                        Tables\Columns\TextColumn::make('name')
                            ->icon('heroicon-o-identification')
                            ->searchable(),
                        Tables\Columns\TextColumn::make('email')
                            ->icon('heroicon-o-envelope')
                            ->searchable(),
                    ]),

                    Tables\Columns\TextColumn::make('status')
                        ->badge(),
                    Tables\Columns\TextColumn::make('roles')
                        ->formatStateUsing(function ($record) {
                            return $record->roles->pluck('name')->join(', ');
                        })
                        ->toggleable(isToggledHiddenByDefault: true),
                    Tables\Columns\TextColumn::make('dt_last_logged_in')
                        ->dateTime()
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->sortable(),
                ])->from('md'),

            ])

            ->columns([
                Tables\Columns\Layout\Split::make([
                    Tables\Columns\Layout\Stack::make([
                        Tables\Columns\TextColumn::make('name')
                            ->icon('heroicon-o-identification')
                            ->searchable(),
                        Tables\Columns\TextColumn::make('email')
                            ->icon('heroicon-o-envelope')
                            ->searchable(),
                    ]),

                    Tables\Columns\TextColumn::make('status')
                        ->badge(),
                    Tables\Columns\TextColumn::make('roles')
                        ->formatStateUsing(function ($record) {
                            return $record->roles->pluck('name')->join(', ');
                        })
                        ->toggleable(isToggledHiddenByDefault: true),
                    Tables\Columns\TextColumn::make('dt_last_logged_in')
                        ->dateTime()
                        ->toggleable(isToggledHiddenByDefault: true)
                        ->sortable(),
                ])->from('md'),

            ])

Nothing is aligned

Gaming

Programming

table layout styling