Файл: cobisja/BootHelp/Guide/content/table.php
Строк: 312
<?php
/**
* The MIT License
*
* Copyright 2015 cobisja.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
use cobisjaBootHelpBootHelp;
use cobisjaBootHelpGuideSample;
$content = [
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
];
$tables = [
'title'=>'Tables',
'samples'=>[
[
'name'=> 'Basic Tables',
'description'=>'Use <code>table</code> without options, passing just an array (actually a matrix)
of elements to display a table of data.',
'php_code'=> "echo BootHelp::table(
[
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
]
);",
'result'=> BootHelp::table(
[
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
]
),
'html_code'=>'<table class="table">
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Setting a Table Header - First method',
'description'=>'You can set a header for your table using <code>["header"=>array of items]</code> as
second parameter.',
'php_code'=> "echo BootHelp::table(
[
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>['#', 'First Name', 'Last Name', 'Username']]
);",
'result'=> BootHelp::table(
[
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>['#', 'First Name', 'Last Name', 'Username']]
),
'html_code'=>'<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Setting a Table Header - Second method',
'description'=>'You can use <code>["header"=>true]</code> to specify that the table header is the first
row of the data table matrix.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true]
),
'html_code'=>'<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Setting a Table caption',
'description'=>'Use <code>["caption"=>text]</code> to specify an optional table caption.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true, 'caption'=>'Optional table caption.']
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true, 'caption'=>'Optional table caption.']
),
'html_code'=>'<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Bordered tables, Condensed tables / Striped rows, Hover rows',
'description'=>'Use any combination of <code>bordered</code>, <code>condensed</code>, <code>striped</code>,
<code>hover</code> options to apply special styling to tables. The options values are booleans.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true, 'striped'=>true, 'bordered'=>true]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
['header'=>true, 'striped'=>true, 'bordered'=>true]
),
'html_code'=>'<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Customized options for table head, body and/or rows.',
'description'=>'Use <code>["header_options"=>options]</code>, <code>["body_options"=>options]</code> and/or
<code>["rows_options"=>options]</code>" to pass specific options to any of <code>thead</code>,
<code>tbody</code> y/or <code>tr</code> tags. Be aware of any option with a different key from above mentioned,
will be appended to the main table tag.',
'php_code'=> "$content = [
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
];
echo BootHelp::table(
$content,
[
'header_options'=>['class'=>'my-head'],
'body_options'=>['class'=>'my-body'],
'rows_options'=>['class'=>'my-rows', 'data-js'=>1],
'id'=>'my-table'
]
);",
'result'=> BootHelp::table(
$content,
[
'header'=>true,
'header_options'=>['class'=>'my-head'],
'body_options'=>['class'=>'my-body'],
'rows_options'=>['class'=>'my-rows', 'data-js'=>1],
'id'=>'my-table'
]
),
'html_code'=>'<table id="my-table" class="table">
<thead class="my-head">
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody class="my-body">
<tr data-js="1" class="my-rows">
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr data-js="1" class="my-rows">
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr data-js="1" class="my-rows">
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Setting local options for table rows.',
'description'=>'As you saw above, you can use <code>["rows_options"=>options]</code> to set specific
options <strong>to all table rows</strong>. You can set specific options to any row just passing options keys and
put them at the end of the row definition. These options overwrites those established via "row_options". Watch very
carefully the example below.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat', 'data-js'=>2], // This row will have attribute 'data-js' = 2.
[3, 'Larry', 'the Bird', '@twitter']
],
[
'rows_options'=>['data-js'=>1], // Global options: All rows have attribute 'data_js' = 1.
'header'=>true
]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat', 'data-js'=>2],
[3, 'Larry', 'the Bird', '@twitter']
],
[
'rows_options'=>['data-js'=>1],
'header'=>true
]
),
'html_code'=>'<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr data-js="1">
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr data-js="2">
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr data-js="1">
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Setting local options for table cells',
'description'=>'In the same way you saw above, you can set specific options for individual cells.
Just turn the cell value into an array and put options at the end. These options overwrite those established
via "row_options" or those set using the method above showed. Watch very carefully the example below.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[[1, 'scope'=>'row'], 'Mark', 'Otto', '@mdo'], // First cell will have attribute 'scope'= row'.
[2, 'Jacob', 'Thornton', '@fat', 'data-js'=>2], // This row will have attribute 'data-js'= 2.
[3, 'Larry', 'the Bird', '@twitter']
],
[
'rows_options'=>['data-js'=>1], // Global options: All rows have attribute 'data_js' = 1.
'header'=>true
]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[[1, 'scope'=>'row'], 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat', 'data-js'=>2],
[3, 'Larry', 'the Bird', '@twitter']
],
[
'rows_options'=>['data-js'=>1], // Global options: All rows have attribute 'data_js' = 1.
'header'=>true
]
),
'html_code'=>'<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr data-js="1">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr data-js="2">
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr data-js="1">
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Contextual classes.',
'description'=>'You can apply contextual classes either table rows or table cells. Valid contexts are
<code>active</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo', 'context'=>'success'], // This row is with 'context' = 'success'.
[2, 'Jacob', ['Thornton', 'context'=>'warning'], '@fat'], // Cell 3 'context' = 'warning'.
[3, 'Larry', 'the Bird', ['@twitter', 'context'=>'danger']] // Cell 4 'context' = 'danger'.
],
[
'rows_options'=>['context'=>'info'], // Global options: All rows with 'context' = 'info'.
'header'=>true
]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo', 'context'=>'success'],
[2, 'Jacob', ['Thornton', 'context'=>'warning'], '@fat'],
[3, 'Larry', 'the Bird', ['@twitter', 'context'=>'danger']]
],
[
'rows_options'=>['context'=>'info'], // Global options: All rows have attribute 'data_js' = 1.
'header'=>true
]
),
'html_code'=>'<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="info">
<td>2</td>
<td>Jacob</td>
<td class="warning">Thornton</td>
<td>@fat</td>
</tr>
<tr class="info">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td class="danger">@twitter</td>
</tr>
</tbody>
</table>'
],
[
'name'=> 'Responsive tables',
'description'=>'Create responsive tables using <code>["responsive"=>true]</code> to make them
scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.',
'php_code'=> "echo BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
[
'responsive'=>true,
'header'=>true
]
);",
'result'=> BootHelp::table(
[
['#', 'First Name', 'Last Name', 'Username'],
[1, 'Mark', 'Otto', '@mdo'],
[2, 'Jacob', 'Thornton', '@fat'],
[3, 'Larry', 'the Bird', '@twitter']
],
[
'responsive'=>true,
'header'=>true
]
),
'html_code'=>'<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
</tr>
<tr>
<td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
</tr>
<tr>
<td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
</tr>
</tbody>
</table>
</div>'
],
]
];
/**
* Table samples.
*/
echo new Sample($tables);