From d6b6744f9fbe06cf305d7ba5d17ed159f751e90e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 6 Apr 2021 12:16:59 +0300
Subject: [PATCH] Add demo actions and github props

---
 src/AppDocumentation.vue                           |  2 +-
 src/assets/styles/app/_content.scss                | 13 +++++++++++++
 src/views/accordion/AccordionDemo.vue              |  1 +
 src/views/accordion/AccordionDoc.vue               |  2 +-
 src/views/autocomplete/AutoCompleteDemo.vue        |  2 +-
 src/views/autocomplete/AutoCompleteDoc.vue         |  2 +-
 src/views/avatar/AvatarDemo.vue                    |  1 +
 src/views/avatar/AvatarDoc.vue                     |  2 +-
 src/views/badge/BadgeDemo.vue                      |  1 +
 src/views/badge/BadgeDoc.vue                       |  2 +-
 src/views/blockui/BlockUIDemo.vue                  |  1 +
 src/views/blockui/BlockUIDoc.vue                   |  2 +-
 src/views/breadcrumb/BreadcrumbDemo.vue            |  1 +
 src/views/breadcrumb/BreadcrumbDoc.vue             |  2 +-
 src/views/button/ButtonDemo.vue                    |  1 +
 src/views/button/ButtonDoc.vue                     |  2 +-
 src/views/calendar/CalendarDemo.vue                |  2 +-
 src/views/calendar/CalendarDoc.vue                 |  2 +-
 src/views/card/CardDemo.vue                        |  1 +
 src/views/card/CardDoc.vue                         |  2 +-
 src/views/carousel/CarouselDemo.vue                |  1 +
 src/views/carousel/CarouselDoc.vue                 |  2 +-
 src/views/cascadeselect/CascadeSelectDemo.vue      |  2 +-
 src/views/cascadeselect/CascadeSelectDoc.vue       |  2 +-
 src/views/chart/BarChartDemo.vue                   |  1 +
 src/views/chart/BarChartDoc.vue                    |  2 +-
 src/views/chart/ComboChartDemo.vue                 |  1 +
 src/views/chart/ComboChartDoc.vue                  |  2 +-
 src/views/chart/DoughnutChartDemo.vue              |  1 +
 src/views/chart/DoughnutChartDoc.vue               |  2 +-
 src/views/chart/LineChartDemo.vue                  |  1 +
 src/views/chart/LineChartDoc.vue                   |  2 +-
 src/views/chart/PieChartDemo.vue                   |  1 +
 src/views/chart/PieChartDoc.vue                    |  2 +-
 src/views/chart/PolarAreaChartDemo.vue             |  1 +
 src/views/chart/PolarAreaChartDoc.vue              |  2 +-
 src/views/chart/RadarChartDemo.vue                 |  1 +
 src/views/chart/RadarChartDoc.vue                  |  2 +-
 src/views/checkbox/CheckboxDemo.vue                |  2 +-
 src/views/checkbox/CheckboxDoc.vue                 |  2 +-
 src/views/chip/ChipDemo.vue                        |  1 +
 src/views/chip/ChipDoc.vue                         |  2 +-
 src/views/chips/ChipsDemo.vue                      |  2 +-
 src/views/chips/ChipsDoc.vue                       |  2 +-
 src/views/colorpicker/ColorPickerDemo.vue          |  1 +
 src/views/colorpicker/ColorPickerDoc.vue           |  2 +-
 src/views/confirmdialog/ConfirmDialogDemo.vue      |  1 +
 src/views/confirmdialog/ConfirmDialogDoc.vue       |  2 +-
 src/views/confirmpopup/ConfirmPopupDemo.vue        |  1 +
 src/views/confirmpopup/ConfirmPopupDoc.vue         |  2 +-
 src/views/contextmenu/ContextMenuDemo.vue          |  1 +
 src/views/contextmenu/ContextMenuDoc.vue           |  2 +-
 src/views/datatable/DataTableBasicDemo.vue         |  1 +
 src/views/datatable/DataTableBasicDoc.vue          |  2 +-
 src/views/datatable/DataTableColGroupDemo.vue      |  3 ++-
 src/views/datatable/DataTableColResizeDemo.vue     |  3 ++-
 src/views/datatable/DataTableColToggleDemo.vue     |  3 ++-
 src/views/datatable/DataTableContextMenuDemo.vue   |  3 ++-
 src/views/datatable/DataTableCrudDemo.vue          |  3 ++-
 src/views/datatable/DataTableDemo.vue              |  1 +
 src/views/datatable/DataTableDoc.vue               |  2 +-
 .../datatable/DataTableDynamicColumnsDemo.vue      |  3 ++-
 src/views/datatable/DataTableEditDemo.vue          |  3 ++-
 src/views/datatable/DataTableExportDemo.vue        |  3 ++-
 src/views/datatable/DataTableFilterDemo.vue        |  3 ++-
 src/views/datatable/DataTableFlexScrollDemo.vue    |  5 ++++-
 src/views/datatable/DataTableGridLinesDemo.vue     |  3 ++-
 src/views/datatable/DataTableLazyDemo.vue          |  3 ++-
 src/views/datatable/DataTablePaginatorDemo.vue     |  3 ++-
 src/views/datatable/DataTableReorderDemo.vue       |  3 ++-
 src/views/datatable/DataTableResponsiveDemo.vue    |  3 ++-
 src/views/datatable/DataTableRowExpandDemo.vue     |  3 ++-
 src/views/datatable/DataTableRowGroupDemo.vue      |  3 ++-
 src/views/datatable/DataTableScrollDemo.vue        |  3 ++-
 src/views/datatable/DataTableSelectionDemo.vue     |  3 ++-
 src/views/datatable/DataTableSizeDemo.vue          |  3 ++-
 src/views/datatable/DataTableSortDemo.vue          |  3 ++-
 src/views/datatable/DataTableStateDemo.vue         |  3 ++-
 src/views/datatable/DataTableStripedDemo.vue       |  3 ++-
 src/views/datatable/DataTableStyleDemo.vue         |  3 ++-
 src/views/datatable/DataTableTemplatingDemo.vue    |  3 ++-
 src/views/dataview/DataViewDemo.vue                |  1 +
 src/views/dataview/DataViewDoc.vue                 |  2 +-
 src/views/deferredcontent/DeferredContentDemo.vue  |  1 +
 src/views/deferredcontent/DeferredContentDoc.vue   |  2 +-
 src/views/dialog/DialogDemo.vue                    |  1 +
 src/views/dialog/DialogDoc.vue                     |  2 +-
 src/views/display/DisplayDemo.vue                  |  1 +
 src/views/display/DisplayDoc.vue                   |  2 +-
 src/views/divider/DividerDemo.vue                  |  1 +
 src/views/divider/DividerDoc.vue                   |  2 +-
 src/views/dropdown/DropdownDemo.vue                |  2 +-
 src/views/dropdown/DropdownDoc.vue                 |  4 ++--
 src/views/editor/EditorDemo.vue                    |  1 +
 src/views/editor/EditorDoc.vue                     |  2 +-
 src/views/elevation/ElevationDemo.vue              |  1 +
 src/views/elevation/ElevationDoc.vue               |  2 +-
 src/views/fieldset/FieldsetDemo.vue                |  1 +
 src/views/fieldset/FieldsetDoc.vue                 |  2 +-
 src/views/fileupload/FileUploadDemo.vue            |  1 +
 src/views/fileupload/FileUploadDoc.vue             |  2 +-
 src/views/filterservice/FilterServiceDemo.vue      |  1 +
 src/views/filterservice/FilterServiceDoc.vue       |  2 +-
 src/views/floatlabel/FloatLabelDemo.vue            |  4 ++--
 src/views/formlayout/FormLayoutDemo.vue            |  2 +-
 src/views/formlayout/FormLayoutDoc.vue             |  2 +-
 src/views/fullcalendar/FullCalendarDemo.vue        |  1 +
 src/views/fullcalendar/FullCalendarDoc.vue         |  3 ++-
 src/views/grid/GridDemo.vue                        |  6 +++++-
 src/views/grid/GridDoc.vue                         | 14 +++++++++++++-
 src/views/inplace/InplaceDemo.vue                  |  1 +
 src/views/inplace/InplaceDoc.vue                   |  2 +-
 src/views/inputgroup/InputGroupDemo.vue            |  2 +-
 src/views/inputgroup/InputGroupDoc.vue             |  2 +-
 src/views/inputmask/InputMaskDemo.vue              |  2 +-
 src/views/inputmask/InputMaskDoc.vue               |  2 +-
 src/views/inputnumber/InputNumberDemo.vue          |  2 +-
 src/views/inputnumber/InputNumberDoc.vue           |  6 +++---
 src/views/inputswitch/InputSwitchDemo.vue          |  1 +
 src/views/inputswitch/InputSwitchDoc.vue           |  2 +-
 src/views/invalid/InvalidDemo.vue                  |  8 ++++----
 src/views/knob/KnobDemo.vue                        |  1 +
 src/views/knob/KnobDoc.vue                         |  2 +-
 src/views/listbox/ListboxDemo.vue                  |  2 +-
 src/views/listbox/ListboxDoc.vue                   |  2 +-
 src/views/megamenu/MegaMenuDemo.vue                |  1 +
 src/views/megamenu/MegaMenuDoc.vue                 |  2 +-
 src/views/menu/MenuDemo.vue                        |  1 +
 src/views/menu/MenuDoc.vue                         |  2 +-
 src/views/menubar/MenubarDemo.vue                  |  1 +
 src/views/menubar/MenubarDoc.vue                   |  2 +-
 src/views/message/MessageDemo.vue                  |  1 +
 src/views/message/MessageDoc.vue                   |  2 +-
 src/views/multiselect/MultiSelectDemo.vue          |  2 +-
 src/views/multiselect/MultiSelectDoc.vue           |  2 +-
 src/views/orderlist/OrderListDemo.vue              |  1 +
 src/views/orderlist/OrderListDoc.vue               |  2 +-
 .../organizationchart/OrganizationChartDemo.vue    |  1 +
 .../organizationchart/OrganizationChartDoc.vue     |  2 +-
 src/views/overlaypanel/OverlayPanelDemo.vue        |  1 +
 src/views/overlaypanel/OverlayPanelDoc.vue         |  2 +-
 src/views/paginator/PaginatorDemo.vue              |  1 +
 src/views/paginator/PaginatorDoc.vue               |  2 +-
 src/views/panel/PanelDemo.vue                      |  1 +
 src/views/panel/PanelDoc.vue                       |  2 +-
 src/views/panelmenu/PanelMenuDemo.vue              |  1 +
 src/views/panelmenu/PanelMenuDoc.vue               |  2 +-
 src/views/password/PasswordDemo.vue                |  2 +-
 src/views/password/PasswordDoc.vue                 |  2 +-
 src/views/picklist/PickListDemo.vue                |  1 +
 src/views/picklist/PickListDoc.vue                 |  2 +-
 src/views/progressbar/ProgressBarDemo.vue          |  1 +
 src/views/progressbar/ProgressBarDoc.vue           |  2 +-
 src/views/progressspinner/ProgressSpinnerDemo.vue  |  1 +
 src/views/progressspinner/ProgressSpinnerDoc.vue   |  2 +-
 src/views/radiobutton/RadioButtonDemo.vue          |  2 +-
 src/views/radiobutton/RadioButtonDoc.vue           |  2 +-
 src/views/rating/RatingDemo.vue                    |  1 +
 src/views/rating/RatingDoc.vue                     |  2 +-
 src/views/responsive/ResponsiveDemo.vue            |  4 +++-
 src/views/ripple/RippleDemo.vue                    |  1 +
 src/views/ripple/RippleDoc.vue                     |  2 +-
 src/views/scrollpanel/ScrollPanelDemo.vue          |  1 +
 src/views/scrollpanel/ScrollPanelDoc.vue           |  2 +-
 src/views/scrolltop/ScrollTopDemo.vue              |  1 +
 src/views/scrolltop/ScrollTopDoc.vue               |  2 +-
 src/views/selectbutton/SelectButtonDemo.vue        |  1 +
 src/views/selectbutton/SelectButtonDoc.vue         |  2 +-
 src/views/sidebar/SidebarDemo.vue                  |  1 +
 src/views/sidebar/SidebarDoc.vue                   |  2 +-
 src/views/skeleton/SkeletonDemo.vue                |  1 +
 src/views/skeleton/SkeletonDoc.vue                 |  2 +-
 src/views/slider/SliderDemo.vue                    |  2 +-
 src/views/slider/SliderDoc.vue                     |  2 +-
 src/views/spacing/SpacingDemo.vue                  |  1 +
 src/views/spacing/SpacingDoc.vue                   |  2 +-
 src/views/splitbutton/SplitButtonDemo.vue          |  1 +
 src/views/splitbutton/SplitButtonDoc.vue           |  2 +-
 src/views/splitter/SplitterDemo.vue                |  1 +
 src/views/splitter/SplitterDoc.vue                 |  2 +-
 src/views/steps/StepsDemo.vue                      |  1 +
 src/views/steps/StepsDoc.vue                       |  2 +-
 src/views/tabmenu/TabMenuDemo.vue                  |  1 +
 src/views/tabmenu/TabMenuDoc.vue                   |  2 +-
 src/views/tabview/TabViewDemo.vue                  |  1 +
 src/views/tabview/TabViewDoc.vue                   |  2 +-
 src/views/tag/TagDemo.vue                          |  1 +
 src/views/tag/TagDoc.vue                           |  2 +-
 src/views/terminal/TerminalDemo.vue                |  1 +
 src/views/terminal/TerminalDoc.vue                 |  2 +-
 src/views/text/TextDemo.vue                        |  1 +
 src/views/text/TextDoc.vue                         |  2 +-
 src/views/textarea/TextareaDemo.vue                |  2 +-
 src/views/textarea/TextareaDoc.vue                 |  2 +-
 src/views/tieredmenu/TieredMenuDemo.vue            |  1 +
 src/views/tieredmenu/TieredMenuDoc.vue             |  2 +-
 src/views/timeline/TimelineDemo.vue                |  1 +
 src/views/timeline/TimelineDoc.vue                 |  2 +-
 src/views/toast/ToastDemo.vue                      |  1 +
 src/views/toast/ToastDoc.vue                       |  2 +-
 src/views/togglebutton/ToggleButtonDemo.vue        |  1 +
 src/views/togglebutton/ToggleButtonDoc.vue         |  2 +-
 src/views/toolbar/ToolbarDemo.vue                  |  1 +
 src/views/toolbar/ToolbarDoc.vue                   |  2 +-
 src/views/tooltip/TooltipDemo.vue                  |  1 +
 src/views/tooltip/TooltipDoc.vue                   |  2 +-
 src/views/tree/TreeDemo.vue                        |  1 +
 src/views/tree/TreeDoc.vue                         |  2 +-
 src/views/tree/TreeFilterDemo.vue                  |  3 ++-
 src/views/tree/TreeLazyDemo.vue                    |  3 ++-
 src/views/tree/TreeSelectionDemo.vue               |  3 ++-
 src/views/tree/TreeTemplatingDemo.vue              |  3 ++-
 src/views/treetable/TreeTableColResizeDemo.vue     |  3 ++-
 src/views/treetable/TreeTableColToggleDemo.vue     |  3 ++-
 src/views/treetable/TreeTableDemo.vue              |  1 +
 src/views/treetable/TreeTableDoc.vue               |  2 +-
 src/views/treetable/TreeTableFilterDemo.vue        |  3 ++-
 src/views/treetable/TreeTableLazyDemo.vue          |  3 ++-
 src/views/treetable/TreeTablePaginatorDemo.vue     |  3 ++-
 src/views/treetable/TreeTableResponsiveDemo.vue    |  3 ++-
 src/views/treetable/TreeTableSelectionDemo.vue     |  3 ++-
 src/views/treetable/TreeTableSizeDemo.vue          |  3 ++-
 src/views/treetable/TreeTableSortDemo.vue          |  3 ++-
 src/views/treetable/TreeTableTemplatingDemo.vue    |  3 ++-
 .../tristatecheckbox/TriStateCheckboxDemo.vue      |  2 +-
 src/views/tristatecheckbox/TriStateCheckboxDoc.vue |  2 +-
 src/views/validation/VuelidateFormDemo.vue         |  5 +++--
 227 files changed, 308 insertions(+), 161 deletions(-)

diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index ec1f65c1f..cac69a0ef 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -78,7 +78,7 @@ export default {
                 tabs.push(
                     <TabPanel key={sourceType} header={this.sources[sourceType].tabName}>
                         <pre v-code><code>
-                            {this.sources[sourceType].content.replace('<\\/script>', '<\\/script>')}
+                            {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
                         </code></pre>
                     </TabPanel>
                 );
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 1e43731c2..1632dfbba 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -210,4 +210,17 @@
             justify-content: space-between;
         }
     }
+
+    .box {
+        background-color: var(--surface-e);
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        border-radius: 4px;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+    }
+
+    .box-stretched {
+        height: 100%;
+    }
 }
\ No newline at end of file
diff --git a/src/views/accordion/AccordionDemo.vue b/src/views/accordion/AccordionDemo.vue
index ff745bc9d..32d5c4210 100755
--- a/src/views/accordion/AccordionDemo.vue
+++ b/src/views/accordion/AccordionDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Accordion</h1>
                 <p>Accordion groups a collection of contents in tabs.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index 2c7c1e36f..78af0c644 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="AccordionDemo" :sources="sources">
+	<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Accordion from 'primevue/accordion';
diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
index a39ac7310..ba45b8d00 100755
--- a/src/views/autocomplete/AutoCompleteDemo.vue
+++ b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -5,7 +5,7 @@
                 <h1>AutoComplete</h1>
                 <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 32d60878f..c034017a3 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
diff --git a/src/views/avatar/AvatarDemo.vue b/src/views/avatar/AvatarDemo.vue
index 5874cb495..ac041cdd7 100644
--- a/src/views/avatar/AvatarDemo.vue
+++ b/src/views/avatar/AvatarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Avatar</h1>
                 <p>Avatar represents people using icons, labels and images.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 463f9dfdb..166882e08 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="AvatarDemo" :sources="sources">
+	<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
index 1cac61011..6ddddee58 100644
--- a/src/views/badge/BadgeDemo.vue
+++ b/src/views/badge/BadgeDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Badge</h1>
                 <p>Badge is a small status indicator for another element.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 0f5b3de9f..b973d1015 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BadgeDemo" :sources="sources">
+	<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
         <h5>Getting Started</h5>
         <p>Badge can either be used as a standalone component or as a directive.</p>
 
diff --git a/src/views/blockui/BlockUIDemo.vue b/src/views/blockui/BlockUIDemo.vue
index e00edd35c..be86ed1dd 100755
--- a/src/views/blockui/BlockUIDemo.vue
+++ b/src/views/blockui/BlockUIDemo.vue
@@ -5,6 +5,7 @@
                 <h1>BlockUI</h1>
                 <p>BlockUI can either block other components or the whole page.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index 94e0d0ec7..315967062 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BlockUIDemo" :sources="sources">
+	<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
diff --git a/src/views/breadcrumb/BreadcrumbDemo.vue b/src/views/breadcrumb/BreadcrumbDemo.vue
index 677c069fc..0cebc631c 100755
--- a/src/views/breadcrumb/BreadcrumbDemo.vue
+++ b/src/views/breadcrumb/BreadcrumbDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Breadcrumb</h1>
                 <p>Breadcrumb provides contextual information about page hierarchy.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index 2fa7789ca..23d482448 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="BreadcrumbDemo" :sources="sources">
+	<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 0c6201a6d..8ec64b25b 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Button</h1>
                 <p>Button is an extension to standard button element with icons and theming.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index b31430e0f..197694095 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ButtonDemo" :sources="sources">
+	<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
                 <h5>Import</h5>
 <pre v-code.script><code>
 import Button from 'primevue/button';
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 8d6e00350..2971452b7 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Calendar</h1>
                 <p>Calendar is an input component to select a date.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index f32d2062a..c66967e9a 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CalendarDemo" :sources="sources">
+	<AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Calendar from 'primevue/calendar';
diff --git a/src/views/card/CardDemo.vue b/src/views/card/CardDemo.vue
index 950fc7263..a0dc0ac8d 100755
--- a/src/views/card/CardDemo.vue
+++ b/src/views/card/CardDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Card</h1>
                 <p>Card is a flexible container component.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 7320dd1c0..3085a80ef 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CardDemo" :sources="sources">
+	<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Card from 'primevue/card';
diff --git a/src/views/carousel/CarouselDemo.vue b/src/views/carousel/CarouselDemo.vue
index cbd71faab..6c2914023 100755
--- a/src/views/carousel/CarouselDemo.vue
+++ b/src/views/carousel/CarouselDemo.vue
@@ -5,6 +5,7 @@
 				<h1>Carousel</h1>
 				<p>Carousel is a content slider featuring various customization options.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 5b48dc067..a5d43d955 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
diff --git a/src/views/cascadeselect/CascadeSelectDemo.vue b/src/views/cascadeselect/CascadeSelectDemo.vue
index 351327478..b1eeb30ff 100644
--- a/src/views/cascadeselect/CascadeSelectDemo.vue
+++ b/src/views/cascadeselect/CascadeSelectDemo.vue
@@ -5,7 +5,7 @@
                 <h1>CascadeSelect</h1>
                 <p>CascadeSelect displays a nested structure of options.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index 4b6945c09..7d2cd2a60 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="CascadeSelectDemo" :sources="sources">
+	<AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';
diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
index 5ee07096f..e2339e234 100755
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>BarChart</h1>
                 <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 545174ff2..217eae0fc 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/BarChartDemo.vue"/>
 </template>
 
 <script>
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
index e7569cbbd..ba326c228 100755
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Combo Chart</h1>
                 <p>Different chart types can be combined in the same graph.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index d753a33b8..a2394806c 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/ComboChartDemo.vue"/>
 </template>
 
 <script>
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index 158cbbc71..b11f2622a 100755
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>DoughnutChart</h1>
                 <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index 06d641e59..0126ce168 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/DoughnutChartDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
index ccfaa77c5..e97ff1a8f 100755
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Line Chart</h1>
                 <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index b555d07f6..78cec2e2e 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/LineChartDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index a1568dba3..306ce3cd5 100755
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Pie Chart</h1>
                 <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 282fa1126..e2e6d70ec 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PieChartDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index 3638831d0..dbdf04c86 100755
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Polar Area Chart</h1>
                 <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index b51075dbe..fa8b707ac 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/PolarAreaChartDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index 27fab4e23..868bfdc81 100755
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Radar Chart</h1>
                 <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index 903a85ad0..16ab87cac 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" github="chart/RadarChartDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index ae309e00b..77e351ff4 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Checkbox</h1>
                 <p>Checkbox is an extension to standard checkbox element with theming.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 9a65c262a..5adef1f06 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="CheckboxDemo" :sources="sources">
+    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
diff --git a/src/views/chip/ChipDemo.vue b/src/views/chip/ChipDemo.vue
index c30cf5596..a103025de 100644
--- a/src/views/chip/ChipDemo.vue
+++ b/src/views/chip/ChipDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Chip</h1>
                 <p>Chip represents entities using icons, labels and images.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index 4d4b075cf..77287311b 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChipDemo" :sources="sources">
+	<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Chip from 'primevue/chip';
diff --git a/src/views/chips/ChipsDemo.vue b/src/views/chips/ChipsDemo.vue
index b2989f39a..f39ae2bfb 100755
--- a/src/views/chips/ChipsDemo.vue
+++ b/src/views/chips/ChipsDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Chips</h1>
                 <p>Chips is used to enter multiple values on an input field.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation p-fluid">
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index 42df5a959..94f99884a 100755
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChipsDemo" :sources="sources">
+	<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Chips from 'primevue/chips';
diff --git a/src/views/colorpicker/ColorPickerDemo.vue b/src/views/colorpicker/ColorPickerDemo.vue
index 9b71e9265..10f49135b 100755
--- a/src/views/colorpicker/ColorPickerDemo.vue
+++ b/src/views/colorpicker/ColorPickerDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ColorPicker</h1>
                 <p>ColorPicker is an input component to select a color.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index 2b820eff9..b785711c5 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles">
+	<AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';
diff --git a/src/views/confirmdialog/ConfirmDialogDemo.vue b/src/views/confirmdialog/ConfirmDialogDemo.vue
index ef5bd6dc2..01f81d484 100644
--- a/src/views/confirmdialog/ConfirmDialogDemo.vue
+++ b/src/views/confirmdialog/ConfirmDialogDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ConfirmDialog</h1>
                 <p>ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index 6075fc324..1a5c81c43 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ConfirmDialogDemo" :sources="sources">
+	<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
             instance is created.</p>
diff --git a/src/views/confirmpopup/ConfirmPopupDemo.vue b/src/views/confirmpopup/ConfirmPopupDemo.vue
index 017d74aee..b7ceb1c17 100644
--- a/src/views/confirmpopup/ConfirmPopupDemo.vue
+++ b/src/views/confirmpopup/ConfirmPopupDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ConfirmPopup</h1>
                 <p>ConfirmPopup displays a confirmation overlay displayed relatively to its target.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index 5292c90da..0be829ffc 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ConfirmPopupDemo" :sources="sources">
+	<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
         <h5>ConfirmationService</h5>
         <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
             instance is created.</p>
diff --git a/src/views/contextmenu/ContextMenuDemo.vue b/src/views/contextmenu/ContextMenuDemo.vue
index d8bb60d89..56cef2285 100755
--- a/src/views/contextmenu/ContextMenuDemo.vue
+++ b/src/views/contextmenu/ContextMenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ContextMenu</h1>
                 <p>ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the with context menu support.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index 6b95b47ce..7b9e265f9 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ContextMenuDemo" :sources="sources">
+	<AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
index 079e60142..b488c4627 100755
--- a/src/views/datatable/DataTableBasicDemo.vue
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Basic</span></h1>
 				<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
diff --git a/src/views/datatable/DataTableBasicDoc.vue b/src/views/datatable/DataTableBasicDoc.vue
index 42742a075..a22853b9e 100644
--- a/src/views/datatable/DataTableBasicDoc.vue
+++ b/src/views/datatable/DataTableBasicDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index 40db8ad15..64ed39882 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>ColumnGroup</span></h1>
 				<p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -58,7 +59,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColGroupDemo" :sources="sources" />
+        <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index 71d143486..3514e8512 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -6,6 +6,7 @@
 				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -30,7 +31,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index a7d7ecc3c..1ae8650e3 100755
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Column Toggle</span></h1>
 				<p>MultiSelect component can be used to implement column toggle functionality.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -22,7 +23,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 52ec90141..9bda2ab34 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>ContextMenu</span></h1>
 				<p>CDataTable has exclusive integration with ContextMenu.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             <ContextMenu :model="menuModel" ref="cm" />
 		</div>
 
-        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index f5e11b859..1e50dd93a 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Crud</span></h1>
 				<p>This sample demonstrates a CRUD implementation using various PrimeVue components.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -158,7 +159,7 @@
             </Dialog>
 		</div>
 
-       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" />
+       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 183fed211..40c0416ad 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable</h1>
 				<p>DataTable displays data in tabular format.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 55bd1acb3..93d32ffdc 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content-section documentation">
-        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
             <h5>Import</h5>
 			<pre v-code.script><code>
 import DataTable from 'primevue/datatable';
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index f83eb6dca..adc3f462e 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Dynamic Columns</span></h1>
 				<p>Columns can be defined dynamically using the v-for directive.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -15,7 +16,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
                     
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index ed24655b8..b3dac8c89 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -7,6 +7,7 @@
                     so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
                 </p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation p-fluid">
@@ -92,7 +93,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index 358108e6e..2a2d233db 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Export</span></h1>
 				<p>DataTable can export its data to CSV format.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -23,7 +24,7 @@
             </div>
 		</div>
         
-        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index a9c97a437..729312546 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Filter</span></h1>
 				<p>Filtering feature provides advanced and flexible options to query the data.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -208,7 +209,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
+        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableFlexScrollDemo.vue b/src/views/datatable/DataTableFlexScrollDemo.vue
index 9a9e398ae..a1b0ccd06 100644
--- a/src/views/datatable/DataTableFlexScrollDemo.vue
+++ b/src/views/datatable/DataTableFlexScrollDemo.vue
@@ -1,5 +1,8 @@
 <template>
 	<div>
+        <div class="content-section introduction">
+            <AppDemoActions />
+		</div>
         <div class="content-section implementation">
             <div class="card" style="height: calc(100vh - 143px)">
                 <DataTable :value="customers" :scrollable="true" scrollHeight="flex">
@@ -11,7 +14,7 @@
             </div>
         </div>
 
-        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />    
+        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />    
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index 225b9aeff..b74fd3a21 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>GridLines</span></h1>
 				<p>Enabling <b>showGridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 1cddf8d9b..150e572f4 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -8,6 +8,7 @@
                     so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
                 </p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -39,7 +40,7 @@
             </div>
 		</div>
  
-        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" />
+        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 91df1575c..62a34d145 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Paginator</span></h1>
 				<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -27,7 +28,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
+        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
                   
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index e4c1f379b..23024207a 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Reorder</span></h1>
 				<p>Order of the columns and rows can be changed using drag and drop.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -16,7 +17,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 22f267721..60c6c3dbb 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -6,6 +6,7 @@
 				<p>DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens 
                     and second one is defining a breakpoint to display the cells of a row as stacked.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -54,7 +55,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index 5a16fa007..623b21996 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Row Expansion</span></h1>
 				<p>A row can be expanded to display additional content.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -69,7 +70,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" />
+        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
             
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index fed2cdc1b..41d8fbc9c 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Row Group</span></h1>
 				<p>Rows can either be grouped by a separate grouping row or using rowspan.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -105,7 +106,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
+        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index e3c2490c6..21efe5720 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Scroll</span></h1>
 				<p>Data scrolling is available horizontally, vertically or both with support for frozen rows and columns.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -125,7 +126,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" />
+        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index 50766ae97..6051110b3 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Selection</span></h1>
 				<p>DataTable provides single and multiple selection modes based on row click or using radio button and checkbox elements.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -81,7 +82,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
                   
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index 7386f640c..2cfbcc765 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Size</span></h1>
 				<p>In addition to a regular table, alternatives with alternative sizes are available.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -45,7 +46,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
     
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index bfa531658..9ae50901e 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Sort</span></h1>
 				<p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and used with metaKey.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -70,7 +71,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index e5a90e773..c90d2faf6 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>State</span></h1>
 				<p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -127,7 +128,7 @@
             </div>
 		</div>
               
-        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
+        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index def26e555..249381bc4 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Striped Rows</span></h1>
 				<p>Adding <i>stripedRows</i> displays rows with alternating colors.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -18,7 +19,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 0e84e74b7..0a72f5422 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Style</span></h1>
 				<p>Certain rows or cells can easily be styled based on conditions.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -24,7 +25,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 63efedd17..0e98580fc 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataTable <span>Templating</span></h1>
 				<p>Custom content at header, body and footer sections are supported via templating.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
@@ -44,7 +45,7 @@
             </div>
 		</div>
 
-        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
 
 	</div>
 </template>
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 3d54901ff..6dbbec4e1 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -5,6 +5,7 @@
 				<h1>DataView</h1>
 				<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
 			</div>
+			<AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 1150cf306..caf844e65 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
+	<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
         <h5>Import</h5>
 
 <pre v-code.script><code>
diff --git a/src/views/deferredcontent/DeferredContentDemo.vue b/src/views/deferredcontent/DeferredContentDemo.vue
index 98e88681e..edd5cf4f0 100755
--- a/src/views/deferredcontent/DeferredContentDemo.vue
+++ b/src/views/deferredcontent/DeferredContentDemo.vue
@@ -5,6 +5,7 @@
                 <h1>DeferredContent</h1>
                 <p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index d264ef5d4..8d9562012 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 2c75efff1..37dc1ec19 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Dialog</h1>
                 <p>Dialog is a container to display content in an overlay window.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 0347a576f..172792328 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DialogDemo" :sources="sources">
+	<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Dialog from 'primevue/dialog';
diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue
index c2c4dd85f..8cbfd7292 100644
--- a/src/views/display/DisplayDemo.vue
+++ b/src/views/display/DisplayDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Display</h1>
                 <p>Efficiently configure the display of the component with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> display utilities.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
index b9666d9af..e8784b60a 100644
--- a/src/views/display/DisplayDoc.vue
+++ b/src/views/display/DisplayDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DisplayDemo" :sources="sources">
+	<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
         <h5>Getting Started</h5>
         <p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
 
diff --git a/src/views/divider/DividerDemo.vue b/src/views/divider/DividerDemo.vue
index 7f700e415..5334f70e6 100644
--- a/src/views/divider/DividerDemo.vue
+++ b/src/views/divider/DividerDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Divider</h1>
                 <p>Divider is used to separate contents.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue
index b34cbd81c..c14604bca 100644
--- a/src/views/divider/DividerDoc.vue
+++ b/src/views/divider/DividerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DividerDemo" :sources="sources">
+	<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Divider from 'primevue/divider';
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index 4b68e44e3..dcc53eb0f 100755
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Dropdown</h1>
                 <p>Dropdown is used to select an item from a list of options.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 3d5686d3e..693af00ff 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="DropdownDemo" :sources="sources">
+	<AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
@@ -577,7 +577,7 @@ export default {
 </style>`
                 },
                 'composition-api': {
-                    tabName: 'Options API Source',
+                    tabName: 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/editor/EditorDemo.vue b/src/views/editor/EditorDemo.vue
index b867b2bfd..9c477d122 100755
--- a/src/views/editor/EditorDemo.vue
+++ b/src/views/editor/EditorDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Editor</h1>
                 <p>Editor is rich text editor component based on Quill.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 9b97e25ee..9ac49646f 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor">
+	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor" github="editor/EditorDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Editor from 'primevue/editor';
diff --git a/src/views/elevation/ElevationDemo.vue b/src/views/elevation/ElevationDemo.vue
index 7852f146c..1f4ceffcb 100644
--- a/src/views/elevation/ElevationDemo.vue
+++ b/src/views/elevation/ElevationDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Elevation</h1>
                 <p>Elevation is an add-on utility of <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> and used to specify the separation between surfaces and elements along the z-axis.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index 36c2d6fd9..5c4020a44 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ElevationDemo" :sources="sources">
+	<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
 		<h5>Getting Started</h5>
 		<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
 <pre v-code><code>
diff --git a/src/views/fieldset/FieldsetDemo.vue b/src/views/fieldset/FieldsetDemo.vue
index 316175e19..0cdfc027a 100755
--- a/src/views/fieldset/FieldsetDemo.vue
+++ b/src/views/fieldset/FieldsetDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Fieldset</h1>
                 <p>Fieldset is a grouping component with the optional content toggle feature.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index bc4007c2d..a94f1d02d 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FieldsetDemo" :sources="sources">
+	<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
diff --git a/src/views/fileupload/FileUploadDemo.vue b/src/views/fileupload/FileUploadDemo.vue
index 3bef0649c..4a13a5946 100755
--- a/src/views/fileupload/FileUploadDemo.vue
+++ b/src/views/fileupload/FileUploadDemo.vue
@@ -5,6 +5,7 @@
                 <h1>FileUpload</h1>
                 <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index 6dd125d07..9c4674511 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FileUploadDemo" :sources="sources">
+	<AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
diff --git a/src/views/filterservice/FilterServiceDemo.vue b/src/views/filterservice/FilterServiceDemo.vue
index 5325f222c..ebccd84c7 100644
--- a/src/views/filterservice/FilterServiceDemo.vue
+++ b/src/views/filterservice/FilterServiceDemo.vue
@@ -5,6 +5,7 @@
                 <h1>FilterService</h1>
                 <p>FilterService is a helper utility to filter collections against constraints.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue
index cd2d7b61f..073a8e09e 100644
--- a/src/views/filterservice/FilterServiceDoc.vue
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
+	<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import &#123;FilterService&#125; from 'primevue/api';
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index cc142de07..3a65a901f 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Float Label</h1>
                 <p>All input text components support floating labels.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -107,7 +107,7 @@
             </div>
         </div>
 
-        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
+        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="floatlabel/FloatLabelDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/formlayout/FormLayoutDemo.vue b/src/views/formlayout/FormLayoutDemo.vue
index 2ac4c8a0c..56c7bccbf 100644
--- a/src/views/formlayout/FormLayoutDemo.vue
+++ b/src/views/formlayout/FormLayoutDemo.vue
@@ -6,7 +6,7 @@
                 <p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
                 a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index 4c2822649..92cbf5e9f 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -1,5 +1,5 @@
 <template>	
-    <AppDoc name="FormLayoutDemo" :sources="sources">
+    <AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue">
         <h5>Getting Started</h5>
 		<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
 <pre v-code><code>
diff --git a/src/views/fullcalendar/FullCalendarDemo.vue b/src/views/fullcalendar/FullCalendarDemo.vue
index a475feb35..34a78c669 100755
--- a/src/views/fullcalendar/FullCalendarDemo.vue
+++ b/src/views/fullcalendar/FullCalendarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>FullCalendar</h1>
                 <p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index 941ac177e..0bb876fc9 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -1,5 +1,6 @@
 <template>
-	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}" component="FullCalendar">
+	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" github="fullcalendar/FullCalendarDemo.vue"
+        :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}" component="FullCalendar">
         <h5>Import</h5>
 <pre v-code.script><code>
 import FullCalendar from 'primevue/fullcalendar';
diff --git a/src/views/grid/GridDemo.vue b/src/views/grid/GridDemo.vue
index 82299bcfa..40fccf581 100755
--- a/src/views/grid/GridDemo.vue
+++ b/src/views/grid/GridDemo.vue
@@ -1,5 +1,9 @@
 <template>
     <div>
+        <div class="content-section introduction">
+            <AppDemoActions />
+        </div>
+
         <div class="content-section implementation flexgrid-demo">
             <h1>Grid System</h1>
             <p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
@@ -400,7 +404,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .flexgrid-demo {
     .box {
         background-color: var(--surface-e);
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index 5549dc6dd..0a9f7d643 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="GridDemo" :sources="sources">
+	<AppDoc name="GridDemo" :sources="sources" github="grid/GridDemo.vue">
 		<h5>Getting Started</h5>
 		<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
 			a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
@@ -331,6 +331,18 @@
 &lt;/div&gt;
 
 </code></pre>
+
+        <div class="p-grid p-nogutter">
+            <div class="p-col">
+                <div class="box">1</div>
+            </div>
+            <div class="p-col p-nogutter">
+                <div class="box">2</div>
+            </div>
+            <div class="p-col">
+                <div class="box">3</div>
+            </div>
+        </div>
 	</AppDoc>
 </template>
 
diff --git a/src/views/inplace/InplaceDemo.vue b/src/views/inplace/InplaceDemo.vue
index 30354cfc0..dcd322971 100755
--- a/src/views/inplace/InplaceDemo.vue
+++ b/src/views/inplace/InplaceDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Inplace</h1>
                 <p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index 8ccf0a0ec..f8f9922fe 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" >
+	<AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
diff --git a/src/views/inputgroup/InputGroupDemo.vue b/src/views/inputgroup/InputGroupDemo.vue
index 3c99f587e..6b146d294 100755
--- a/src/views/inputgroup/InputGroupDemo.vue
+++ b/src/views/inputgroup/InputGroupDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputGroup</h1>
                 <p>Text, icon, buttons and other content can be grouped next to an input.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index 560dffa39..3419da869 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InputGroupDemo" :sources="sources" />
+	<AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
 </template>
 
 <script>
diff --git a/src/views/inputmask/InputMaskDemo.vue b/src/views/inputmask/InputMaskDemo.vue
index 001fe5ba7..0948b6f8b 100755
--- a/src/views/inputmask/InputMaskDemo.vue
+++ b/src/views/inputmask/InputMaskDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputMask</h1>
                 <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index cff9c42d0..4ad724f24 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputMaskDemo" :sources="sources">
+    <AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import InputMask from 'primevue/inputmask';
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
index 513becfe9..28847a338 100755
--- a/src/views/inputnumber/InputNumberDemo.vue
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -5,7 +5,7 @@
                 <h1>InputNumber</h1>
                 <p>InputNumber is an input component to provide numerical input.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 81b7f2704..ce4873b45 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InputNumberDemo" :sources="sources">
+	<AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import InputNumber from 'primevue/inputnumber';
@@ -360,7 +360,7 @@ export default {
         return {
             sources: {
                 'options-api': {
-                    tabName : 'Source',
+                    tabName : 'Options API Source',
                     content: `
 <template>
     <div>
@@ -497,7 +497,7 @@ export default {
 `               
                 },
                 'composition-api': {
-                    tabName : 'Composition API',
+                    tabName : 'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/inputswitch/InputSwitchDemo.vue b/src/views/inputswitch/InputSwitchDemo.vue
index fac1ff037..32f00ae3d 100755
--- a/src/views/inputswitch/InputSwitchDemo.vue
+++ b/src/views/inputswitch/InputSwitchDemo.vue
@@ -5,6 +5,7 @@
                 <h1>InputSwitch</h1>
                 <p>InputSwitch is used to select a boolean value.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index d253b7512..7b3e249ab 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="InputSwitchDemo" :sources="sources">
+	<AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import InputSwitch from 'primevue/inputswitch';
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index 06d0a7d29..b8c35b58a 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Invalid State</h1>
                 <p>All form components have an invalid state style to display the validation errors.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -49,7 +49,7 @@
             </div>
         </div>
 
-        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
+        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="invalid/InvalidDemo.vue" />
     </div>
 </template>
 
@@ -157,7 +157,7 @@ export default {
             ],
             sources: {
                 'options-api': {
-                    tabName :'Source',
+                    tabName :'Options API Source',
                     content: `
 <template>
     <div>
@@ -330,7 +330,7 @@ export default {
 `
                 },
                 'composition-api': {
-                    tabName :'Composition API',
+                    tabName :'Composition API Source',
                     content: `
 <template>
     <div>
diff --git a/src/views/knob/KnobDemo.vue b/src/views/knob/KnobDemo.vue
index cebeb40ff..6705c93db 100644
--- a/src/views/knob/KnobDemo.vue
+++ b/src/views/knob/KnobDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Knob</h1>
                 <p>Knob is a form component to define number inputs with a dial.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index 6b4f4b79e..0df83ab07 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="KnobDemo" :sources="sources">
+	<AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Knob from 'primevue/knob';
diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index 7cff1b09b..b0960f4be 100755
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Listbox</h1>
                 <p>Listbox is used to select one or more values from a list of items.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 4407a4431..fa6c781c6 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ListboxDemo" :sources="sources">
+	<AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Listbox from 'primevue/listbox';
diff --git a/src/views/megamenu/MegaMenuDemo.vue b/src/views/megamenu/MegaMenuDemo.vue
index c6ad9b07d..152648c03 100755
--- a/src/views/megamenu/MegaMenuDemo.vue
+++ b/src/views/megamenu/MegaMenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>MegaMenu</h1>
                 <p>MegaMenu is navigation component that displays submenus together.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index b00455c66..933764ab8 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="MegaMenuDemo" :sources="sources">
+	<AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import MegaMenu from 'primevue/megamenu';
diff --git a/src/views/menu/MenuDemo.vue b/src/views/menu/MenuDemo.vue
index 06534c7b4..3ffe5271a 100755
--- a/src/views/menu/MenuDemo.vue
+++ b/src/views/menu/MenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Menu</h1>
                 <p>Menu is a navigation / command component that supports dynamic and static positioning.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index 1bcb77885..bde3cad8c 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="MenuDemo" :sources="sources">
+	<AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Menu from 'primevue/menu';
diff --git a/src/views/menubar/MenubarDemo.vue b/src/views/menubar/MenubarDemo.vue
index f9d221389..8b7bf35ae 100755
--- a/src/views/menubar/MenubarDemo.vue
+++ b/src/views/menubar/MenubarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Menubar</h1>
                 <p>Menubar is a horizontal menu component.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 00c8cd58a..aa4a75fbb 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="MenubarDemo" :sources="sources">
+	<AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Menubar from 'primevue/menubar';
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index 4529b7c4f..74a4f3a0b 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Message</h1>
                 <p>Messages is used to display inline messages with various severities.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 0ac70a694..97043d698 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="MessageDemo" :sources="sources">
+	<AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Message from 'primevue/message';
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 9a54e3eb2..9096296c5 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -5,7 +5,7 @@
                 <h1>MultiSelect</h1>
                 <p>MultiSelect is used to multiple values from a list of options.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 85ccba726..44193dedf 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="MultiSelectDemo" :sources="sources">
+	<AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import MultiSelect from 'primevue/multiselect';
diff --git a/src/views/orderlist/OrderListDemo.vue b/src/views/orderlist/OrderListDemo.vue
index c9bdcb3a3..ee96f2df8 100755
--- a/src/views/orderlist/OrderListDemo.vue
+++ b/src/views/orderlist/OrderListDemo.vue
@@ -5,6 +5,7 @@
                 <h1>OrderList</h1>
                 <p>OrderList is used to managed the order of a collection.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index a55f6267d..bb3cfde64 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import OrderList from 'primevue/orderlist';
diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue
index d00954af2..2329cba11 100755
--- a/src/views/organizationchart/OrganizationChartDemo.vue
+++ b/src/views/organizationchart/OrganizationChartDemo.vue
@@ -5,6 +5,7 @@
                 <h1>OrganizationChart</h1>
                 <p>OrganizationChart visualizes hierarchical organization data.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index a9a512a3b..904cef9df 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OrganizationChartDemo" :sources="sources">
+	<AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import OrganizationChart from 'primevue/organizationchart';
diff --git a/src/views/overlaypanel/OverlayPanelDemo.vue b/src/views/overlaypanel/OverlayPanelDemo.vue
index 79da8be9a..a61e49113 100755
--- a/src/views/overlaypanel/OverlayPanelDemo.vue
+++ b/src/views/overlaypanel/OverlayPanelDemo.vue
@@ -5,6 +5,7 @@
                 <h1>OverlayPanel</h1>
                 <p>OverlayPanel is a container component positioned as connected to its target.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 0df0e6064..e9f3cdc50 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';
diff --git a/src/views/paginator/PaginatorDemo.vue b/src/views/paginator/PaginatorDemo.vue
index adb808baf..fef00b906 100755
--- a/src/views/paginator/PaginatorDemo.vue
+++ b/src/views/paginator/PaginatorDemo.vue
@@ -5,6 +5,7 @@
 				<h1>Paginator</h1>
 				<p>Paginator is a generic component to display content in paged format.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
 		<div class="content-section implementation">
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index 6edb5007c..03165d06a 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="PaginatorDemo" :sources="sources">
+    <AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Paginator from 'primevue/paginator';
diff --git a/src/views/panel/PanelDemo.vue b/src/views/panel/PanelDemo.vue
index 38af7041e..2cec71fb1 100755
--- a/src/views/panel/PanelDemo.vue
+++ b/src/views/panel/PanelDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Panel</h1>
                 <p>Panel is a container with the optional content toggle feature.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index 3a5134e0d..a1d6f310a 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="PanelDemo" :sources="sources">
+	<AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Panel from 'primevue/panel';
diff --git a/src/views/panelmenu/PanelMenuDemo.vue b/src/views/panelmenu/PanelMenuDemo.vue
index b9d748d5b..5bab055d4 100755
--- a/src/views/panelmenu/PanelMenuDemo.vue
+++ b/src/views/panelmenu/PanelMenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>PanelMenu</h1>
                 <p>PanelMenu is a hybrid of Accordion and Tree components.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 3bae00003..bb508ffae 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="PanelMenuDemo" :sources="sources">
+	<AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import PanelMenu from 'primevue/panelmenu';
diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue
index ce419bd0b..799344d9e 100755
--- a/src/views/password/PasswordDemo.vue
+++ b/src/views/password/PasswordDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Password</h1>
                 <p>Password displays strength indicator for password fields.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 6400a04db..a37042cef 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="PasswordDemo" :sources="sources">
+	<AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Password from 'primevue/password';
diff --git a/src/views/picklist/PickListDemo.vue b/src/views/picklist/PickListDemo.vue
index 8b011704e..150f5ca1f 100755
--- a/src/views/picklist/PickListDemo.vue
+++ b/src/views/picklist/PickListDemo.vue
@@ -5,6 +5,7 @@
                 <h1>PickList</h1>
                 <p>PickList is used to reorder items between different lists.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 70dd5e001..7146a6fcf 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
+	<AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import PickList from 'primevue/picklist';
diff --git a/src/views/progressbar/ProgressBarDemo.vue b/src/views/progressbar/ProgressBarDemo.vue
index e71b68b94..c368051e8 100755
--- a/src/views/progressbar/ProgressBarDemo.vue
+++ b/src/views/progressbar/ProgressBarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ProgressBar</h1>
                 <p>ProgressBar is a process status indicator.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 49e6fd9c5..0be52ef70 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ProgressBarDemo" :sources="sources">
+	<AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ProgressBar from 'primevue/progressbar';
diff --git a/src/views/progressspinner/ProgressSpinnerDemo.vue b/src/views/progressspinner/ProgressSpinnerDemo.vue
index b57206876..b2d8664c4 100755
--- a/src/views/progressspinner/ProgressSpinnerDemo.vue
+++ b/src/views/progressspinner/ProgressSpinnerDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ProgressSpinner</h1>
                 <p>ProgressSpinner is a process status indicator.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 31b25e50e..bbb03c5b1 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ProgressSpinnerDemo" :sources="sources">
+	<AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ProgressSpinner from 'primevue/progressspinner';
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 496674630..8294e8f6f 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -5,7 +5,7 @@
                 <h1>RadioButton</h1>
                 <p>RadioButton is an extension to standard radio button element with theming.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 200a824d2..2539d418f 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="RadioButtonDemo" :sources="sources">
+	<AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import RadioButton from 'primevue/radiobutton';
diff --git a/src/views/rating/RatingDemo.vue b/src/views/rating/RatingDemo.vue
index 2f6e0e7fe..d02bee314 100755
--- a/src/views/rating/RatingDemo.vue
+++ b/src/views/rating/RatingDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Rating</h1>
                 <p>Rating component is a star based selection input.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index 0913afd8b..d52833061 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="RatingDemo" :sources="sources">
+	<AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Rating from 'primevue/rating';
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index b4b14d938..2c5afc543 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Responsive Design</h1>
                 <p>PrimeVue components are optimized for different screen sizes.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -516,7 +517,8 @@
             </div>
         </div>
 
-        <AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['customers-large', 'countries', 'products-small']"></AppDoc>
+        <AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" 
+            :data="['customers-large', 'countries', 'products-small']" github="responsive/ResponsiveDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue
index 268d461f1..9685bf161 100644
--- a/src/views/ripple/RippleDemo.vue
+++ b/src/views/ripple/RippleDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Ripple</h1>
                 <p>Ripple directive adds ripple effect to the host element.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 431307d16..6307920a5 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="RippleDemo" :sources="sources">
+	<AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
         <h5>Getting Started</h5>
         <h5>Ripple</h5>
         <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index bbe830c02..4acd3a7fc 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ScrollPanel</h1>
                 <p>ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index a4e2447f6..a45f9dbb4 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ScrollPanelDemo" :sources="sources">
+	<AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ScrollPanel from 'primevue/scrollpanel';
diff --git a/src/views/scrolltop/ScrollTopDemo.vue b/src/views/scrolltop/ScrollTopDemo.vue
index 37b2f3721..c6ddaeaf9 100644
--- a/src/views/scrolltop/ScrollTopDemo.vue
+++ b/src/views/scrolltop/ScrollTopDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ScrollTop</h1>
                 <p>ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index af6bb374e..4b5cdfea2 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ScrollTopDemo" :sources="sources">
+	<AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import ScrollTop from 'primevue/scrolltop';
diff --git a/src/views/selectbutton/SelectButtonDemo.vue b/src/views/selectbutton/SelectButtonDemo.vue
index 6ba59f977..796047322 100755
--- a/src/views/selectbutton/SelectButtonDemo.vue
+++ b/src/views/selectbutton/SelectButtonDemo.vue
@@ -5,6 +5,7 @@
                 <h1>SelectButton</h1>
                 <p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 840ac5e15..67e0bdb38 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SelectButtonDemo" :sources="sources">
+	<AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import SelectButton from 'primevue/selectbutton';
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index a2f2b3e3d..63f546fa5 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/src/views/sidebar/SidebarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Sidebar</h1>
                 <p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index dcffee641..942e186d9 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SidebarDemo" :sources="sources">
+	<AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue" >
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Sidebar from 'primevue/sidebar';
diff --git a/src/views/skeleton/SkeletonDemo.vue b/src/views/skeleton/SkeletonDemo.vue
index c15069084..86dfe7564 100644
--- a/src/views/skeleton/SkeletonDemo.vue
+++ b/src/views/skeleton/SkeletonDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Skeleton</h1>
                 <p>Skeleton is a placeholder to display instead of the actual content.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index b99cde093..02837bc26 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SkeletonDemo" :sources="sources">
+	<AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Skeleton from 'primevue/skeleton';
diff --git a/src/views/slider/SliderDemo.vue b/src/views/slider/SliderDemo.vue
index 0c0fdc2f8..514aa1599 100755
--- a/src/views/slider/SliderDemo.vue
+++ b/src/views/slider/SliderDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Slider</h1>
                 <p>Slider is an input component to provide a numerical input.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index 5424548a0..0e9a39fea 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SliderDemo" :sources="sources">
+	<AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Slider from 'primevue/slider';
diff --git a/src/views/spacing/SpacingDemo.vue b/src/views/spacing/SpacingDemo.vue
index a8eaa9714..963a37c77 100644
--- a/src/views/spacing/SpacingDemo.vue
+++ b/src/views/spacing/SpacingDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Spacing</h1>
                 <p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 44bbbe03d..689c1c597 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SpacingDemo" :sources="sources">
+	<AppDoc name="SpacingDemo" :sources="sources" github="spacing/SpacingDemo.vue" >
         <h5>Getting Started</h5>
         <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
         values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
index ed5aadfc0..a4ff50d72 100755
--- a/src/views/splitbutton/SplitButtonDemo.vue
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -5,6 +5,7 @@
                 <h1>SplitButton</h1>
                 <p>SplitButton groups a set of commands in an overlay with a default command.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 9a942e4a6..c52c966ed 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SplitButtonDemo" :sources="sources">
+	<AppDoc name="SplitButtonDemo" :sources="sources" github="splitbutton/SplitButtonDemo.vue" >
 		<h5>Import</h5>
 <pre v-code.script><code>
 import SplitButton from 'primevue/splitbutton';
diff --git a/src/views/splitter/SplitterDemo.vue b/src/views/splitter/SplitterDemo.vue
index a400575c7..6a07ae519 100644
--- a/src/views/splitter/SplitterDemo.vue
+++ b/src/views/splitter/SplitterDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Splitter</h1>
                 <p>Splitter is utilized to separate and resize panels.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index d0bd3b304..49f501a13 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="SplitterDemo" :sources="sources">
+	<AppDoc name="SplitterDemo" :sources="sources" github="splitter/SplitterDemo.vue" >
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Splitter from 'primevue/splitter';
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index c8a8143de..ecc6203a1 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Steps</h1>
                 <p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index f9c75b07a..997f3662a 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages">
+    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages" github="steps/StepsDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Steps from 'primevue/steps';
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 952bd6490..46b1223ec 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TabMenu</h1>
                 <p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 33d5bef78..07ac024bf 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages">
+	<AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages" github="tabmenu/TabMenuDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import TabMenu from 'primevue/tabmenu';
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index 10faf7353..3eb4e391f 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TabView</h1>
                 <p>TabView is a container component to group content with tabs.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 1d29d8e7c..2a7604e9e 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TabViewDemo" :sources="sources">
+	<AppDoc name="TabViewDemo" :sources="sources" github="tabview/TabViewDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import TabView from 'primevue/tabview';
diff --git a/src/views/tag/TagDemo.vue b/src/views/tag/TagDemo.vue
index e9d5b7e63..583579ef3 100644
--- a/src/views/tag/TagDemo.vue
+++ b/src/views/tag/TagDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tag</h1>
                 <p>Tag component is used to categorize content.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index dab7414b4..74cbf0abf 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TagDemo" :sources="sources">
+	<AppDoc name="TagDemo" :sources="sources" github="tag/TagDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Tag from 'primevue/tag';
diff --git a/src/views/terminal/TerminalDemo.vue b/src/views/terminal/TerminalDemo.vue
index 3bf75eee0..e0977d475 100755
--- a/src/views/terminal/TerminalDemo.vue
+++ b/src/views/terminal/TerminalDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Terminal</h1>
                 <p>Terminal is a text based user interface.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index e5ffc1883..ff921754c 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TerminalDemo" :sources="sources">
+	<AppDoc name="TerminalDemo" :sources="sources" github="terminal/TerminalDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Terminal from 'primevue/terminal';
diff --git a/src/views/text/TextDemo.vue b/src/views/text/TextDemo.vue
index ff8df27c4..afbf77258 100644
--- a/src/views/text/TextDemo.vue
+++ b/src/views/text/TextDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Text</h1>
                 <p>Manage the alignment and the styling of a text with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> text utilities.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index f0572a746..711e6f40e 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TextDemo" :sources="sources">
+	<AppDoc name="TextDemo" :sources="sources" github="text/TextDemo.vue">
         <h5>Getting Started</h5>
         <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
 
diff --git a/src/views/textarea/TextareaDemo.vue b/src/views/textarea/TextareaDemo.vue
index a84b2c72a..723b393af 100755
--- a/src/views/textarea/TextareaDemo.vue
+++ b/src/views/textarea/TextareaDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Textarea</h1>
                 <p>Textarea is a multi-line text input element.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index 6c671dad3..716d445ce 100755
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TextareaDemo" :sources="sources">
+	<AppDoc name="TextareaDemo" :sources="sources" github="textarea/TextareaDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Textarea from 'primevue/textarea';
diff --git a/src/views/tieredmenu/TieredMenuDemo.vue b/src/views/tieredmenu/TieredMenuDemo.vue
index f7de7894d..85c6663c7 100755
--- a/src/views/tieredmenu/TieredMenuDemo.vue
+++ b/src/views/tieredmenu/TieredMenuDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TieredMenu</h1>
                 <p>TieredMenu displays submenus in nested overlays.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index ad98c2b42..0f5a179ce 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TieredMenuDemo" :sources="sources">
+	<AppDoc name="TieredMenuDemo" :sources="sources" github="tieredmenu/TieredMenuDemo.vue">
         <h5>Import</h5>
 <pre v-code.script><code>
 import TieredMenu from 'primevue/tieredmenu';
diff --git a/src/views/timeline/TimelineDemo.vue b/src/views/timeline/TimelineDemo.vue
index 1cb641442..36529d686 100644
--- a/src/views/timeline/TimelineDemo.vue
+++ b/src/views/timeline/TimelineDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Timeline</h1>
                 <p>Timeline visualizes a series of chained events.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index 39512a49e..bda77c897 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TimelineDemo" :sources="sources">
+	<AppDoc name="TimelineDemo" :sources="sources" github="timeline/TimelineDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import Timeline from 'primevue/timeline';
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index c6d2d2e50..a5914de86 100755
--- a/src/views/toast/ToastDemo.vue
+++ b/src/views/toast/ToastDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Toast</h1>
                 <p>Toast is used to display messages in an overlay.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index dbfac5206..53b4f81a8 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ToastDemo" :sources="sources">
+	<AppDoc name="ToastDemo" :sources="sources" github="toast/ToastDemo.vue" >
         <h5>ToastService</h5>
         <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
             instance is created.</p>
diff --git a/src/views/togglebutton/ToggleButtonDemo.vue b/src/views/togglebutton/ToggleButtonDemo.vue
index 768e1a614..1dce269d0 100755
--- a/src/views/togglebutton/ToggleButtonDemo.vue
+++ b/src/views/togglebutton/ToggleButtonDemo.vue
@@ -5,6 +5,7 @@
                 <h1>ToggleButton</h1>
                 <p>ToggleButton is used to select a boolean value using a button.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index 7bbca4891..f4ae66f01 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="ToggleButtonDemo" :sources="sources">
+    <AppDoc name="ToggleButtonDemo" :sources="sources" github="togglebutton/ToggleButtonDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import ToggleButton from 'primevue/togglebutton';
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index 3dc0d4b2d..e8704353d 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Toolbar</h1>
                 <p>Toolbar is a grouping component for buttons and other content.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index e7629fa43..b46ab5627 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ToolbarDemo" :sources="sources">
+	<AppDoc name="ToolbarDemo" :sources="sources" github="toolbar/ToolbarDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import Toolbar from 'primevue/toolbar';
diff --git a/src/views/tooltip/TooltipDemo.vue b/src/views/tooltip/TooltipDemo.vue
index eaaea5dd9..f6d311705 100755
--- a/src/views/tooltip/TooltipDemo.vue
+++ b/src/views/tooltip/TooltipDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tooltip</h1>
                 <p>Tooltip directive provides advisory information for a component.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index a00583a30..f6ec6c822 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TooltipDemo" :sources="sources">
+	<AppDoc name="TooltipDemo" :sources="sources" github="tooltip/TooltipDemo.vue" >
         <h5>Getting Started</h5>
 		<p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
 <pre v-code.script><code>
diff --git a/src/views/tree/TreeDemo.vue b/src/views/tree/TreeDemo.vue
index 147409d00..f74a7b149 100755
--- a/src/views/tree/TreeDemo.vue
+++ b/src/views/tree/TreeDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tree</h1>
                 <p>Tree is used to display hierarchical data.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 9a806de78..7803065fb 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']"> 
+	<AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue"> 
         <h5>Import</h5>
 <pre v-code.script><code>
 import Tree from 'primevue/tree';
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index 8af0ae64c..479bfb457 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tree <span>Filter</span></h1>
                 <p>Filtering updates the node based on the constraints.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -17,7 +18,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
+        <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeFilterDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index 87656a251..69319582f 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tree <span>Lazy</span></h1>
                 <p>Lazy loading is handy when dealing with huge datasets. This example imitates a lazy loading case with timeouts.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -13,7 +14,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
+        <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeLazyDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index ddf043b48..d6e3b7a89 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tree <span>Selection</span></h1>
                 <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> as selection modes.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -27,7 +28,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
+        <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeSelectionDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 5e9136908..8b6272aec 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -5,6 +5,7 @@
                 <h1>Tree <span>Templating</span></h1>
                 <p>Tree is used to display hierarchical data.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -20,7 +21,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
+        <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeTemplatingDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index d6379f137..fdfd698ac 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -6,6 +6,7 @@
 				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>
+            <AppDemoActions />
 		</div>
 
         <div class="content-section implementation">
@@ -28,7 +29,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColResizeDemo.vue" />
                 
     </div>
 </template>
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index 9e93d19fe..00e4bebc9 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Column Toggle</span></h1>
                 <p>MultiSelect component can be used to implement column toggle functionality.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -21,7 +22,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreetableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreetableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColToggleDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableDemo.vue b/src/views/treetable/TreeTableDemo.vue
index 3f087cf93..759ff39a2 100755
--- a/src/views/treetable/TreeTableDemo.vue
+++ b/src/views/treetable/TreeTableDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable</h1>
                 <p>TreeTable is used to display hierarchical data in tabular format.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 29ba0a156..b9b9855f1 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" >
+	<AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableDemo.vue" >
         <h5>Import</h5>
 <pre v-code.script><code>
 import TreeTable from 'primevue/treetable';
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index 33c36ce1a..fc927410c 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Filter</span></h1>
                 <p>Filtering is enabled by defining a filter template per column to populate the filters property of the TreTable.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -67,7 +68,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableFilterDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 7ebf7c7d1..75709baec 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -6,6 +6,7 @@
                 <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting. In addition,
                     children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list..</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -19,7 +20,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableLazyDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index cff5ef0ac..45c137518 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Paginator</span></h1>
                <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of root level nodes per page.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -17,7 +18,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTablePaginatorDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index cbda3b6ea..d70c7249f 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable - Responsive</h1>
                 <p>TreeTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -26,7 +27,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableResponsiveDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index 6a1b8bed0..fc93abfe0 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Selection</span></h1>
                 <p>TreeTable supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> as selection modes.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -55,7 +56,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSelectionDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index 3bc69df93..99d2bbff9 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Size</span></h1>
                 <p>In addition to a regular table, a smaller and a larger alternatives available.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -42,7 +43,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index 5064a1565..fd6c3ddb6 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Sort</span></h1>
                <p>TreeTable supports both single column and multiple column sorting..</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -36,7 +37,7 @@
             </div>
         </div>
         
-        <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSortDemo.vue" />
     </div>
 </template>
 
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index 7aa8f88be..c58f26749 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -5,6 +5,7 @@
                 <h1>TreeTable <span>Templating</span></h1>
                 <p>Custom content at header, body and footer sections are supported via templating.</p>
             </div>
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
@@ -34,7 +35,7 @@
             </div>
         </div>
 
-        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
+        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableTemplatingDemo.vue" />
             
     </div>
 </template>
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
index 88eaf8b45..c76198b12 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
@@ -5,7 +5,7 @@
                 <h1>TriStateCheckbox</h1>
                 <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation">
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index 269c7fc5b..b3008e96b 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="TriStateCheckboxDemo" :sources="sources">
+	<AppDoc name="TriStateCheckboxDemo" :sources="sources" github="tristatecheckbox/TriStateCheckboxDemo.vue">
 		<h5>Import</h5>
 <pre v-code.script><code>
 import TriStateCheckbox from 'primevue/tristatecheckbox';
diff --git a/src/views/validation/VuelidateFormDemo.vue b/src/views/validation/VuelidateFormDemo.vue
index 56babc33c..43c38dd42 100644
--- a/src/views/validation/VuelidateFormDemo.vue
+++ b/src/views/validation/VuelidateFormDemo.vue
@@ -5,7 +5,7 @@
                 <h1>Vuelidate</h1>
                 <p>PrimeVue components can be easily used/integrated with <a href="https://vuelidate.js.org/">Vuelidate</a>. In this example, a register panel is simulated using Vuelidate.</p>
             </div>
-            
+            <AppDemoActions />
         </div>
 
         <div class="content-section implementation form-demo">
@@ -92,7 +92,8 @@
             </div>
         </div>
 
-        <AppDoc name="VuelidateFormDemo" :sources="sources" :service="['CountryService']" :data="['countries']" :dependencies="{'@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12'}"/>
+        <AppDoc name="VuelidateFormDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="validation/VuelidateFormDemo.vue"
+            :dependencies="{'@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12'}"/>
 
     </div>
 </template>