Skip to content

Commit

Permalink
more fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
dansysanalyst committed May 13, 2024
1 parent ca6212c commit 2972bd1
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 25 deletions.
4 changes: 2 additions & 2 deletions docs/get-started/create-powergrid-table.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 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:

[[toc]]

## 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

Expand Down
2 changes: 1 addition & 1 deletion docs/get-started/install.md
Original file line number Diff line number Diff line change
@@ -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:

Expand Down
4 changes: 2 additions & 2 deletions docs/get-started/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
12 changes: 5 additions & 7 deletions docs/get-started/powergrid-configuration.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# 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:

[[toc]]

## 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

Expand All @@ -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
Expand Down Expand Up @@ -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`.

Expand Down
24 changes: 15 additions & 9 deletions docs/get-started/rendering-a-powergrid-table.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Here you will find:

To display your PowerGrid Table, you can use the `<livewire>` 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
Expand All @@ -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
Expand All @@ -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 `<livewire>` tag and HTML attributes.
To pass data to your PowerGrid Table, you can add attributes to the `<livewire>` 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

<livewire:dish-table tableName="table1" /> // [!code ++:3]
<livewire:dish-table tableName="DishTable" /> // [!code ++:3]

<livewire:dish-table tableName="table2" />
<livewire:dish-table tableName="UserTable" />
```

### 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
Expand All @@ -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 `<livewire>` tag, as demonstrated below.

```php
// resources/views/my-view.blade.php
Expand Down
4 changes: 4 additions & 0 deletions docs/table-component/component-columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions docs/table-features/conditional-rules.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion docs/table-features/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down

0 comments on commit 2972bd1

Please sign in to comment.