• Overview
• Properties
• Table Fields
  • Badge
  • Button
  • Icon
  • Image
  • Progress
  • Sparkline

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");
    }),