Table

Overview #

Methods #

Namedescription
tableHover([boolean $isHover])Get/set table hover, default is false
tableOutline([boolean $isOutline])Get/set table outline, default is false
tableStriped([boolean $isStripped])Get/set table stripped, default is false
tableSmall([boolean $isSmall])Get/set table shown in small size, default is false
tableBordered([boolean $isBordered])Get/set table bordered, default is false
tableResponsive([boolean $isResponsive])Get/set table responsive, default is true
headerDark([boolean $isDark])Get/set whether header is on dark mode, default is false
pageSize([int $rowPerPage])Get/set the number of row on each page
pageIndex([int $indexPage])Get/set the current page index
pageAlign([string $position])Get/set position of paging bar, accept "left", "center", "right"
showFooter([boolean $footerShown])Get/set footer is shown
autoFields([boolean $isAuto])Get/set whether auto fields should be used when no settings for fields()
state([array $state])Get/set state of browser

Example:

<?php

use \koolreport\dashboard\widgets\Table;

class SaleTable extends Table
{
    protected function onInit()
    {
        $this->tableHover(true)
            ->tableOutline(true)
            ->tableSmall(true)
    }
}

Table Fields #

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

Badge #

Nametypedefaultdescription
textstring/functionGet/set the text inside badge
typestring/function"primary"Get/set type of badge, accept "primary", "secondary", "success", "danger", "warning", "info"
cssStylestring/functionGet/set extra css style for badge, accept string or function

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 #

Nametypedefaultdescription
textstring"Submit"Get/set the text inside button
typestring"primary"Get/set the button type, accept "primary", "info", "danger", "success"
sizestring"md"Get/set the size of button, accept "sm", "md", "lg"
outlinebooleanfalseGet/set the whether button is outline
onClickmixedGet/set client action on click event, more details
disabledbooleanfalseGet/set whether button is disabled
blockLevelbooleanfalseGet/set whether button take full size of available space
attributesarrayGet/set the extra attributes to <button> element

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 #

Nametypedefaultdescription
iconstring/functionGet/set the icon
typestring/functionGet/set type of icon, accept "primary", "secondary", "danger", "success", "info", "warning"
cssStylestring/functionGet/set the css style of icon

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 #

Nametypedefaultdescription
widthstringGet/set width of image
heightstringGet/set height of image
roundedbooleanfalseGet/set whether image is rounded at corner
roundedCirclebooleanfalseGet/set whether image is circle
thumbnailbooleanGet/set whether image is contained in thumbnail
responsivebooleanGet/set whether image is responsive
cssClassstringGet/set extra css class for image
cssStylestringGet/set extra css style for image
squared([string $size])Make image appear in square, default size is 32px
circle([string $diameter])Make image appear in circle, default diameter is 32px

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 #

Nametypedefaultdescription
typestring/functionGet/set type of progress, accept "primary", "secondary", "danger", "success", "info", "warning"
cssStylestring/functionGet/set css style applied to progress
rangearray/functionGet/set range for color customization

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 #

Nametypedefaultdescription
typestring/functionGet/set type of sparkline, accept "bar", "box", "tristate", "bullet", "line", "pie"
dataSourceDataSourceGet/set the source for sparkline

Example:

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

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.