fix conflict

resources/Elements/table/Styles/table.css

+<<<<<<< HEAD
 .table-docu {
     line-height: 2;
     font-size: 13px;
+=======
+.table-docu {
+    line-height: 2;
+    font-size: 13px;
+>>>>>>> 0ea13f4ff8e7b7acaeca6774a2d817d32279ad86
 }
\ No newline at end of file

src/Views/Limitless/Codemirror/Documentation/Index.blade.php

@@ -3,19 +3,79 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBATGltaXRsZXNzOjpDb2RlbWlycm9yKFsgJ2xhbmd1YWdlJyA9PiAnamF2YXNjcmlwdCcsICd0aGVtZScgPT4gJ3plbmJ1cm4nLCAndmFsdWUnID0+ICdIZWxsbyBXb3JsZCEnIF0pCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Code Mirror", 'icon' => 'icon-circle-code'])
+        A themed writable container for codes.
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+    @Limitless::ElementCardStart(['title' => "Codemirror"])
+
+        <p>A themed writable container for codes.</p>
+        @Limitless::Divider
+        </br>
+        <h6>Parameters</h6>
+        @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+            @Limitless::TableAutofillHeader([
+                ['name' => 'Key'],
+                ['name' => 'Type'],
+                ['name' => 'Description']
+            ])
+
+            @Limitless::TableAutofillBody([
+                [
+                    ['value' => 'language'],
+                    ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                    ['value' => 'The language of the code to write. <code>javascript | manticore | python | shell</code>', 'secure' => false]
+                ],
+                [
+                    ['value' => 'theme'],
+                    ['value' => '<i>String</i> [Default = <code>"icecoder"</code>]', 'secure' => false],
+                    ['value' => 'The theme of the editor.']
+                ],
+                [
+                    ['value' => 'value'],
+                    ['value' => '<i>String</i> [Default = <code>"... no value parameter set..."</code>]', 'secure' => false],
+                    ['value' => 'The value or text to display.']
+                ],
+                [
+                    ['value' => 'extra'],
+                    ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                    ['value' => 'Adds custom attributes for the codemirror element. existing attributes such as class will be overwritten.']
+                ]
+            ])
+
+        @Limitless::TableStop
+
+        @Limitless::Divider
+        </br>
+        <h6>Themes</h6>
+        <code>
+            3024-day | 3024-night | abcdef | ambiance | base16-dark | base16-light | bespin | blackboard | cobalt |
+            codemirror | colorforth | darcula | dracula | duotone-dark | duotone-light | eclipse | elegant | erlang-dark |
+            gruvbox-dark | hopscotch | icecoder | idea | isotope | lesser-dark | liquibyte | lucario | material | mbo |
+            mdn-like | midnight | monokai | neat | neo | night | nord | oceanic-next | panda-syntax | paraiso-dark |
+            paraiso-light | pastel-on-dark | railscasts | rubyblue | seti | shadowfox | solarized | the-matrix |
+            tomorrow-night-bright | tomorrow-night-eighties | ttcn | twilight | vibrant-ink | xq-dark | xq-light |
+            yeti | yonce | zenburn
+        </code>
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        hello world
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
-        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!' ])
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!', 'extra' => ['id' => 'codemirror1', 'data-is-modified' => true] ])
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Codemirror Test", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6Q29kZW1pcnJvcihbICdsYW5ndWFnZScgPT4gJ2phdmFzY3JpcHQnLCAndGhlbWUnID0+ICd6ZW5idXJuJywgJ3ZhbHVlJyA9PiAnSGVsbG8gV29ybGQhJywgJ2V4dHJhJyA9PiBbJ2lkJyA9PiAnY29kZW1pcnJvcjEnLCAnZGF0YS1pcy1tb2RpZmllZCcgPT4gdHJ1ZV0gXSk=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop
 

src/Views/Limitless/Element/Card/Documentation/Index.blade.php

@@ -3,20 +3,87 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBJIGFtIGluc2lkZSBhIGNhcmQhCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for card element here.
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper'])
+        <p>A styled container for grouping contents.</p>
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Card Sample", 'icon' => 'icon-file-empty' ] )
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+        @Limitless::ElementCardStart(['title' => "ElementCardStart"])
+
+            <p>The opening element for the card.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'title'],
+                        ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
+                        ['value' => 'The header title of the card.']
+                    ],
+                    [
+                        ['value' => 'icon'],
+                        ['value' => '<i>String</i> [Default = <code>"icon-circle2"</code>]', 'secure' => false],
+                        ['value' => 'The header icon of the card.']
+                    ],
+                    [
+                        ['value' => 'collapsible'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Option to make the card body to show or hide.']
+                    ],
+                    [
+                        ['value' => 'removable'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Option to show or hide the close button.']
+                    ],
+                    [
+                        ['value' => 'extra'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the card div element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "ElementCardStop"])
+
+            <p>The closing element for the card.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters : NONE</h6>
+
+        @Limitless::ElementCardStop
+
+    @Limitless::ElementCardStop
+
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper', 'collapsible' => true, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card']] )
             I am inside a card!
         @Limitless::ElementCardStop
