From 362f694a3b5e7b962308666ecee0d6d22ed2a9d7 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 20 May 2024 14:28:40 +0200 Subject: [PATCH] Improve doc style --- docs/.vitepress/theme/custom.css | 76 ++++++++++++++++++- docs/get-started/create-powergrid-table.md | 7 +- docs/get-started/install.md | 7 +- docs/get-started/powergrid-configuration.md | 7 +- .../rendering-a-powergrid-table.md | 7 +- docs/table-component/component-columns.md | 31 +++++--- .../component-configuration.md | 56 +++++++++----- docs/table-component/data-source-fields.md | 44 +++++++---- docs/table-component/data-source.md | 23 +++--- docs/table-features/bulk-actions.md | 8 +- docs/table-features/columns.md | 48 +++++++----- docs/table-features/conditional-rules.md | 8 +- docs/table-features/exporting-data.md | 8 +- docs/table-features/filters.md | 40 ++++++---- docs/table-features/header-and-footer.md | 24 +++--- docs/table-features/pagination.md | 8 +- docs/table-features/rows.md | 32 +++++--- docs/table-features/searching-data.md | 16 ++-- docs/table-features/updating-data.md | 24 +++--- 19 files changed, 322 insertions(+), 152 deletions(-) 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. -::: +
+

🎉 That's it!

+

Now we can proceed to the Show 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!

+
## Optional Steps diff --git a/docs/get-started/powergrid-configuration.md b/docs/get-started/powergrid-configuration.md index 9a8b987..422a971 100644 --- a/docs/get-started/powergrid-configuration.md +++ b/docs/get-started/powergrid-configuration.md @@ -150,9 +150,10 @@ Currently, there are no specific Bootstrap theme configuration instructions. ### 6. Next step -::: info 🎉 Everything ready! -Now, we can go to the next step and [create a PowerGrid Table](/get-started/create-powergrid-table.html). -::: +
+

🎉 Everything ready!

+

Now, we can go to the next step and create a PowerGrid Table.

+
## General Configuration diff --git a/docs/get-started/rendering-a-powergrid-table.md b/docs/get-started/rendering-a-powergrid-table.md index 3045c57..8a44511 100644 --- a/docs/get-started/rendering-a-powergrid-table.md +++ b/docs/get-started/rendering-a-powergrid-table.md @@ -30,9 +30,10 @@ Alternatively, you can use the Livewire Blade directive. @livewire('dish-table') // [!code ++] ``` -::: info 🎉 Another step done! -Now, let's move forward to configure the [Datasource](/table-component/data-source.html). -::: +
+

🎉 Great, we have a table!

+

Now, let's move forward to configure the Datasource.

+
### Component in sub-folder diff --git a/docs/table-component/component-columns.md b/docs/table-component/component-columns.md index 208f124..6420c25 100644 --- a/docs/table-component/component-columns.md +++ b/docs/table-component/component-columns.md @@ -100,9 +100,10 @@ class DishTable extends PowerGridComponent } ``` -::: info 🎉 Ok! Ok! -Let's explore the various [Configuration Options](/table-component/component-configuration.html) available in our Component. -::: +
+

🎉 Ok, all done!

+

Let's explore the various Configuration Options available in our Component.

+
## Column Data Field @@ -269,9 +270,11 @@ The next example illustrates a case where allowing to filter by date as "d/m/Y". ->searchableRaw('DATE_FORMAT(dishes.produced_at, "%d/%m/%Y")'), // [!code highlight:1] ``` -:::info 🌎 Online Demo -See an interactive example of [searchableRaw()](https://demo.livewire-powergrid.com/examples/searchableraw). -::: +
+

🚀 See it in action

+

See an interactive example using searchableRaw().

+ +
### sortable() @@ -354,9 +357,11 @@ Column::make('Dish name', 'name') ->hidden(isHidden: true, isForceHidden: true), ``` -:::info 🌎 Online Demo -See an interactive example of [hidden()](https://demo.livewire-powergrid.com/examples/export). -::: +
+

🚀 See it in action

+

See an interactive example using hidden().

