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 #

Nametypedefaultdescription
tableHoverboolfalseGet/set whether table is able to be hovered, default is false
tableOutlineboolfalseGet/set where table is outline, default is false
tableStripedboolfalseGet/set whether table shows stripped rows, default is false
tableSmallboolfalseGet/set whether table is shown in small size, default is false
tableBorderedboolfalseGet/set whether table has borders, default is false
tableResponsivebooltrueGet/set whether table is responsive, default is true
headerDarkboolfalseGet/set whether header is on dark mode, default is false
pageSizeintnullGet/set the number of row on each page
pageIndexintnullGet/set the current page index
pageAlignstring"left"Get/set position of paging bar, accept "left", "center", "right"
showFooterboolfalseGet/set whether footer is shown
autoFieldsbooltrueGet/set whether auto fields should be used when no settings for fields()
searchableboolfalseGet/set whether search box is show and table can be searched
searchFieldsarraynullGet/set list of fields that are searchable
searchAlignstring"right"Get/set alignment of search box, accept "left", "center", "right"
searchTextstringnullGet/set the search text
searchWidthstring"200px"Get/set with of search box

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 #

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

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 #

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

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 #

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

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 #

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

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 #

Nametypedefaultdescription
typestring/functionGet/set type of sparkline, accept "bar", "box", "tristate", "bullet", "line", "pie"
dataSourceDataSourceGet/set the source for 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

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.