Table
Overview #
Methods #
Name | description |
---|---|
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 #
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 |
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 |
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 |
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 |
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 |
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.