+ +
--- @@ -378,9 +383,11 @@ Column::make('Dish price', 'price') ->visibleInExport(false), // will not include in exported file ``` -:::info 🌎 Online Demo -See an interactive example of [visibleInExport()](https://demo.livewire-powergrid.com/examples/export). -::: +
+

🚀 See it in action

+

See an interactive example using visibleInExport().

+ +
--- diff --git a/docs/table-component/component-configuration.md b/docs/table-component/component-configuration.md index d9636c7..674f2f4 100644 --- a/docs/table-component/component-configuration.md +++ b/docs/table-component/component-configuration.md @@ -55,9 +55,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of a [No Records Found](https://demo.livewire-powergrid.com/examples/no-results-found) Table. -::: +
+

🚀 See it in action

+

See an interactive example of customizing No Records Found.

+ +
## Defer Loading @@ -97,9 +99,11 @@ class DishTable extends PowerGridComponent In addition, it might be useful for you to disable the [Loading Icon](/table-features/header-and-footer.html#loading-icon) when using with Defer Loading. -:::info 🌎 Online Demo -See an interactive example of a [Defer Loading](https://demo.livewire-powergrid.com/examples/defer-loading) Table. -::: +
+

🚀 See it in action

+

See an interactive example of a Defer Loading Table.

+ +
## Actions Method @@ -195,9 +199,11 @@ class TableRefresher extends Component ::: -:::info 🌎 Online Demo -See an interactive example of using [Auto Refresh](https://demo.livewire-powergrid.com/examples/auto-refresh) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Auto Refresh on a Table.

+ +
## Responsive Table @@ -226,9 +232,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of a PowerGrid [Responsive Table](https://demo.livewire-powergrid.com/examples/responsive). -::: +
+

🚀 See it in action

+

See an interactive example of a PowerGrid Responsive Table.

+ +
### Fixed Columns @@ -308,9 +316,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of using [Detail Row](https://demo.livewire-powergrid.com/examples/detail) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Detail Row on a Table.

+ +
### Collapse Others @@ -373,9 +383,11 @@ class DishTable extends PowerGridComponent This feature does not support including other Livewire components (e.g. Actions) ::: -:::info 🌎 Online Demo -See an interactive example of a [Lazy Loading](https://demo.livewire-powergrid.com/examples/lazy-load) Table. -::: +
+

🚀 See it in action

+

See an interactive example of a Lazy Loading Table.

+ +
### Load Content @@ -437,9 +449,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of a [Persist](https://demo.livewire-powergrid.com/examples/persist) Table. -::: +
+

🚀 See it in action

+

See an interactive example of a Persist Table.

+ +
The state data can be stored in either cookies or session, depending on the [Persist Drive](/get-started/powergrid-configuration.html#persist-driver) configuration. However, you may customize the Persistent Drive settings for each component using Laravel's [`config()`](https://laravel.com/docs/helpers#method-config) helper within the Component's `boot()` method. diff --git a/docs/table-component/data-source-fields.md b/docs/table-component/data-source-fields.md index 5bad838..41ce655 100644 --- a/docs/table-component/data-source-fields.md +++ b/docs/table-component/data-source-fields.md @@ -35,6 +35,11 @@ class DishTable extends PowerGridComponent } ``` +
+

🎉 Super!

+

Now, let's check out how to Add Columns.

+
+ ## Custom Fields Sometimes, we need to modify data from the database before showing it on the Table Component. @@ -214,9 +219,10 @@ public function fields(): PowerGridFields It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) to escape data return in Custom Fields. ::: -:::info 🌎 Online Demo -See an interactive example of creating an [HTML Link](https://demo.livewire-powergrid.com/examples/custom-field-html-link). -::: +
+

🚀 See it in action

+

See an interactive example generating an HTML Link.

+
--- @@ -303,9 +309,11 @@ class SelectCategory extends Component ::: code-group -:::info 🌎 Online Demo -See an interactive example of [Dropdown Menu](https://demo.livewire-powergrid.com/examples/input-select) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Dropdown Menu on a Table.

+ +
--- @@ -329,9 +337,11 @@ public function fields(): PowerGridFields } ``` -:::info 🌎 Online Demo -See an interactive example of showing [Images](https://demo.livewire-powergrid.com/examples/custom-field-image) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Images on a Table.

+ +
--- @@ -356,9 +366,11 @@ public function fields(): PowerGridFields } ``` -:::info 🌎 Online Demo -See an interactive example of using a [Custom Field Blade Component](https://demo.livewire-powergrid.com/examples/custom-field-blade-component). -::: +
+

🚀 See it in action

+

See an interactive example using a Custom Field Blade Component.

+ +
--- @@ -405,9 +417,11 @@ public function fields(): PowerGridFields } ``` -:::info 🌎 Online Demo -See an interactive example of using [Enums](https://demo.livewire-powergrid.com/examples/enum). -::: +
+

🚀 See it in action

+

See an interactive example using Enums.

+ +
## Exporting Data diff --git a/docs/table-component/data-source.md b/docs/table-component/data-source.md index 9a1d9ea..697026e 100644 --- a/docs/table-component/data-source.md +++ b/docs/table-component/data-source.md @@ -41,9 +41,10 @@ class DishTable extends PowerGridComponent } ``` -::: info 🎉 Job done! -Let's jump to the [Data Source Fields](/table-component/data-source-fields) section and configure the fields from your Data Source. -::: +
+

🎉 Job done!

+

Let's jump to the Data Source Fields section and configure the fields from your Data Source.

+
## Relationships @@ -84,9 +85,11 @@ class Dish extends Model } ``` -:::info 🌎 Online Demo -See an interactive example of using [Relationships](https://demo.livewire-powergrid.com/examples/datasource-relationship). -::: +
+

🚀 See it in action

+

See an interactive example using Relationships in Data Source.

+ +
## Join Tables @@ -119,9 +122,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of using [Join](https://demo.livewire-powergrid.com/examples/datasource-join). -::: +
+

🚀 See it in action

+

See an interactive example using Join in Data Source.

+ +
## Custom Primary Key diff --git a/docs/table-features/bulk-actions.md b/docs/table-features/bulk-actions.md index a123e75..aa53716 100644 --- a/docs/table-features/bulk-actions.md +++ b/docs/table-features/bulk-actions.md @@ -39,9 +39,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Bulk Actions](https://demo.livewire-powergrid.com/examples/bulk-actions) in PowerGrid. -::: +
+

🚀 See it in action

+

See an interactive example using Bulk Actions in PowerGrid.

+ +
## Handling the Bulk Event diff --git a/docs/table-features/columns.md b/docs/table-features/columns.md index d6638e5..e96773a 100644 --- a/docs/table-features/columns.md +++ b/docs/table-features/columns.md @@ -182,9 +182,11 @@ class DishTable extends PowerGridComponent | (bool) $header | If `true`, results will be displayed in the Table header, under the filters. | `false` | | (bool) $footer | If `true`, results will be displayed in the Table footer. | `false` | -:::info 🌎 Online Demo -See an interactive example of [Sum](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Sum.

+ +
--- @@ -218,9 +220,11 @@ class DishTable extends PowerGridComponent | (bool) $header | If `true`, results will be displayed in the Table header, under the filters. | `false` | | (bool) $footer | If `true`, results will be displayed in the Table footer. | `false` | -:::info 🌎 Online Demo -See an interactive example of [Count](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Count.

+ +
--- @@ -254,9 +258,11 @@ class DishTable extends PowerGridComponent | (bool) $header | If `true`, results will be displayed in the Table header, under the filters. | `false` | | (bool) $footer | If `true`, results will be displayed in the Table footer. | `false` | -:::info 🌎 Online Demo -See an interactive example of [Average](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Average.

+ +
--- @@ -292,9 +298,11 @@ class DishTable extends PowerGridComponent --- -:::info 🌎 Online Demo -See an interactive example of [Min](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Min.

+ +
--- @@ -328,9 +336,11 @@ class DishTable extends PowerGridComponent | (bool) $header | If `true`, results will be displayed in the Table header, under the filters. | `false` | | (bool) $footer | If `true`, results will be displayed in the Table footer. | `false` | -:::info 🌎 Online Demo -See an interactive example of [Max](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Max.

+ +
## Formatting Summarized Data @@ -359,6 +369,8 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Formatting Summarized Data](https://demo.livewire-powergrid.com/examples/summarize). -::: +
+

🚀 See it in action

+

See an interactive example using Formatting Summarized Data.

+ +
diff --git a/docs/table-features/conditional-rules.md b/docs/table-features/conditional-rules.md index 851ff0f..5f7b85d 100644 --- a/docs/table-features/conditional-rules.md +++ b/docs/table-features/conditional-rules.md @@ -62,9 +62,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Conditional Rules](https://demo.livewire-powergrid.com/examples/conditional-rules) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Conditional Rules on a Table.

+ +
## Performance diff --git a/docs/table-features/exporting-data.md b/docs/table-features/exporting-data.md index 9c12297..f1b16ce 100644 --- a/docs/table-features/exporting-data.md +++ b/docs/table-features/exporting-data.md @@ -53,9 +53,11 @@ class DishTable extends PowerGridComponent The example above illustrates the Exportable featured enabled for Microsoft Excel and CSV files. -:::info 🌎 Online Demo -See an interactive example of [Data Export](https://demo.livewire-powergrid.com/examples/export). -::: +
+

🚀 See it in action

+

See an interactive example using Data Export.

+ +
## Exclude Columns From Exporting diff --git a/docs/table-features/filters.md b/docs/table-features/filters.md index 3ae1074..dec7773 100644 --- a/docs/table-features/filters.md +++ b/docs/table-features/filters.md @@ -44,9 +44,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of using [Filters](https://demo.livewire-powergrid.com/examples/filters-inline). -::: +
+

🚀 See it in action

+

See an interactive example using Filters.

+ +
## Filter Position @@ -448,9 +450,11 @@ enum Diet: int ::: -:::info 🌎 Online Demo -See an interactive example of [Enum Filter](https://demo.livewire-powergrid.com/examples/filters-inline). -::: +
+

🚀 See it in action

+

See an interactive example using Enum Filter.

+ +
--- @@ -574,9 +578,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of using [Dynamic Filter](https://demo.livewire-powergrid.com/examples/filter-dynamic). -::: +
+

🚀 See it in action

+

See an interactive example using Dynamic Filter.

+ +
--- @@ -635,9 +641,11 @@ final class PowerGridTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Filter Depends](https://demo.livewire-powergrid.com/examples/filter-depends) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Filter Depends on a Table.

+ +
## Filter Builder @@ -683,9 +691,11 @@ use Illuminate\Support\Collection; }) ``` -:::info 🌎 Online Demo -See an interactive example of using [Filter Builder](https://demo.livewire-powergrid.com/examples/filters-inline). -::: +
+

🚀 See it in action

+

See an interactive example using Filter Builder.

+ +
## Filter by Relationship diff --git a/docs/table-features/header-and-footer.md b/docs/table-features/header-and-footer.md index d1f1015..843e957 100644 --- a/docs/table-features/header-and-footer.md +++ b/docs/table-features/header-and-footer.md @@ -132,9 +132,11 @@ class DishTable extends PowerGridComponent By default, a message will be displayed to inform what records are being displayed. You can disable this message passing the parameter `$showMessage = false`. -:::info 🌎 Online Demo -See an interactive example of showing [Soft Deletes](https://demo.livewire-powergrid.com/examples/show-soft-delete). -::: +
+

🚀 See it in action

+

See an interactive example using Soft Deletes.

+ +
## Footer @@ -182,9 +184,11 @@ You may use your Component's property in your custom view as the demonstrated be ``` -:::info 🌎 Online Demo -See an interactive example of [Include View on Top](https://demo.livewire-powergrid.com/examples/custom-theme). -::: +
+

🚀 See it in action

+

See an interactive example using Include View on Top.

+ +
--- @@ -226,6 +230,8 @@ You may use your Component's property in your custom view as the demonstrated be If you need to customize the pagination, visit the section to learn more about [Custom Pagination Component](/table-features/pagination.html#custom-pagination-component). -:::info 🌎 Online Demo -See an interactive example of [Include View on Bottom](https://demo.livewire-powergrid.com/examples/custom-theme). -::: +
+

🚀 See it in action

+

See an interactive example using Include View on Bottom.

+ +
diff --git a/docs/table-features/pagination.md b/docs/table-features/pagination.md index 942ef0f..2cebd02 100644 --- a/docs/table-features/pagination.md +++ b/docs/table-features/pagination.md @@ -188,6 +188,8 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Custom Pagination Component](https://demo.livewire-powergrid.com/examples/custom-theme). -::: +
+

🚀 See it in action

+

See an interactive example using Custom Pagination Component.

+ +
diff --git a/docs/table-features/rows.md b/docs/table-features/rows.md index d9587b1..055db6a 100644 --- a/docs/table-features/rows.md +++ b/docs/table-features/rows.md @@ -28,9 +28,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Checkboxes](https://demo.livewire-powergrid.com/examples/input-checkbox) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Checkboxes on a Table.

+ +
## Radio Buttons @@ -54,9 +56,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Radio Buttons](https://demo.livewire-powergrid.com/examples/input-checkbox) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Radio Buttons on a Table.

+ +
## Dropdown Menu @@ -102,9 +106,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Buttons](https://demo.livewire-powergrid.com/examples/input-button) on a Table. -::: +
+

🚀 See it in action

+

See an interactive example using Buttons on a Table.

+ +
## Actions From Blade View @@ -141,9 +147,11 @@ Your view may look something like the example below. ``` -:::info 🌎 Online Demo -See an interactive example of [Action From View](https://demo.livewire-powergrid.com/examples/actions-from-view). -::: +
+

🚀 See it in action

+

See an interactive example using Action From View.

+ +
## Image in Cell diff --git a/docs/table-features/searching-data.md b/docs/table-features/searching-data.md index fa7d3b2..c7fccf5 100644 --- a/docs/table-features/searching-data.md +++ b/docs/table-features/searching-data.md @@ -55,9 +55,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of the [Before Search Hook](https://demo.livewire-powergrid.com/examples/beforesearch-hook) method. -::: +
+

🚀 See it in action

+

See an interactive example using Before Search Hook.

+ +
## Searching Custom Fields @@ -155,9 +157,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of a [relationSearch()](https://demo.livewire-powergrid.com/examples/search-with-relationship). -::: +
+

🚀 See it in action

+

See an interactive example using Relation Search.

+ +
## Query String diff --git a/docs/table-features/updating-data.md b/docs/table-features/updating-data.md index a976972..a39b966 100644 --- a/docs/table-features/updating-data.md +++ b/docs/table-features/updating-data.md @@ -36,9 +36,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Saving Toggleable Data](https://demo.livewire-powergrid.com/examples/validation). -::: +
+

🚀 See it in action

+

See an interactive example of Saving Toggleable Data.

+ +
## Edit On Click @@ -73,9 +75,11 @@ For security reasons, data input must be escaped and validated before it is stor It's highly recommended to use Laravel's [`e() helper`](https://laravel.com/docs/strings#method-e) and [Livewire Validation](https://livewire.laravel.com/docs/validation#real-time-validation) when dealing with user input. ::: -:::info 🌎 Online Demo -See an interactive example of [Saving Edit On Click Data](https://demo.livewire-powergrid.com/examples/validation). -::: +
+

🚀 See it in action

+

See an interactive example of Saving Edit On Click Data.

+ +
## Updating Custom Fields @@ -232,9 +236,11 @@ class DishTable extends PowerGridComponent } ``` -:::info 🌎 Online Demo -See an interactive example of [Data Validation](https://demo.livewire-powergrid.com/examples/validation) in PowerGrid. -::: +
+

🚀 See it in action

+

See an interactive example using Data Validation in PowerGrid.

+ +
## Custom Field Validation