Generate Dynamic Responsive Table

Generate Dynamic Responsive Table

Learn how to create dynamic table from a database query

With this movie we will show you how to create dynamic table from a database query, using Bootstrap 3 Dynamic Table Generator.

Step by Step

We will show you how to create dynamic table from a database query using bootstrap 3 dynamic table generator. First, let's create a server action file. And add a name for it (1). Then, right click steps (2). Open the database actions menu. And add a database connection (3).

Add a name, for your database connection (1). And then setup its options (2). Enter the database server properties and click the ok button, when you are done (3)

Then, right click the database connection step (1). And add a database query (2). Setup the query options (3).

Select and add the table to the selection list (1). then, select the table columns, which you need and add them to the selected columns list (2). Click OK, when you are done (3).

Save your action file and Open the HTML5 Data Bindings Panel. Then, create a new server action executor (1). Add a name for it (2). And select your server action file, from the dropdown. Click OK, when you are done (3).

Then, let's add the dynamic table, on our page. We inserted a Bootstrap 3 container, and we want to place the table, inside it (1). click inside the container and open the insert panel. Click the Bootstrap 3 Dynamic Table Generator icon (2).

And select your data source. Expand your server action executor (1). And under data, select your database query (2). Then click the OK button (3).

Select the horizontal layout. The vertical layout is only used, in detail region for displaying detailed data (1). Then, setup the table appearance options (2). Manage the table columns headers and their order. Click the OK button, when you are done (3).

Let's preview the results! You can see our responsive table displaying the dynamic data. That's how easy it is to create a dynamic, responsive table using bootstrap 3 dynamic table generator.

Extensions Covered

Comments

Be the first to write a comment

You must me logged in to write a comment.