+    @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Card Syntax", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiQ2FyZCIsICdpY29uJyA9PiAnaWNvbi1uZXdzcGFwZXInLCAnY29sbGFwc2libGUnID0+IHRydWUsICdyZW1vdmVhYmxlJyA9PiB0cnVlLCAnZXh0cmEnID0+IFsnc3R5bGUnID0+ICdwb3NpdGlvbjpyZWxhdGl2ZTsnLCAnaWQnID0+ICdlbGVtZW50bzEnLCAnY2xhc3MnID0+ICdjYXJkJ11dICkKCUkgYW0gaW5zaWRlIGEgY2FyZCEKQExpbWl0bGVzczo6RWxlbWVudENhcmRTdG9w");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop
 
+
+
 @stop

src/Views/Limitless/Element/Card/Start.blade.php

@@ -7,11 +7,11 @@
         <div class="header-elements">
             <div class="list-icons">
 
-                @if($collapsable)
+                @if($collapsible)
                     <a class="list-icons-item" data-action="collapse"></a>
                 @endif
 
-                @if($removeable)
+                @if($removable)
                     <a class="list-icons-item" data-action="remove"></a>
                 @endif
          </div>

src/Views/Limitless/Element/Config.php

@@ -62,8 +62,8 @@
             return View('Limitless::Element.Card.Start')
             ->withTitle( (isset($parameters['title']) ? $parameters['title'] : 'No Title') )
             ->withIcon( (isset($parameters['icon']) ? $parameters['icon'] : 'icon-circle2') )
-            ->withCollapsable( (isset($parameters['collapsable']) ? $parameters['collapsable'] : true) )
-            ->withRemoveable( (isset($parameters['removeable']) ? $parameters['removeable'] : false) )
+            ->withCollapsible( (isset($parameters['collapsible']) ? $parameters['collapsible'] : true) )
+            ->withRemovable( (isset($parameters['removable']) ? $parameters['removable'] : false) )
             ->withExtra( (isset($parameters['extra']) ? $parameters['extra'] : [] ) );
 
         }

src/Views/Limitless/Element/Divider/Documentation/Index.blade.php

@@ -3,19 +3,38 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("QExpbWl0bGVzczo6RXhhbXBsZQ==");
-    @endphp
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Divider", 'icon' => 'icon-minus2'])
+        <p>A styled horizontal line for separating contents.</p>
+    @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for example element here.
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+        @Limitless::ElementCardStart(['title' => "Divider"])
+
+            <p>A styled horizontal line for separating contents.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters : NONE</h6>
+
+        @Limitless::ElementCardStop
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Example Sample Output", 'icon' => 'icon-file-empty' ] )
-        @Limitless::Example
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+
+        <p>some content...</p>
+        @Limitless::Divider
+        <p>some content...</p>
+
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Example Syntax", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("PHA+c29tZSBjb250ZW50Li4uPC9wPgpATGltaXRsZXNzOjpEaXZpZGVyCjxwPnNvbWUgY29udGVudC4uLjwvcD4=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop
 

src/Views/Limitless/Element/Example/Documentation/Index.blade.php

