Laravel-admin: How could I set width of column in grid?

Created on 4 Apr 2017  ·  6Comments  ·  Source: z-song/laravel-admin

We can use $grid->xxx() or

$gid->actions( function($actions) {
// blahblah
});

to set up a column in grid.
If I want to assign the fixed width to the column, what should I do?

Thank you.

Most helpful comment

In lastest dev version:

$grid->created_at()->setAttributes(['width' => ' 300px']);

All 6 comments

Please try to read the link below. You can find the solution. GOOD LUCK:
@Extend the column

@windyson2008 with extending column you can change only content of column (inside ), but what to change column width? I have similiar question...

what is wrong? (file App/Admin/Routes.php)

The last route is always executed (2 route in the example), The first one is ignored.

I want to show specific controllers for each function

someone can help me?

I use version 1.4

`
use Illuminate\Routing\Router;

Admin::registerHelpersRoutes();

Route::group([
'prefix' => config('admin.prefix'),
'namespace' => Admin::controllerNamespace(),
'middleware' => ['web', 'admin'],
], function (Router $router) {

$router->group(['before' => 'auth'], function($router) {
    $router->resource('/', HomeController::class);
});

//1 route - Permission for suppliers
$router->group([
    'middleware' => 'admin.permission:allow,supplier',
        ], function ($router) {
    $router->resource('/', DeliveryController::class);
    $router->resource('deliveries', DeliveryController::class);
});


//2 route - Permission for accounting
$router->group([
    'middleware' => 'admin.permission:deny,accounting',
        ], function ($router) {
    $router->resource('/', Admin\DeliveryController::class);
    $router->resource('deliveries', Admin\DeliveryController::class);
    $router->resource('dashboard', Admin\DeliveryController::class);
});

});
`

@qcol
Because AdminLTE has no css for grid. You have to define it by yourself.

Here is a simply sample:

Step1: add a $width property into Admin\Grid\Column.php and generate a getter\setter for it.

    protected $width = '1em';

    /**
     * @return string
     */
    public function getWidth()
    {
        return $this -> width;
    }

    /**
     * @param string $width
     */
    public function setWidth($width)
    {
        $this -> width = $width;
        return $this;
    }

Step2: add a funtion into Admin\Grid.php for getting a use-width-feature flg

    public function renderColumnGroupOrNot()
    {
        return $this->option('useWidth');
    }

Step3: in your contorller

    protected function grid()
    {
        ...
        $grid -> option('useWidth', true);
        $grid -> id('id')->setWidth('10em') -> sortable();
        ...
    }

Step4: in your table.blade.php

 <table class="table table-hover">
           ↓↓↓ render colgroup start
            @if($grid->renderColumnGroupOrNot())
            @foreach($grid->columns() as $column)
                <colgroup style="width: {{$column->getWidth()}}"></colgroup>
            @endforeach
            @endif
           ↑↑↑ render colgroup end
            <tr>
                @foreach($grid->columns() as $column)
                <th>{{$column->getLabel()}}{!! $column->sorter() !!}</th>
                @endforeach
            </tr>

            @foreach($grid->rows() as $row)
            <tr {!! $row->getHtmlAttributes() !!}>
                @foreach($grid->columnNames as $name)
                <td>{!! $row->column($name) !!}</td>
                @endforeach
            </tr>
            @endforeach
        </table>

In lastest dev version:

$grid->created_at()->setAttributes(['width' => ' 300px']);

1.4.2这些方法setAttributes,style不在Column.php中。可如下解决:

$grid->user()->name('用户')->display(function ($val) { return '<div style="width: 200px;">' . $val . '</div>'; });
生成的html略显丑陋。
还有个方法叫value。功能是一样的。

Was this page helpful?
0 / 5 - 0 ratings

Related issues

abufalbo picture abufalbo  ·  3Comments

vlongen picture vlongen  ·  3Comments

clock1129 picture clock1129  ·  3Comments

chenyongmin picture chenyongmin  ·  3Comments

zhenyangze picture zhenyangze  ·  3Comments