| 
<?php
 require '../Table/Properties.php';
 require '../Table/TableColumn.php';
 require '../Table/Table.php';
 
 $table = \Jupitern\Table\Table::instance()
 ->setData([
 ['id' => 1, 'name' => 'Peter', 'age' => '35', 'phone' => '961 168 851'],
 ['id' => 2, 'name' => 'John', 'age' => '44', 'phone' => '169 899 742'],
 ['id' => 3, 'name' => 'Peter', 'age' => '22', 'phone' => '737 853 346'],
 ['id' => 4, 'name' => 'Clark', 'age' => '34', 'phone' => '169 574 741'],
 ['id' => 5, 'name' => 'Alex', 'age' => '65', 'phone' => '732 753 467'],
 ])
 //    ->attrs('table', ['class' => 'table table-bordered', 'cellspacing' => '0'])
 ->attr('table', 'id', 'demoTable')
 ->attr('table', 'class', 'table table-bordered table-striped table-hover')
 ->attr('table', 'cellspacing', '0')
 ->attr('table', 'width', '100%')
 ->attr('tr', 'data-text', 'bla bla bla bla bla')
 ->attr('tr', 'data-id', function($row) {
 return 'row-' . $row['id'];
 })
 ->css('tr', 'background-color', '#aaa')
 ->column()
 ->title('Name')
 ->value(function ($row) {
 return rand(1,10)%2 ? '<b>'.$row['name'].'</b>' : $row['name'];
 })
 ->attr('td', 'data-text', 'bla bla bla')
 ->css('th', 'color', 'green')
 ->css('td', 'width', '50%')
 ->css('td', 'background-color', '#ccc')
 ->add()
 ->column()
 ->title('Age')
 ->value('age')
 ->css('th', 'color', 'red')
 ->css('td', 'width', '20%')
 ->add()
 ->column()
 ->value('phone')
 ->css('td', 'color', 'red')
 ->css('td', 'width', '20%')
 ->add()
 ->column()
 ->value(function ($row) {
 return '<a href="country/'. $row['id'] .'">edit</a>';
 })
 ->css('td', 'width', '10%')
 ->add();
 ?>
 
 
 <html>
 <head>
 <!-- JQUERY -->
 <script
 src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
 integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
 crossorigin="anonymous"></script>
 
 <!-- DATATABLES -->
 <link href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">
 <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
 
 <!-- Bootstrap and Datatables Bootstrap theme (OPTIONAL) -->
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
 <script type="text/javascript">
 
 $(document).ready( function () {
 $('#demoTable').DataTable();
 });
 
 </script>
 </head>
 <body>
 <div style="width: 50%; margin: 30px;">
 <?php $table->render(); ?>
 </div>
 </body>
 </html>
 
 |