### Fork and Install Dependencies
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
Steps to clone the PowerGrid repository, install PHP dependencies using Composer, and install Node.js dependencies using NPM.
```shell
git clone https://github.com/Power-Components/livewire-powergrid.git && cd livewire-powergrid
composer install
npm install
```
--------------------------------
### Install PowerGrid
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/README.md
Installs the PowerGrid package using Composer. Ensure you have PHP 8.2+, Laravel 10+, Livewire 3.0x, and Tailwind CSS or Bootstrap 5 installed.
```bash
composer require power-components/livewire-powergrid
```
--------------------------------
### Livewire PowerGrid Basic Setup
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/README.md
This snippet demonstrates the basic setup for a Livewire PowerGrid table. It includes the necessary Blade directive and a simple Livewire component structure.
```Blade
PowerGrid Example
@livewireStyles
@livewire('my-powergrid-table')
@livewireScripts
```
--------------------------------
### Livewire PowerGrid Component Example
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/README.md
An example of a Livewire component that utilizes PowerGrid. This includes defining the table columns, data source, and basic configurations.
```PHP
setPrimaryKey('id')
->setQueryBuilder(
// Query Builder
)
->configureInputTextEditor(
// Input Text Editor Configuration
)
->configureNumberInput(
// Number Input Configuration
)
->configureSelectInput(
// Select Input Configuration
)
->configureCheckboxInput(
// Checkbox Input Configuration
)
->configureDateTimeInput(
// DateTime Input Configuration
);
}
public function header(): array
{
return [
// Header configuration
];
}
public function columns(): array
{
return [
// Column definitions
];
}
public function actions(): array
{
return [
// Action button configuration
];
}
}
```
--------------------------------
### Build Assets
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
Command to recompile assets after updating or adding JavaScript code.
```shell
npm run build
```
--------------------------------
### Code Verification and Formatting
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
Commands to format code using Composer's fix script and to run tests and static analysis.
```shell
composer fix
composer verify
```
--------------------------------
### Building Front-end Assets (Shell)
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
This command uses NPM to run the project's build script, which typically compiles and minifies front-end assets like JavaScript and CSS using tools like Webpack or Vite. This is necessary if you've made changes to front-end code.
```Shell
npm run build
```
--------------------------------
### Create New Branch
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
Command to create a new Git branch for feature development, bug fixes, or enhancements.
```shell
git checkout -b feature/my-new-feature
```
--------------------------------
### Running Tests and Static Analysis (Shell)
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
This command executes a Composer script that runs the project's test suite and static analysis tools. This step is crucial to verify that code changes haven't introduced bugs or regressions and adhere to code quality standards.
```Shell
composer verify
```
--------------------------------
### Running Code Style Fixer (Shell)
Source: https://github.com/power-components/livewire-powergrid/blob/6.x/CONTRIBUTING.md
This command executes a Composer script that runs a code style fixer tool (like PHP-CS-Fixer) on the project's code. It automatically formats the code according to predefined coding standards to ensure consistency.
```Shell
composer fix
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.