$ composer require hello-sebastian/hello-bootstrap-table-bundle

// config/bundles.php

return [
    // ...
    HelloSebastian\HelloBootstrapTableBundle\HelloBootstrapTableBundle::class => ['all' => true],
];

# if possible, make absolute symlinks (best practice) in public/ if not, make a hard copy

$ php bin/console assets:install --symlink

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


{{ hello_bootstrap_table_css() }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>


{{ hello_bootstrap_table_js() }}

add('username', TextColumn::class) ->add('email', TextColumn::class, array( 'title' => 'E-Mail', 'visible' => false )) ->add('firstName', TextColumn::class, array( 'title' => 'First name' )) ->add('lastName', TextColumn::class, array( 'title' => 'Last name' )) ->add('createdAt', DateTimeColumn::class, array( 'title' => 'Created at' )) ->add('department.name', TextColumn::class, array( 'title' => 'Department', 'emptyData' => 'No Department', 'addIf' => function() { // In this callback it is decided if the column will be rendered. return $this->security->isGranted('ROLE_DEPARTMENT_VIEWER'); } )) ->add("isActive", BooleanColumn::class, array( 'title' => 'is active', 'trueLabel' => 'yes', 'falseLabel' => 'no' )) ->add('department.costCentre.name', TextColumn::class, array( 'title' => 'Cost Centre', 'data' => function (User $user) { return "#" . $user->getDepartment()->getCostCentre()->getName(); } )) ->add("actions", ActionColumn::class, array( 'title' => 'Actions', 'width' => 150, 'buttons' => array( //see ActionButton for more examples. array( 'displayName' => 'open', 'routeName' => 'show_user', 'classNames' => 'btn btn-xs' 'additionalClassNames' => 'btn-success mr-1' ), array( 'displayName' => 'edit', 'routeName' => 'edit_user', 'classNames' => 'btn btn-xs btn-warning', 'addIf' => function(User $user) { // In this callback it is decided if the button will be rendered. return $this->security->isGranted('ROLE_USER_EDITOR'); } ) ) )); } protected function getEntityClass() { return User::class; } }">

// src/HelloTable/UserTable.php



namespace App\HelloTable;

use App\Entity\User; // your entity class ...
use HelloSebastian\HelloBootstrapTableBundle\Columns\ColumnBuilder;
use HelloSebastian\HelloBootstrapTableBundle\Columns\TextColumn;
use HelloSebastian\HelloBootstrapTableBundle\Columns\DateTimeColumn;
use HelloSebastian\HelloBootstrapTableBundle\Columns\HiddenColumn;
use HelloSebastian\HelloBootstrapTableBundle\Columns\ActionColumn;
use HelloSebastian\HelloBootstrapTableBundle\Columns\BooleanColumn;
use HelloSebastian\HelloBootstrapTableBundle\HelloBootstrapTable;

class UserTable extends HelloBootstrapTable
{
  
    protected function buildColumns(ColumnBuilder $builder, $options)
    {
        $builder
            ->add("id", HiddenColumn::class)
            ->add('username', TextColumn::class)
            ->add('email', TextColumn::class, array(
                'title' => 'E-Mail',
                'visible' => false
            ))
            ->add('firstName', TextColumn::class, array(
                'title' => 'First name'
            ))
            ->add('lastName', TextColumn::class, array(
                'title' => 'Last name'
            ))
            ->add('createdAt', DateTimeColumn::class, array(
                'title' => 'Created at'
            ))
            ->add('department.name', TextColumn::class, array(
                'title' => 'Department',
                'emptyData' => 'No Department',
                'addIf' => function() {
                    // In this callback it is decided if the column will be rendered.
                    return $this->security->isGranted('ROLE_DEPARTMENT_VIEWER');
                }
            ))
            ->add("isActive", BooleanColumn::class, array(
                'title' => 'is active',
                'trueLabel' => 'yes',
                'falseLabel' => 'no'
            ))
            ->add('department.costCentre.name', TextColumn::class, array(
                'title' => 'Cost Centre',
                'data' => function (User $user) {
                    return "#" . $user->getDepartment()->getCostCentre()->getName();
                }
            ))
            ->add("actions", ActionColumn::class, array(
                'title' => 'Actions',
                'width' => 150,
                'buttons' => array( //see ActionButton for more examples.
                    array(
                        'displayName' => 'open',
                        'routeName' => 'show_user',
                        'classNames' => 'btn btn-xs' 
                        'additionalClassNames' => 'btn-success mr-1'
                    ),
                    array(
                        'displayName' => 'edit',
                        'routeName' => 'edit_user',
                        'classNames' => 'btn btn-xs btn-warning',
                        'addIf' => function(User $user) {
                            // In this callback it is decided if the button will be rendered.
                            return $this->security->isGranted('ROLE_USER_EDITOR');
                        }
                    )
                )
            ));
    }

    protected function getEntityClass()
    {
        return User::class;
    }
}

create(UserTable::class); $table->handleRequest($request); if ($table->isCallback()) { return $table->getResponse(); } return $this->render('index.html.twig', array( 'table' => $table->createView() )); }">

// src/Controller/UserController.php

use HelloSebastian\HelloBootstrapTableBundle\HelloBootstrapTableFactory;
use App\HelloTable\UserTable;
// ...

/**
 * @Route("/", name="default")
 */
public function index(Request $request, HelloBootstrapTableFactory $tableFactory) : Response
{
    $table = $tableFactory->create(UserTable::class);

    $table->handleRequest($request);
    if ($table->isCallback()) {
        return $table->getResponse();
    }

    return $this->render('index.html.twig', array(
        'table' => $table->createView()
    ));
}

{# index.html.twig #}

{% extends 'base.html.twig' %}

{% block body %}
    {{ hello_bootstrap_table_render(table) }}
{% endblock %}

function (User $user) { //entity from getEntityClass //you can return what ever you want ... return $user->getId() . " " . $user->getUsername(); }, 'sort' => function (QueryBuilder $qb, $direction) { //execute if user sort this column $qb->addOrderBy('username', $direction); }, 'search' => function (Composite $composite, QueryBuilder $qb, $search) { //first add condition to $composite //don't forget the ':' before the parameter for binding $composite->add($qb->expr()->like($dql, ':username')); //then bind search to query $qb->setParameter("username", $search . '%'); } ))">

//use statements for search and sort option
use Doctrine\ORM\Query\Expr\Composite;
use Doctrine\ORM\QueryBuilder;

->add('username', TextColumn::class, array(
  'title' => 'Username',
  'emptyData' => "No Username found.",
  
  //optional overrides ...
  'data' => function (User $user) { //entity from getEntityClass
      //you can return what ever you want ...  
      return $user->getId() . " " . $user->getUsername();
  },

  'sort' => function (QueryBuilder $qb, $direction) { //execute if user sort this column
      $qb->addOrderBy('username', $direction);
  },

  'search' => function (Composite $composite, QueryBuilder $qb, $search) {
    	//first add condition to $composite
      //don't forget the ':' before the parameter for binding
      $composite->add($qb->expr()->like($dql, ':username'));
    
    	//then bind search to query
      $qb->setParameter("username", $search . '%');
  }
))

use HelloSebastian\HelloBootstrapTableBundle\Columns\BooleanColumn;

->add('isActive', BooleanColumn::class, array(
    'title' => 'is active',
    'trueLabel' => 'yes',
    'falseLabel' => 'no'
))

use HelloSebastian\HelloBootstrapTableBundle\Columns\DateTimeColumn;

->add('createdAt', DateTimeColumn::class, array(
    'title' => 'Created at',
    'format' => 'd.m.Y'
))

use HelloSebastian\HelloBootstrapTableBundle\Columns\HiddenColumn;

->add("id", HiddenColumn::class)

use HelloSebastian\HelloBootstrapTableBundle\Columns\LinkColumn;

->add('department.name', LinkColumn::class, array(
    'title' => 'Department',
    'routeName' => 'show_department', // this option is required
    'routeParams' => array(
        'id' => 'department.id' // "id" is the route parameter of "show_department". "department.id" is the property path to fetch the value for the route parameter.
    )
))

use HelloSebastian\HelloBootstrapTableBundle\Columns\LinkColumn;

->add('department.name', LinkColumn::class, array(
    'title' => 'Department',
    'data' => function (User $user) {
        return array(
            'displayName' => $user->getDepartment()->getName(),
            'route' => $this->router->generate('show_department', array('some_parameter' => 'Hello'),
            'attr' => ''
        );
    }
))

add('users', CountColumn::class, array( 'title' => 'Users' ))">

// App\Entity\Department.php

/**
 * @var ArrayCollection|User[]
 * @ORM\OneToMany(targetEntity="App\Entity\User", mappedBy="department")
 */
private $users;


// App\HelloTable\UserTable.php
use HelloSebastian\HelloBootstrapTableBundle\Columns\CountColumn;

->add('users', CountColumn::class, array(
    'title' => 'Users'
))

'Actions', 'width' => 120, //optional 'buttons' => array( array( 'displayName' => 'show', 'routeName' => 'show_user', 'additionalClassNames' => 'btn-success', 'attr' => array( 'title' => 'Show', // any number of other attributes ) ), array( 'displayName' => 'edit', 'routeName' => 'edit_user', // 'classNames' => 'btn btn-xs' (see below for more information) 'additionalClassNames' => 'btn-warning', 'addIf' => function(User $user) { // you can use your entity in the function // In this callback it is decided if the button will be rendered. return $this->security->isGranted('ROLE_ADMIN'); } ) ) ))">

->add("actions", ActionColumn::class, array( // key "actions" can be chosen freely but must be unique in the table
    'title' => 'Actions',
    'width' => 120, //optional
    'buttons' => array(
        array(
            'displayName' => 'show',
            'routeName' => 'show_user',
            'additionalClassNames' => 'btn-success',
            'attr' => array(
                'title' => 'Show',
                // any number of other attributes
            )
        ),
        array(
            'displayName' => 'edit',
            'routeName' => 'edit_user',
            // 'classNames' => 'btn btn-xs' (see below for more information)
            'additionalClassNames' => 'btn-warning',
            'addIf' => function(User $user) { // you can use your entity in the function
                // In this callback it is decided if the button will be rendered.
                return $this->security->isGranted('ROLE_ADMIN');
            }
       )
  	)
))

# config/packages/hello_table.yaml

hello_bootstrap_table:
    action_button_options:
        classNames: 'btn btn-xs'

//value can be undefined
window.defaultAdvSearchTextField = function (field, filterOptions, value) {
    let val = value || "";
    return `${val}" class="form-control" name="${field}" placeholder="${filterOptions.placeholder}" id="${field}">`;
};

use HelloSebastian\HelloBootstrapTableBundle\Filters\TextFilter;

->add('firstName', TextColumn::class, array(
    'title' => 'First name',
    'filter' => array(TextFilter::class, array(
        'placeholder' => 'Enter first name ...'
    ))
))

use HelloSebastian\HelloBootstrapTableBundle\Filters\ChoiceFilter;

->add('department.name', TextColumn::class, array(
    'title' => 'Department',
    'filter' => array(ChoiceFilter::class, array(
        'choices' => array(
            'null' => 'All', //null is special key word. If 'null' is set QueryBuilder skip this column.
            'IT' => 'IT',
            'Sales' => 'Sales'
        )
    ))
))

array( "null" => "All", // key must be "null", if you want allow to show all results "true" => "True", // key must be "true", if you want allow true "false" => "False" // key must be "false", if you want allow false )">

"choices" => array(
    "null" => "All",    // key must be "null", if you want allow to show all results
    "true" => "True",   // key must be "true", if you want allow true
    "false" => "False"  // key must be "false", if you want allow false
)

'is active', 'filter' => array(BooleanChoiceFilter::class, array( // only if you want to override the choices 'choices' => array( "null" => "Alle", // instead of "all" "true" => "Ja", // instead of "yes" "false" => "Nein" // instead of "no" ) )), 'trueLabel' => 'yes', 'falseLabel' => 'no' ))">

->add("isActive", BooleanColumn::class, array(
    'title' => 'is active',
  	'filter' => array(BooleanChoiceFilter::class, array( // only if you want to override the choices
        'choices' => array(
            "null" => "Alle",   // instead of "all"
            "true" => "Ja",     // instead of "yes"
            "false" => "Nein"   // instead of "no"
        )
    )),
    'trueLabel' => 'yes',
    'falseLabel' => 'no'
))

use HelloSebastian\HelloBootstrapTableBundle\Filters\CountFilter;

->add('users', CountColumn::class, array(
    'title' => 'Users',
    'filter' => array(CountFilter::class, array(
        'condition' => 'lte',
        'primaryKey' => 'uuid'
    ))
))

';' )">

array(
    'fileName' => (new \DateTime('now'))->format('Y-m-d_H-i-s') . '_export',
    'ignoreColumn' => array("checkbox", "actions"),
    'csvSeparator' => ';'
)

// src/HelloTable/UserTable.php

class UserTable extends HelloBootstrapTable
{
    ...
      
    protected function buildColumns(ColumnBuilder $builder, $options)
    {
        $this->setTableDataset(array(
            'locale' => 'de-DE'
        ));
      
      	// ... $builder->add()
    }
}

// src/Controller/UserController.php

public function index(Request $request, HelloBootstrapTableFactory $tableFactory) : Response
{
    $table = $tableFactory->create(UserTable::class);

    // other options will be merged.
    $table->setTableDataset(array(
        'locale' => 'de-DE'
    ));

    // ...
}

# config/packages/hello_table.yaml

hello_bootstrap_table:
    table_dataset_options:
        locale: 'de-DE' # see Table Dataset Options

// src/HelloTable/UserTable.php

class UserTable extends HelloBootstrapTable
{
    ...

    protected function buildColumns(ColumnBuilder $builder, $options)
    {
        $this->setTableOptions(array(
            'enableCheckbox' => false
        ));
      
      	// ... $builder->add()
    }
}

// src/Controller/UserController.php

public function index(Request $request, HelloBootstrapTableFactory $tableFactory) : Response
{
    $table = $tableFactory->create(UserTable::class);

    $table->setTableOptions(array(
        'enableCheckbox' => false
    ));

    // ...
}

# config/packages/hello_table.yaml

hello_bootstrap_table:
    table_options:
        enableCheckbox: false # see Table Options

create(TestTable::class); //then you can access the QueryBuilder from the table $table->getQueryBuilder() ->andWhere('department.name = :departmentName') ->setParameter('departmentName', 'IT'); $table->handleRequest($request); if ($table->isCallback()) { return $table->getResponse(); } return $this->render("index.html.twig", array( "table" => $table->createView() )); }">

/**
  * @Route("/", name="default")
  */
public function index(Request $request, HelloBootstrapTableFactory $tableFactory)
{
    //first create a instance of your table
    $table = $tableFactory->create(TestTable::class);

    //then you can access the QueryBuilder from the table
    $table->getQueryBuilder()
        ->andWhere('department.name = :departmentName')
        ->setParameter('departmentName', 'IT');

    $table->handleRequest($request);
    if ($table->isCallback()) {
      	return $table->getResponse();
    }

    return $this->render("index.html.twig", array(
      	"table" => $table->createView()
    ));
}

// inside table class
protected function buildColumns(ColumnBuilder $builder, $options)
{
    $this->setTableDataset(array(
        'sort-name' => 'firstName', // dql (or if set field name) of column
        'sort-order' => 'desc' // or asc
    ));

    $builder->add('firstName', TextColumn::class, array(
        'title' => 'First name'
    ));
}

// outside table class
$table = $tableFactory->create(UserTable::class);
$table->setTableDataset(array(
    'sort-name' => 'firstName',
    'sort-order' => 'desc'
));

add('firstName', TextColumn::class, array( 'title' => 'First name' )); } // outside table class $table = $tableFactory->create(UserTable::class); $table->setDefaultSorting("firstName", "desc"); ">

// inside table class
protected function buildColumns(ColumnBuilder $builder, $options)
{
    $this->setDefaultSorting("firstName", "desc");

    $builder->add('firstName', TextColumn::class, array(
        'title' => 'First name'
    ));
}

// outside table class
$table = $tableFactory->create(UserTable::class);
$table->setDefaultSorting("firstName", "desc");

 protected function buildColumns(ColumnBuilder $builder, $options)
 {
     //enable detail-view and set formatter
     $this->setTableDataset(array(
         'detail-view' => true,
         'detail-formatter' => 'detailViewFormatter'
     ));

     $builder
       // other columns ...
       
       // detailView is not a database field and can be named as you like.
       // but the column should not displayed in the table (HiddenColumn)
       ->add('detailView', HiddenColumn::class, array(
           // override data callback (as attribute you can access the entity that you specified in getEntityClass())
           'data' => function (User $user) {
              // now you can return everthing you want (twig render included)
              // twig is provided by HelloBootstrapTable
              return $this->twig->render('user/detail_view.html.twig', array(
                 'user' => $user
              ));
           }
       ));
}

// index   => index of row inside table
// row     => data object of the row
// element => row DOM element
window.detailViewFormatter = function (index, row, element) {
    // detailView matched with the name from add('detailView', HiddenColumn::class). If you use a different name you must changed it here too.
    return row.detailView;
};

'Actions', 'buttons' => array( array( 'displayName' => "", // <-- e.g. FontAwesome icon 'routeName' => 'show_user', 'additionalClassNames' => 'btn-success', ), // more buttons ... ) )); } }">

// src/HelloTable/UserTable.php

class UserTable extends HelloBootstrapTable
{
    // ...

    protected function buildColumns(ColumnBuilder $builder, $options)
    {
      	$builder
            // more columns ...
            ->add("actions", ActionColumn::class, array(
                'title' => 'Actions',
                'buttons' => array(
                    array(
                        'displayName' => "", // <-- e.g. FontAwesome icon
                        'routeName' => 'show_user',
                        'additionalClassNames' => 'btn-success',
                    ),
                    // more buttons ...
                )
            ));
    }
}