How to customize the Bootstrap admin Data tables? (READ lists)
PHP CRUD Tutorial

The Bootstrap Admin Data Tables can be customized using their main PHP class and their TWIG template available in the admin folder.


Organization of the files relating to the admin data tables

When you create a Data Table from the CRUD Generator several files are generated:

/admin/class/crud/Table.php
The main PHP class
/admin/templates/table.html
The HTML TWIG template
/admin/crud-data/table-filter-data.json
The filters used to filter your records if any
/admin/crud-data/table-select-data.json
Select dropdowns configuration if any

where table is the table that you want to customize.

The two JSON files are used by the internal PHPCG engine to build your datalist filters or select data.
Consider them as private CORE files and don't modify them.

The files we are interested in here are the PHP Class and the TWIG HTML Template.

The Main PHP Class

The Main PHP Class performs the SQL query to your database and retrieves the records from your table.

It will also retrieve the records from the relational tables if they are to be displayed in your data table.

Fields and values are recorded as attributes of the object, in a loop that goes through your records:

if (!empty($this->records_count)) {
    while (!$db->endOfSeek()) {
        $row = $db->row();
        $this->pk[] = $row->$primary_key;
        $this->my_field[]= $row->my_field;
        // ...
    }
}

Each $row-> is the value which will be displayed in the Data table.

You can apply any function if you want to change them, for instance:

$this->my_field[]= strtolower($row->my_field); // to lowercase
if (!empty($row->my_field)) {
    $this->my_field[]= 'Yes';
} else {
    $this->my_field[]= 'No';
}

The TWIG HTML Template

The TWIG HTML Template retrives the values from the Main PHP Class and builds the HTML data table.

You can easily edit any template part, especially the table <th></th> and <td></td> elements.

Values with HTML code

It often happens that HTML content is stored, which will be edited for example with an RTE (TinyMce).

The TWIG template will by default display HTML tags, while you want to display HTML content.

To do this, we will modify the TWIG template and use the TWIG "raw" filter:

<td>{{ object.last_name[ loop.index0 ]|raw }}</td>

How to keep your changes if you rebuild your Data Tables?

After making changes in the administration files generated by PHPGC, if you regenerate your READ List, these changes will be overwritten.

Automatic Backup of the Admin files

To avoid data loss:

When you generate the admin panel files, the existing files are saved in the generator backup folder: /generator/backup-files/

File comparison tool

The generator comparison tool allows you to:

  • compare the saved versions with the new versions generated
  • merge the two available versions by selecting in the two left/right panes the code parts you want to keep.

Prerequisites

To customize the Bootstrap Admin Data Tables with PHPCG you must beforehand:

Back to the PHP CRUD Tutorials