Download the PHP package hello-sebastian/hello-bootstrap-table-bundle without Composer

HelloBootstrapTableBundle

This Bundle provides simple bootstrap-table configuration for your Doctrine Entities.

Used bootstrap-table version 1.18.3.

Inspired by SgDatatablesBundle and omines/datatables-bundle

Overview

1. Features
2. Installation
3. Your First Table
4. Columns
   1. TextColumn
   2. BooleanColumn
   3. DateTimeColumn
   4. HiddenColumn
   5. LinkColumn
   6. CountColumn
   7. ActionColumn
5. Filters
   1. TextFilter
   2. ChoiceFilter
   3. BooleanChoiceFilter
   4. CountFilter
6. Configuration
   1. Table Dataset Options
   2. Table Options
7. Common Use-Cases
   1. Custom Doctrine Queries
   2. Detail View
   3. Use Icons as action buttons
8. Contributing

Features

• Create bootstrap-tables in PHP
• Twig render function
• global filtering (server side)
• column based filtering (advanced search)
• column sorting (server side)
• Pagination (service side)
• different column types
• bootstrap-table extensions
  • sticky-header
  • export
  • page-jump-to
  • toolbar with advanced-search

Installation

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download this bundle:

Step 2: Enable the Bundle (without flex)

Then, enable the bundle by adding it to the list of registered bundles in the config/bundles.php file of your project:

Step 3: Assetic Configuration

Install the web assets

Add Assets into your base.html.twig

CSS:

JavaScript:

Your First Table

Step 1: Create a Table class

Step 2: In the Controller

Step 3: Add table in Template

The Twig function will render a table with all attributes configured.

Columns

TextColumn

Represents column with text. With formatter you can create complex columns.

Options from bootstrap-table

The following options were taken from bootstrap-table. For more information about the options, see the bootstrap-table documentation: https://bootstrap-table.com/docs/api/column-options/

Options from HelloBootstrapTable

The following options are not included in bootstrap-table. They were added separately.

Example

search Option:

BooleanColumn

Represents column with boolean values.

Options

All options of TextColumn.

advancedSearchType is set to checkbox by default.

filter is set to array(BooelanChoiceFilter::class, array()) by default.

And:

Example

DateTimeColumn

Represents column with DateType values.

Options

All Options of TextColumn

And:

Example

HiddenColumn

Represents column that are not visible in the table. Can used for data which are required for other columns.

Options

All Options of TextColumn.

searchable, sortable, visible and switchable are disabled by default.

Example

LinkColumn

Represents column with a link.

Options

All Options of TextColumn.

formatter is set to defaultLinkFormatter.

And:

Example

If the route parameters cannot be determined automatically based on the entity, user-defined routes can be created by overwriting data. Once data is overwritten, routeName and routeParams are no longer necessary to specify.

CountColumn

Represents column for counting OneToMany relations (for ArrayCollection attributes).

Only works with direct attributes so far. For example, "users" would work in a DepartmentTable, but "users.items" would not.

Options

All Options of TextColumn.

filter is set to array(CountFilter::class, array()) by default.

Example

ActionColumn

Represents column for action buttons (show / edit / remove ...).

Options

All Options of TextColumn

sortable, searchable and switchable are disable by default.

formatter is set to defaultActionFormatter.

And:

Example

ActionButtons

YAML Example

YAML config options are set to all buttons. If you want override global options from YAML config use classNames option.

Filters

Filters can be used to generate predefined queries. In addition, different input fields for the filters are displayed (currently only under the Advanced Search).

TextFilter

With the TextFilter you can filter by text within the column. TextFilter is set by default to all columns.

Options

If you want to change advSearchFieldFormatter, you also need to create a JavaScript function with the same name in the window scope. As an example here is the default function:

Example

ChoiceFilter

With the ChoiceFilter you can create a select input field.

Options

All Options from TextFilter.

And:

Example

BooleanChoiceFilter

BooleanChoiceFilter is a special ChoiceFilter with default choices and query expression. The expression is optimized for boolean values.

Options

All Options from ChoiceFilter.

If you use BooleanChoiceFilter inside a BooleanColumn, the allLabel, trueLabel and falseLabel options from BooleanColumn are taken for null, true and false for the choices option by default.

If not choices is set to:

Example

CountFilter

With the CountFilter you can filtering and sorting by counting OneToMany relations.

Options

All Options from TextFilter.

And:

Example

Configuration

Table Dataset Options

Table Dataset are provided directly to the bootstrap-table as data-attributes and are a collection of setting options for the table. For more information check bootstrap-table documentation: https://bootstrap-table.com/docs/api/table-options/

Options

icons:

export-options:

Examples

Inside from Table class:

Outside from Table class:

YAML config:

YAML config options are set to all tables. If you want override global options from YAML config use setTableDataset method in or outside from HelloBootstrapTable.

Table Options

All options that should not be provided directly as data-attributes of the table are managed here.

Options

Examples

Inside from Table class:

Outside from Table class:

YAML config:

YAML config options are set to all tables. If you want override global options from YAML config use setTableDataset method in or outside from HelloBootstrapTable.

Common Use-Cases

Custom Doctrine Queries

Sometimes you don't want to display all the data in a database table. For this you can "prefilter" the Doctrine query.

Example

Default table sorting

bootstrap-table allows you to specify a default sort order. For this purpose there are two options "sort-name" and "sort-order". These can be set by the setTableDataset method. "sort-name" expects the dql (or if set field name) of the column. "sort-order" can be set by "asc" or "desc".

HelloBootstrapTable provides a helper method setDefaultSorting to set the default sort order.

Detail View

You can expand rows in bootstrap-table. This option is called "detail view" and can be enabled in the datasets (by default this is disabled). For displaying the content of detail-view a formatter is needed (also to be specified in datasets). In the formatter you have access to the data of the table row. For complex representations Twig can also be used. See the example below.

To display detailView as content of the expanded table row a formatter function must be created and detailView must be returned. Remember to create the formatter before calling {{ hello_bootstrap_table_js() }}.

Alternative you can of course create your HTML with JavaScript inside the formatter.

Use Icons as action buttons

To save space in the table, it makes sense to use icons instead of written out buttons. This is easily possible by using HTML instead of a word in the displayName option of the action buttons.

Contributing

Contributions are welcome and will be credited.