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 #
Name | description |
---|---|
tableHover([boolean $isHover]) | Get/set whether table is able to be hovered, default is false |
tableOutline([boolean $isOutline]) | Get/set where table is outline, default is false |
tableStriped([boolean $isStripped]) | Get/set whether table shows stripped rows, default is false |
tableSmall([boolean $isSmall]) | Get/set whether table is shown in small size, default is false |
tableBordered([boolean $isBordered]) | Get/set whether table has borders, default is false |
tableResponsive([boolean $isResponsive]) | Get/set whether table is 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 whether 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 table |
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 #
Name | type | default | description |
---|---|---|---|
text | string/function | Get/set the text inside badge | |
type | string/function | "primary" | Get/set type of badge, accept "primary" , "secondary" , "success" , "danger" , "warning" , "info" |
cssStyle | string/function | Get/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 #
Name | type | default | description |
---|---|---|---|
text | string | "Submit" | Get/set the text inside button |
type | string | "primary" | Get/set the button type, accept "primary" , "info" , "danger" , "success" |
size | string | "md" | Get/set the size of button, accept "sm" , "md" , "lg" |
outline | boolean | false | Get/set the whether button is outline |
onClick | mixed | Get/set client action on click event, more details | |
disabled | boolean | false | Get/set whether button is disabled |
blockLevel | boolean | false | Get/set whether button take full size of available space |
attributes | array | Get/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 #
Name | type | default | description |
---|---|---|---|
icon | string/function | Get/set the icon | |
type | string/function | Get/set type of icon, accept "primary" , "secondary" , "danger" , "success" , "info" , "warning" | |
cssStyle | string/function | Get/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 #
Name | type | default | description |
---|---|---|---|
width | string | Get/set width of image | |
height | string | Get/set height of image | |
rounded | boolean | false | Get/set whether image is rounded at corner |
roundedCircle | boolean | false | Get/set whether image is circle |
thumbnail | boolean | Get/set whether image is contained in thumbnail | |
responsive | boolean | Get/set whether image is responsive | |
cssClass | string | Get/set extra css class for image | |
cssStyle | string | Get/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 #
Name | type | default | description |
---|---|---|---|
type | string/function | Get/set type of progress, accept "primary" , "secondary" , "danger" , "success" , "info" , "warning" | |
cssStyle | string/function | Get/set css style applied to progress | |
range | array/function | Get/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 #
Name | type | default | description |
---|---|---|---|
type | string/function | Get/set type of sparkline, accept "bar" , "box" , "tristate" , "bullet" , "line" , "pie" | |
dataSource | DataSource | Get/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");
}),
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.