khauto/laravel-ui-helper

Laravel JS helper package for table grouping, sticky headers, and date formatting.

v1.0.0 2025-10-12 19:24 UTC

MIT

• Md Khairul Hasib

README

Author: Md Khairul Hasib
Package: khauto/laravel-ui-helper
Version: 1.0.0

A lightweight Laravel front-end utility script to enhance UI experience.
Includes built-in helpers for form indicators, sticky table headers, date formatting, and dynamic table row grouping — all powered by jQuery.

🚀 Installation

Install the package via Composer:

composer require khauto/laravel-ui-helper

⚙️ Setup

After installation, include the JavaScript helper in your main layout file (e.g. app.blade.php or layouts/app.blade.php):

<script src="{{ asset('vendor/khauto/laravel-ui-helper/ui-helper.js') }}"></script>

Ensure that jQuery and jQuery UI (for datepicker) are loaded before this script.

Example:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="{{ asset('vendor/khauto/laravel-ui-helper/ui-helper.js') }}"></script>

🧩 Features

1. Required Field Star

Automatically adds a red * star next to elements marked with .RequiredStar.

<label class="RequiredStar">Name</label>

➡ Output: **Name ***

2. Sticky Table Headers

Keeps table headers visible while scrolling.

<table class="sticky-table" id="exampleTable">
    <thead id="exampleTableHeader">
        <tr><th>Name</th><th>Amount</th></tr>
    </thead>
    <tbody>
        <tr><td>John</td><td>100</td></tr>
        ...
    </tbody>
</table>

When scrolling, the header remains visible until the table ends.

3. Date Formatting Helpers

convertDate(date)

Converts a JavaScript date to dd-mm-yyyy.

convertDate('2025-10-13'); // returns "13-10-2025"

viewDateFormat(date)

Converts a date string (yyyy-mm-dd or dd-mm-yyyy) into a user-friendly dd/mm/yy format using jQuery UI datepicker.

viewDateFormat('2025-10-13'); // returns "13/10/25"

4. Group Table Rows

Merges table rows that have the same content in a given column (like Excel cell grouping).

Example:

groupTableRow('sales-table', [0, 1]);

Parameters:

• tableClass: the CSS class of your table.
• columnIndexArray: array of column indexes to group (e.g. [0, 1]).
• ignoreRowArray (optional): custom text labels to ignore while grouping (default: ["Opening Balance", "Sub Total", "Total", "TOTAL", "SUB TOTAL"]).

Example Table:

<table class="sales-table">
  <tr><td>Product A</td><td>Dhaka</td></tr>
  <tr><td>Product A</td><td>Dhaka</td></tr>
  <tr><td>Product B</td><td>Chittagong</td></tr>
</table>

➡ After running groupTableRow('sales-table', [0, 1]),
rows with duplicate “Product A / Dhaka” will merge automatically with proper rowspan.

📦 Functions Summary

Function	Description
convertDate(date)	Converts JS date to dd-mm-yyyy
viewDateFormat(date)	Formats date for UI (dd/mm/yy)
isRowIgnore(row, ignoreList)	Checks if a table row should be ignored
groupTableRow(class, indexArray, ignoreArray)	Groups rows with identical cell content
$('.RequiredStar')	Appends red * for required fields
.sticky-table	Makes table header sticky on scroll

🧰 Dependencies

• jQuery
• jQuery UI (for datepicker)

📄 License

This package is open-source under the MIT license.

👨‍💻 Author

Md Khairul Hasib
📧 [e-mail]
🌐 GitHub: @khauto

💡 Laravel UI Helper is a small front-end utility meant to make your Blade templates cleaner and UI interactions smoother.