Download the PHP package tomshaw/electricgrid without Composer

Electric Grid 🔌

A powerful Livewire data table package. A great choice for projects that require a data table solution.

For a complete demonstration see the Electric Grid Demo repository.

Features

1. Easy Installation: Use a simple command for installation and package updates.

2. Columns: Add columns to your grid with various options including sortable, styleable, exportable and visible.

3. Filters: Supports text, number, select, multiselect, boolean, timepicker, datepicker, and datetimepicker.

4. Mass Actions: Provides the capability to execute operations on multiple rows of data simultaneously.

5. Table Exports: Tables can be exported in various formats including xlsx, csv, pdf, and html out of the box.

6. Search Input: You can enable search functionality by specifying the columns you wish to search.

7. Letter Search: This feature allows you to search data based on specific letters in the specified columns.

8. Toggleable Columns: Hide or show columns useful for focusing on the most relevant data.

9. Themes: Uses a single blade template under 230 lines of html making it super easy to theme.

10. Testing: Provides a command for running tests to ensure everything works as expected.

Installation

You can install the package via composer:

Run the installation command.

Run the update command for package updates:

Make sure to add the styles and scripts directives to your layout.

Add the component to your blade template where you plan to use it.

Here the namespace is App\Livewire\Tables and the component name is OrdersTable.

Usage

The Builder Method.

Populating your table is done by using the builder method.

The builder method must return an instance of Illuminate\Database\Eloquent\Builder.

Adding Columns.

Use Columns to present data in your grid.

Column Filters.

Filters allow you to filter data displayed in the grid.

Data attributes can be added to filters using the addDataAttribute method.

Filter::number('id')

This creates a number filter for the 'id' field.

• placeholders('Min', 'Max'): Sets the placeholder text for the minimum and maximum input fields.

Filter::text('name')

This creates a text filter for the 'name' field.

• placeholder('Customer'): Sets the placeholder text for the input field.

Filter::select('status')

This creates a select filter for the 'status' field.

• options(OrderStatus::toOptions()): Sets the options for the select field using the toOptions method of the OrderStatus class.

Filter::number('total')

This creates a number filter for the 'total' field.

• placeholders('Min Total', 'Max Total'): Sets the placeholder text for the minimum and maximum input fields.

Filter::boolean('invoiced')

This creates a boolean filter for the 'invoiced' field.

• labels('Yes', 'No'): Sets the labels for the true and false values.

Filter::datepicker('created_at')

This creates a date picker filter for the 'created_at' field.

• addDataAttribute('format', 'H:i'): Sets a data attribute for the date picker. In this case, it's used to set the date format.

Filter::datetimepicker('updated_at')

This creates a datetime picker filter for the 'updated_at' field. The datetime picker uses the user's local date and time format.

Filter Column Types

Filters should be used with the appropriate database column types.

• text: VARCHAR or TEXT
• number: INT, FLOAT, DOUBLE, or DECIMAL
• select: Any type, as long as the value is a set of options
• multiselect: Any type, as long as the value is a set of options
• boolean: TINYINT(1), where 0 is false and 1 is true
• timepicker: TIME
• datepicker: DATE
• datetimepicker: DATETIME

Mass Actions.

Mass or bulk actions provide the capability to execute operations on multiple rows of data simultaneously.

You can group actions together using the group and groupBy helper methods.

Table Exports.

Tables can be exported in the following formats xlsx, csv, pdf, html. The type of export is decided by Extension-based format determination. If you supply a file name of SalesOrders.xlsx an Excel spreadsheet will be generated.

Custom Excel Exports

Excel exports can be customized with specific styles and column widths.

Uses the styles and columnWidths methods to apply custom styles and column widths to the Excel file.

The styles method returns an array of cell styles. The array keys are cell references and the values are arrays of style definitions. For example, '1' => ['font' => ['bold' => true]] applies a bold font style to all cells in row 1, and 'B2' => ['font' => ['italic' => true]] applies an italic font style to the cell at column B, row 2.

The columnWidths method returns an array of column widths. The array keys are column letters and the values are the widths of the columns. For example, 'A' => 20 sets the width of column A to 20.

Here's an example of how to define custom styles and column widths for Excel exports:

Search Input

Enable by adding the following property filled with the columns names you wish to search.

Letter Search

Enable by adding the following property filled with the columns names you wish to search.

Requirements

The package is compatible with Laravel 11+ and PHP 8.2 and 8.3.

Testing

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). See License File for more information.