• Overview
• Properties
• Table Fields
  • Badge
  • Button
  • Icon
  • Image
  • Progress
  • Sparkline
• Searchable
• State persistent
• Traits

Table

Overview #

Table is the most basic and most used widget to represent data. The widget will need you to provide data source and list of fields that you want to show on table.

Example:

<?php

use \koolreport\dashboard\widgets\Table;
use \koolreport\dashboard\fields\Number;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class SaleTable extends Table 
{
    protected function dataSource()
    {
        return AutoMaker::table("sales")
                ->select("id","customerName","amount");
    }

    protected function fields()
    {
        return [
            Number::create("id"),
            Text::create("customerName"),
            Currency::create("amount")->USD()->symbol()
        ];
    }
}

Properties #

Note: Those above properties follows this code rules.

Example:

<?php

use \koolreport\dashboard\widgets\Table;

class SaleTable extends Table
{
    protected function onInit()
    {
        $this->tableHover(true)
            ->tableOutline(true)
            ->tableSmall(true)
            ->tableBordered(true)
            ->tableResponsive(true)
            ->headerDark(true)
            ->pageSize(10)
            ->pageIndex(2)
            ->pageAlign("right")
            ->showFooter(true)
            ->autoFields(true);
    }
}

Table Fields #

Beside the list of common fields that can be used with table. Below are special fields for Table only

Badge #

Example:

Badge::create("amount_status")
    ->text(function($value, $row){
        return $row["amount"]>1000?"Good":"Bad";
    })
    ->type(function($value, row){
        return $row["amount"]>1000?"success":"waring";
    })
    ->cssStyle("font-weight:bold;")

Button #

Settings #

Note: Those above properties follows this code rules.

Click Event #

onClick is client-side event when user clicks to button. The property can accept string or function.

Example:

//You can run any javascript function
Button::create()
    ->onClick(function($row){
        return "alert('".$row["customerName"]."')";
    })



use \koolreport\dashboard\Client;
//Button that will load UserDetail dashboard when click, it will transmit the user id as parameter.
Button::create()
    ->onClick(function($row){
        return Client::dashboard("UserDetail")->load(["userId"=>$row["userId"]]);
    })


//If you want to trigger action of any widget you can do:
Button::create()
    ->onClick(function($row){
        return Client::widget("table")->action("index",["userId"=>$row["userId"]]);
    })

Icon #

Note: Those above properties follows this code rules.

Example:

Icon::create()
    ->icon("fa fa-settings")
    ->type("secondary")
    ->cssStyle("font-size:16px")

//With function
Icon::create()
    ->icon(function($value, $row) {
        return "fab fa-cc-".$row["payment-method"]; // "fab fa-cc-visa" | "fab fa-cc-master"
    })

Image #

Note: Those above properties follows this code rules.

Example:

//Prefix url location to image file
Image::create("imageFile")
    ->prefix("https://www.example.com/images/")

Image::create("imageFile")
    ->formatUsing(function($imageFile){
        return "https://www.example.com/images/"+$imageFile;
    })

//Resolve url using other columns
Image::create()
    ->resolveUsing(function($originalValue, $row){
        return "https://www.example.com/images/".$row["folder"]."/".$row["date"]."jpg";
    });

//Make squared image and rounded conner
Image::create("imageUrl")
    ->squared("64px")
    ->rounded(true)

//Make circle image with thumbnail
Image::create("imageUrl")
    ->circle("64px")
    ->thumbnail(true)

Progress #

Note: Those above properties follows this code rules.

Example:

//Normally created
Progress::create("progress")
    ->type("success")
    ->cssStyle("margin-left:10px;")

//Customize type
Progress::create("progress")
    ->type(function($value){
        if($value>50) {
            return "success";
        }
        return "danger";
    })

// Use range to setup range, the progress show 
// red when value is smaller than 20, "warning" when value < 50 
// and "success" when value is greater than 80. 
Progress::create("progress")
    ->range([
        "danger"=>20,
        "warning"=>50,
        "success"=>80
    ])

Sparkline #

Note: Those above properties follows this code rules.

Example:

Sparkline::create("paymentHistory")
    ->colName("customerNumber")
    ->type("bar")
    ->dataSource(function(){
        return AutoMaker::table("payments")
                ->where("customerNumber",$this->value())
                ->select("amount");
    }),

Searchable #

To turn on the searchable feature of Table , you only need to set ->searchable(true) like following:

...
    protected function onCreated()
    {
        $this
        ->searchable(true)                  //Turn on searchable feature 
        ->searchWidth("200px")              //Set size of search box
        ->searchText(null)                  //Pre set the search text
        ->searchAlign("left")               //Search box will align left
        ->searchFields(["country","city"]); //List of fields that used to search.
    }
...

Alternatively to set list of fields to be searchable, you can mark those fields inside fields() like following:

...
    protected function fields()
    {
        return [
            Text::create("country")
                ->searchable(true),

            Text::create("city")
                ->searchable(true)
        ];
    }
...

State persistent #

Table has 3 state persistent elements:

1. Field's sort: The field sort always reserved is direction during ajax post back.
2. Field's filter: The field's filter always reserved its value during ajax post back.
3. Page index: Preserve the index if the pageIndex is not null. So to turn on this persistence feature, try to set ->pageIndex(0) on onCreated event for example.

Traits #

Table has been provided with following traits:

1. TAppLink: Able to refer to application with app() method
2. TDashboadLink: Able to refer to parent dashboard with dashboard() method
3. TEnabledPermit: Use enabled() and enabledWhen() to set permission
4. TParams: Able to get/set parameters with params() method
5. TWidgetState: Able to get/set persisted state for widget
6. TParamsPersisted: Able to make params set to widget persisted
7. TDataSource: Able to receive datasource via dataSource() method
8. TFields: Able to receive fields via fields() method
9. TDetailAction: Able to open detail modal
10. TExportable: Able to export widget to different formats