One moment, we're cooking some code examples
With DataStack you can easily stack your data in an interactive table.
DataStack is a powerful built-in plugin designed to create dynamic and interactive tables with ease. It transforms how you handle and present data on your web applications by offering a range of features that ensure your tables are dynamic and responsive components.
The example below gives you a basic visual representation of how to use DataStack. You can search, sort and navigate through all results.
Before setting up a new DataStack you'll neet to configure the endpoints so the plugin knows wher to find the data. Once you've got your endpoints you're ready to configure the plugin
This is done by defining 2 methods in your class, a YourClass::GenerateYourTableHTML method and a YourClass::ListValues
This call wil setup your table. Use the following basic setup before calling your function. you can configue yours custom settings using the request array.
In your request array you must define the function call and element ID. All other values are optional
| $aRequest | |||
|---|---|---|---|
| Variable | Type | Required | Example / Description |
| sElementID | String | Yes | Define an unique ID for DataStack to use it’s bindings |
| sFunctionCall | String | Yes | Define function here to be called by DataStack, EX: YourClass::ListValues |
| sSearchPhrase | String | No | Default search phrase |
| iMinSearchLength | Int | No | Minimum length of search phrase |
| iMaxResults | Int | No | Number of results shown (10, 25, 50, 100, 250) |
| iCurrentPage | Int | No | The current page to display |
| sSortingKey | String | No | Default sorting key |
| sSortingMethod | String | No | "ASC" or "DESC" |
| bTriggerPageMode | Boolean | No | "True" or "False", sets page-mode in StackBox |
Now that we've configured the initial call, let's have a look inside the initial function.
As you can see, the$aData array needs to be prepared before continuing. this process is fully automated and wil prepare your $aData array with all the values it needs.
DataStack also gives you the total results found so you can directly customize the total results message. Use the value of the int $iTotalResults to setup the string $sTotalResults. This string is shown on the right above the search results.
After we've prepared our data, then it's time to setup our table configuration, these are defined in the $aRequest array. You can check the "HTMLTable" documentation for additional options.
| aHeadings | |||
|---|---|---|---|
| Variable | Type | Required | Example / Description |
| sTitle | String | Yes | Text displayed on column |
| sKey | String | Yes | Define which value to use from array to display |
To enable edit & delete, a heading item with sKey sTableRowOptions is required
| aOptions | |||
|---|---|---|---|
| Variable | Type | Required | Example / Description |
| sOptionsTitle | String | Yes | Mouseover text for option button |
| sOptionIcon | String | Yes | font awesome icon (ex: fa-pencil) |
| iOptionLinkTypeID | Int | Yes | 0 = Default, 1 = Overlayer |
| aSettings | |||
|---|---|---|---|
| Variable | Type | Required | Example / Description |
| bShowSearchOption | Boolean | Yes | Enable / Disable search bar |
| bShowSortingOptions | Boolean | Yes | Enable / Disable sorting buttons when defined in aHeadings |
| bShowNavigation | Boolean | Yes | Enable / Disable pagination buttons |
| iMaxResults | Int | Yes | Define the pagination limit |
| iTotalResults | Int | Yes | Define total amount of results for pagination |
| sTotalResults | String | Yes | Define total amount of results visually for pagination |
| $aRequest | |||
|---|---|---|---|
| Variable | Type | Required | Example / Description |
| sElementID | String | Yes | Define an unique ID for DataStack to use it’s bindings |
| aRequest | Array | Yes | Original data request |
| aValues | Array | Yes | The values you wish to display within the table |
| aOptions | Array | No | Options for row items |
| aHeadings | Array | Yes | Which columns to display |
| aSettings | Array | Yes | Mostly display options |
This call wil submit a request to the API and wil fetch all the data you need.
The function is called automatically from the DataStack::Prepare() function and wil give you a raw respone from the API in an array called $aResponse
To have more control over the outcome you can enrich your data. With some simple checks you can prepare the data for output.
--data options description--
--description--
--description--
--description--
--description--
--description--
| aOptions | |||
|---|---|---|---|
| aSweetAlert | Array | No | * no documentation yet, see html.table.class.php:389 HTMLTable::GenerateOptions * |
| aHeadings | |||
|---|---|---|---|
| sHeadingClass | String | No | css class to be used for the heading |
| sColumnClass | String | No | css class to be used for the column |
| sWidth | String | No | Define width of column in user defined units (ex: 200px or 10vw) |
--description--
--description--
Advanced functionality
To be able to use Sorting, Searching and Pagination, there are a few fields more required
First, to enable column sorting, you must add the bSortable in combination with sSortingKey this wil work fine if you use DTO's (propel) to generate the listing code. But if you use plain query's, you also need to define dbTable and dbColumn. Sorting wil default to sorting by ID Ascending
| aHeadings | |||
|---|---|---|---|
| bSortable | Boolean | No | True or False, must be combined with: sSortingKey, dbTable & dbColumn |
| sSortingKey | String | No | Field to use sorting on, must be combined with: bSortable, dbTable & dbColumn |
| dbTable | String | No | SQL Table to sort on, must be combined with: bSortable, sSortingKey & dbColumn |
| dbColumn | String | No | SQL Column to sort on, must be combined with: bSortable, sSortingKey & dbTable |
| sSortingMethod | String | No | ASC or DESC, can be combined with: bSortable, sSortingKey, dbTable & dbColumn |