From 2972bd1b1db842d94c013309d5719eecb655c2fb Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 13 May 2024 20:56:20 +0200 Subject: [PATCH] more fixes --- docs/get-started/create-powergrid-table.md | 4 ++-- docs/get-started/install.md | 2 +- docs/get-started/introduction.md | 4 ++-- docs/get-started/powergrid-configuration.md | 12 ++++------ .../rendering-a-powergrid-table.md | 24 ++++++++++++------- docs/table-component/component-columns.md | 4 ++++ docs/table-features/conditional-rules.md | 6 ++--- docs/table-features/filters.md | 2 +- 8 files changed, 33 insertions(+), 25 deletions(-) diff --git a/docs/get-started/create-powergrid-table.md b/docs/get-started/create-powergrid-table.md index 2d631dd..c551439 100644 --- a/docs/get-started/create-powergrid-table.md +++ b/docs/get-started/create-powergrid-table.md @@ -1,6 +1,6 @@ # Create a PowerGrid Table -This section covers the creation of a PowerGrid Component. +This section covers the the process of creating a PowerGrid Component. Here you will find: @@ -8,7 +8,7 @@ Here you will find: ## Introduction -After [installing](/get-started/install.html#installation) PowerGrid, and completing its [Initial Configuration](/get-started/powergrid-configuration.html#initial-configuration), now it's time to create your first Table Component! +Now that you've finished the PowerGrid [Essential Configuration](get-started/powergrid-configuration.html#essential-configuration), it's time create your very first Table Component! ## Create a Table diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 5fac47e..eb9fc70 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -1,6 +1,6 @@ # Install -This section covers PowerGrid Laravel Package installation. +This section covers how to install PowerGrid Laravel in your Laravel Application. Here you will find: diff --git a/docs/get-started/introduction.md b/docs/get-started/introduction.md index 02840ff..3cc8960 100644 --- a/docs/get-started/introduction.md +++ b/docs/get-started/introduction.md @@ -2,9 +2,9 @@ ## PowerGrid -[Livewire PowerGrid](https://laravel-livewire.com) creates modern, powerful and easy-to-customize data tables based on Laravel Livewire library. +[Livewire PowerGrid](https://github.com/Power-Components/livewire-powergrid) creates modern, powerful and easy-to-customize data tables using [Laravel Livewire](https://laravel-livewire.com). -With PowerGrid, you can effortlessly create advanced data tables one in a matter of minutes. +With PowerGrid, you can effortlessly create advanced data tables in a matter of minutes. To get started, just head over to the [installation page](/get-started/install.html). ![Output](/screenshot.png) diff --git a/docs/get-started/powergrid-configuration.md b/docs/get-started/powergrid-configuration.md index 7c9810b..414224b 100644 --- a/docs/get-started/powergrid-configuration.md +++ b/docs/get-started/powergrid-configuration.md @@ -1,6 +1,6 @@ # PowerGrid Configuration -This section covers the PowerGrid configuration file and assets configuration. +This section covers the PowerGrid config file, along with the configurations for assets and plugins. Here you will find: @@ -8,7 +8,7 @@ Here you will find: ## Introduction -After a successful [installation](/get-started/install.html), you must complete the following steps to start using PowerGrid in your Laravel application. +Once the [installation](/get-started/install.html) is complete, you must perform these [Essential Configuration](/get-started/powergrid-configuration.html#essential-configuration) steps to start using PowerGrid in your Laravel application. ## Essential Configuration @@ -26,11 +26,9 @@ import './../../vendor/power-components/livewire-powergrid/dist/powergrid' // [! ### 2. Choose a CSS theme -PowerGrid provides Tailwind and Bootstrap 5 themes. +PowerGrid provides Tailwind 3 and Bootstrap 5 themes. Tailwind is selected by default. -Tailwind is selected by default. - -If you prefer to use Bootstrap 5, change the `theme` key inside the `config/livewire-powergrid.php` file, as demonstrated below. +To use Bootstrap 5, simply change the `theme` key in the `config/livewire-powergrid.php` file. Here's an example: ```php{10} // config/livewire-powergrid.php @@ -183,7 +181,7 @@ Example: 'persist_driver' => 'session',// [!code ++] ``` -### Filter Configuration +### Filter Position Configuration To configure how filters are displayed, change the value in the key `filter` in `config/livewire-powergrid.php`. diff --git a/docs/get-started/rendering-a-powergrid-table.md b/docs/get-started/rendering-a-powergrid-table.md index 9146ede..3045c57 100644 --- a/docs/get-started/rendering-a-powergrid-table.md +++ b/docs/get-started/rendering-a-powergrid-table.md @@ -12,7 +12,7 @@ Here you will find: To display your PowerGrid Table, you can use the `` tag as demonstrated below. -Following our example of `DishTable` (`app/Livewire/DishTable.php`), we will use: +Following our example of `DishTable` (`app/Livewire/DishTable.php`), we will use the tag: ```php // resources/views/my-view.blade.php @@ -30,11 +30,15 @@ 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). +::: + ### Component in sub-folder -If your PowerGrid Table lives in a sub-folder, just indicate its path using dot notation. +If the PowerGrid Table is located in a sub-folder, you can easily specify its path using dot notation. -The next example uses the class `app/Livewire/Tables/DishTable.php` as reference: +For reference, the following example utilizes the class `app/Livewire/Tables/DishTable.php`: ```php // resources/views/my-view.blade.php @@ -46,21 +50,23 @@ The next example uses the class `app/Livewire/Tables/DishTable.php` as reference ### Passing Attributes -You can pass data to your PowerGrid Table using the `` tag and HTML attributes. +To pass data to your PowerGrid Table, you can add attributes to the `` HTML tag. -In the next example, we are passing the `tableName` attribute to avoid conflict between two PowerGrid Components. +In the next example, we are passing the [`tableName`](/table-component/component-configuration.html#table-name) via an attribute. ```php // resources/views/my-view.blade.php - // [!code ++:3] + // [!code ++:3] - + ``` ### Passing Custom Attributes -To pass a custom attribute, you must declare it as a `public` property in your PowerGrid Table Component. +To pass a custom attribute, you must to declare it as a `public` property within the PowerGrid Table Component. + +Example: ```php // app/Livewire/DishTable.php @@ -72,7 +78,7 @@ class DishTable extends PowerGridComponent } ``` -Then, you can just include it in your HTML tag, as demonstrated below. +Then, you can simply add this attribute in the `` tag, as demonstrated below. ```php // resources/views/my-view.blade.php diff --git a/docs/table-component/component-columns.md b/docs/table-component/component-columns.md index 46c84a6..208f124 100644 --- a/docs/table-component/component-columns.md +++ b/docs/table-component/component-columns.md @@ -100,6 +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. +::: + ## Column Data Field When using Data source [Custom Fields](/table-component/data-source-fields.html#custom-fields) or [Table joins](/table-component/data-source.html#join-tables), you must pass the `$dataField` parameter, indicating where the "original" data can be found in the database. This allows data search, filtering and column sorting. diff --git a/docs/table-features/conditional-rules.md b/docs/table-features/conditional-rules.md index 8c9f52d..851ff0f 100644 --- a/docs/table-features/conditional-rules.md +++ b/docs/table-features/conditional-rules.md @@ -8,11 +8,11 @@ Here you will find: ## Introduction -Many web applications require control over what data and actions are available and how they are displayed to the end user. +Many web applications require the ability to control how data is displayed and what actions are available to the user based on certain conditions. -For example, you may want to remove a button if the user doesn't have the right permissions or to show a red background if a product is sold out. +For example, you may want to remove a button if the user lacks the necessary permissions for that particular action, or display a red background to indicate that a product is no longer available. -PowerGrid provides a comprehensive set of `Action Rules` that can be used to manage the style, visibility, and behavior of Table rows, checkboxes, and buttons. These rules can be combined to meet specific conditions and requirements. +PowerGrid provides a set of `Action Rules` that you can use to control the style, visibility, and behavior of Table rows, checkboxes, and buttons. These rules can be combined to meet specific conditions and requirements. ## Usage diff --git a/docs/table-features/filters.md b/docs/table-features/filters.md index d9fae26..656d1e5 100644 --- a/docs/table-features/filters.md +++ b/docs/table-features/filters.md @@ -50,7 +50,7 @@ See an interactive example of using [Filters](https://demo.livewire-powergrid.co ## Filter Position -To configure PowerGrid's Filter display position, visit [Filter Configuration](/get-started/powergrid-configuration.html#filter-configuration) section. +To configure PowerGrid's Filter display position, visit [Filter Configuration](/get-started/powergrid-configuration.html#filter-position-configuration) section. If you want to configure it individually per component, use Laravel's [`config()`](https://laravel.com/docs/helpers#method-config) helper in your component's `boot()` method.