@@ -3,19 +3,36 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("QExpbWl0bGVzczo6RXhhbXBsZQ==");
-    @endphp
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Example", 'icon' => 'icon-exclamation'])
+        <p>Example Div element with custom javascript and stylesheet files.</p>
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+        @Limitless::ElementCardStart(['title' => "Example"])
+
+        <p>Example Div element with custom javascript and stylesheet files.</p>
+        @Limitless::Divider
+        </br>
+        <h6>Parameters : NONE</h6>
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for example element here.
         @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Example Sample Output", 'icon' => 'icon-file-empty' ] )
+    @Limitless::ElementCardStop
+
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
         @Limitless::Example
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Example Syntax", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6RXhhbXBsZQ==");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop
 

src/Views/Limitless/Help/Config.php

@@ -48,12 +48,15 @@
                     case "/":
                         $path = 'Limitless::Help.Pages.Home';
                         break;
-                    case "card":
-                        $path = 'Limitless::Element.Card.Documentation.Index';
-                        break;
                     case "example":
                         $path = 'Limitless::Element.Example.Documentation.Index';
                         break;
+                    case "divider":
+                        $path = 'Limitless::Element.Divider.Documentation.Index';
+                        break;
+                    case "card":
+                        $path = 'Limitless::Element.Card.Documentation.Index';
+                        break;
                     case "codemirror":
                         $path = 'Limitless::Codemirror.Documentation.Index';
                         break;

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -26,9 +26,11 @@
         @Limitless::NavigationMenuItem(['url' => '/', 'target' => '_self', 'icon' => 'icon-home2', 'title' => 'Home'])
         @Limitless::NavigationMenuItem(['url' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/icons_icomoon.html', 'target' => '_blank', 'icon' => 'icon-file-picture', 'title' => 'Icons'])
         @Limitless::NavigationMenuSectionTitle(['title' => 'Elements'])
-        @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-square', 'title' => 'Card'])
+        @Limitless::NavigationMenuItem(['url' => '?page=example', 'target' => '_self', 'icon' => 'icon-exclamation', 'title' => 'Example'])
+        @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-newspaper', 'title' => 'Card'])
         @Limitless::NavigationMenuItem(['url' => '?page=table', 'target' => '_self', 'icon' => 'icon-table2', 'title' => 'Table'])
         @Limitless::NavigationMenuItem(['url' => '?page=codemirror', 'target' => '_self', 'icon' => 'icon-circle-code', 'title' => 'Code Mirror'])
         @Limitless::NavigationMenuItem(['url' => '?page=navigation', 'target' => '_self', 'icon' => 'icon-menu8', 'title' => 'Navigation'])
+        @Limitless::NavigationMenuItem(['url' => '?page=divider', 'target' => '_self', 'icon' => 'icon-minus2', 'title' => 'Divider'])
     @Limitless::NavigationStop
 @stop

src/Views/Limitless/Help/Pages/Home.blade.php

@@ -3,7 +3,7 @@
 
 @section('Limitless::Content')
 
-@Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
+@Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsible' => true, 'removable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
     This is the documentation for the <i>Limitless</i> theme.
     <i>Limitless</i> is a part of <i>Picasso</i>, a feature of the package <i>Sidekick</i> from <i>Ceetrox</i>.
     The elements shown in this documentation are available as blade code and can be copied directly into your project.

src/Views/Limitless/Table/Config.php

@@ -38,6 +38,16 @@
             'Limitless::TableAutofillBody' => 'tableAutofillBody'
         ];
 
+        public $assetAllocation;
+
+        public function __construct() {
+            $this->assetAllocation = [
+                'Limitless::TableStart' => [
+                    secure_url("/ceetrox/sidekick/resource/public/Elements/table/Styles/table.css")
+                ]
+            ];
+        }
+
 
         /*
         |--------------------------------------------------------------------------------------------

src/Views/Limitless/Table/Documentation/Index.blade.php

@@ -3,19 +3,163 @@
 
 @section('Limitless::Content')
 
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Table", 'icon' => 'icon-table2'])
+        <p>A data container with rows and columns.</p>
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+        @Limitless::ElementCardStart(['title' => "TableStart"])
+
+            <p>The opening element for the table.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'extra'],
+                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the table element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableStop"])
+
+            <p>The closing element for the table.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters : NONE</h6>
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableAutofillHeader"])
+
+            <p>Populates column headers. Parameters needs to be inside an array of column arrays.</p>
+
+            @php
+                $headerExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBjb2x1bW5zIGFycmF5CglbJ25hbWUnID0+ICdDb2x1bW4xJywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJWyduYW1lJyA9PiAnQ29sdW1uMiddLAoJWyduYW1lJyA9PiAnQ29sdW1uMyddCl0=");
+            @endphp
+
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $headerExample ])
+
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'name'],
+                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                        ['value' => 'Column header name to display.']
+                    ],
+                    [
+                        ['value' => 'secure'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
+                    ]
+                ])
+
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "TableAutofillBody"])
+
+            <p>Populates the table body data. Parameters needs to be inside an array of row array of column arrays.</p>
+
             @php
-        $example = base64_decode("");
+                $bodyExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBwZXIgcm93IGFycmF5CglbCgkJLy8gcGVyIGNvbHVtbiBhcnJheQoJCVsndmFsdWUnID0+ICdyb3cgMSBkYXRhIDEnLCAnc2VjdXJlJyA9PiBmYWxzZV0sCgkJWyd2YWx1ZScgPT4gJ3JvdyAxIGRhdGEgMiddCgldLAoJWwoJCVsndmFsdWUnID0+ICdyb3cgMiBkYXRhIDEnXSwKCQlbJ3ZhbHVlJyA9PiAncm93IDIgZGF0YSAyJ10KCV0KXQ==");
             @endphp
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for table element here.
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $bodyExample ])
+
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'value'],
+                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
+                        ['value' => 'Cell value per column to display.']
+                    ],
+                    [
+                        ['value' => 'secure'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
+                    ]
+                ])
+
+            @Limitless::TableStop
+
         @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Table Sample Output", 'icon' => 'icon-file-empty' ] )
-        Table sample output here
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Table Syntax", 'icon' => 'icon-file-empty' ] )
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+
+        @Limitless::TableStart([ 'extra' => ['class' => 'table table-striped table-docu'] ])
+
+            @Limitless::TableAutofillHeader([
+                ['name' => 'Column 1'],
+                ['name' => '<a href="#">Url Column 2</a>', 'secure' => false],
+                ['name' => 'Column 3'],
+                ['name' => 'Column 4']
+            ])
+
+            @Limitless::TableAutofillBody([
+                [
+                    ['value' => 'Data 1 Row 1'],
+                    ['value' => '<i>Data 2 Row 1</i>', 'secure' => false],
+                    ['value' => 'Data 3 Row 1'],
+                    ['value' => 'Data 4 Row 1']
+                ],
+                [
+                    ['value' => 'Data 1 Row 2'],
+                    ['value' => '<code>Data 2 Row 2</code>', 'secure' => false],
+                    ['value' => 'Data 3 Row 2'],
+                    ['value' => '<b>Data 4 Row 2</b>', 'secure' => false],
+                ]
+            ])
+
+        @Limitless::TableStop
+
+    @Limitless::ElementCardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6VGFibGVTdGFydChbICdleHRyYScgPT4gWydjbGFzcycgPT4gJ3RhYmxlIHRhYmxlLXN0cmlwZWQgdGFibGUtZG9jdSddIF0pCgoJQExpbWl0bGVzczo6VGFibGVBdXRvZmlsbEhlYWRlcihbCgkJWyduYW1lJyA9PiAnQ29sdW1uIDEnXSwKCQlbJ25hbWUnID0+ICc8YSBocmVmPSIjIj5VcmwgQ29sdW1uIDI8L2E+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCVsnbmFtZScgPT4gJ0NvbHVtbiAzJ10sCgkJWyduYW1lJyA9PiAnQ29sdW1uIDQnXQoJXSkKCglATGltaXRsZXNzOjpUYWJsZUF1dG9maWxsQm9keShbCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICc8aT5EYXRhIDIgUm93IDE8L2k+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICdEYXRhIDQgUm93IDEnXQoJCV0sCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Y29kZT5EYXRhIDIgUm93IDI8L2NvZGU+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Yj5EYXRhIDQgUm93IDI8L2I+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCV0KCV0pCgpATGltaXRsZXNzOjpUYWJsZVN0b3A=");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop