diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 5cb6da0..1532a55 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,7 +1,6 @@
:root {
--vp-c-brand-1: #f69e08;
--vp-c-brand-2: #c78108;
-
--vp-button-brand-bg: #ee9908;
}
@@ -9,8 +8,81 @@
--vp-button-brand-bg: #be7b08;;
}
+/*
+.vp-doc :not(pre) > code
+{
+ background-color: #fef0d7 !important;
+}
+*/
+
+.vp-doc a {
+ color: #ca8207;
+}
+
+.pre, code, kbd, samp {
+ color: #ca8207 !important;
+}
+
.vp-doc p,
.vp-doc summary {
text-align: justify;
text-justify: inter-word;
-}
\ No newline at end of file
+}
+
+.success {
+ padding-top: 8px;
+ background-color: #EDF9D2;
+ outline: #638613 solid 1px;
+ color: #638613;
+}
+
+:root.dark .success {
+ background-color: #064E37;
+ outline:#5aa358 solid 1.5px;
+ color: #bfc8aa;
+}
+
+.success a {
+ color: #638613 !important;
+}
+
+:root.dark .success a {
+ color: #c8e18e !important;
+}
+
+.onlinedemo {
+ padding-top: 8px;
+ background-color: #F8D2F9;
+ outline: #841285 solid 1px;
+ color: #841285;
+}
+
+:root.dark .onlinedemo {
+ background-color: #7b487c;
+ color: #F3D7F4;
+ outline: #BA80F4 solid 1.5px;
+}
+
+:root.dark .onlinedemo a {
+ color: #ffdeff !important;
+}
+
+.onlinedemo a {
+ color: #841285 !important;
+ font-weight: 600;
+ text-decoration: underline;
+ text-underline-offset: 2px;
+ transition: opacity 0.25s;
+}
+
+.danger {
+ outline: var(--vp-c-danger-1) solid 1px;
+}
+
+.tip {
+ outline: #b8bbff solid 1px;
+}
+
+.info {
+ outline: #c6c9d4 solid 1px;
+}
diff --git a/docs/get-started/create-powergrid-table.md b/docs/get-started/create-powergrid-table.md
index c551439..4490ce5 100644
--- a/docs/get-started/create-powergrid-table.md
+++ b/docs/get-started/create-powergrid-table.md
@@ -122,9 +122,10 @@ In the feedback message, you will find:
-::: info 🎉 That's it!
-Now we can proceed to the [Show a PowerGrid Table](/get-started/rendering-a-powergrid-table) section.
-:::
+
## Customize the Component Creation
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index eb9fc70..0c61867 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -35,9 +35,10 @@ php artisan vendor:publish --tag=livewire-powergrid-config
### 3. Configure PowerGrid
-::: info 🎉 All done!
-Let's go on and [configure](/get-started/powergrid-configuration.html#initial-configuration) PowerGrid!
-:::
+
+
🎉 All done!
+
Let's go on and configure PowerGrid!
+
+
🎉 Great, we have a table!
+
Now, let's move forward to configure the Datasource.
+
+
🚀 See it in action
+
See an interactive example using searchableRaw().
+
+
+
🚀 See it in action
+
See an interactive example using hidden().
+
+
+
🚀 See it in action
+
See an interactive example of customizing No Records Found.
+
+
+
🚀 See it in action
+
See an interactive example of a Defer Loading Table.
+
+
+
🚀 See it in action
+
See an interactive example using Auto Refresh on a Table.
+
+
+
🚀 See it in action
+
See an interactive example of a PowerGrid Responsive Table.
+
+
+
🚀 See it in action
+
See an interactive example using Detail Row on a Table.
+
+
+
🚀 See it in action
+
See an interactive example of a Lazy Loading Table.
+
+
+
🚀 See it in action
+
See an interactive example of a Persist Table.
+
+
+
🎉 Super!
+
Now, let's check out how to Add Columns.
+
+
🚀 See it in action
+
See an interactive example generating an HTML Link.
+
+
🚀 See it in action
+
See an interactive example using Dropdown Menu on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Images on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Enums.
+
+
+
🎉 Job done!
+
Let's jump to the Data Source Fields section and configure the fields from your Data Source.
+
+
🚀 See it in action
+
See an interactive example using Relationships in Data Source.
+
+
+
🚀 See it in action
+
See an interactive example using Join in Data Source.
+
+
+
🚀 See it in action
+
See an interactive example using Bulk Actions in PowerGrid.
+
+
+
🚀 See it in action
+
See an interactive example using Sum.
+
+
+
🚀 See it in action
+
See an interactive example using Count.
+
+
+
🚀 See it in action
+
See an interactive example using Average.
+
+
+
🚀 See it in action
+
See an interactive example using Min.
+
+
+
🚀 See it in action
+
See an interactive example using Max.
+
+
+
🚀 See it in action
+
See an interactive example using Conditional Rules on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Data Export.
+
+
+
🚀 See it in action
+
See an interactive example using Filters.
+
+
+
🚀 See it in action
+
See an interactive example using Enum Filter.
+
+
+
🚀 See it in action
+
See an interactive example using Dynamic Filter.
+
+
+
🚀 See it in action
+
See an interactive example using Filter Depends on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Filter Builder.
+
+
+
🚀 See it in action
+
See an interactive example using Soft Deletes.
+
+
+
🚀 See it in action
+
See an interactive example using Checkboxes on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Radio Buttons on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Buttons on a Table.
+
+
+
🚀 See it in action
+
See an interactive example using Action From View.
+
+
+
🚀 See it in action
+
See an interactive example using Relation Search.
+
+
+
🚀 See it in action
+
See an interactive example using Data Validation in PowerGrid.
+
+