PHPackages                             tttstudios/alpinejs-table - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. tttstudios/alpinejs-table

ActiveLibrary[Admin Panels](/categories/admin)

tttstudios/alpinejs-table
=========================

A simple table component with sorting, filtering, and pagination

0141JavaScript

Since Nov 13Pushed 4y agoCompare

[ Source](https://github.com/StreetYo/alpinejs-table)[ Packagist](https://packagist.org/packages/tttstudios/alpinejs-table)[ RSS](/packages/tttstudios-alpinejs-table/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

[![Cover.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Github-Cover_AlpinejsTable-AL.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Github-Cover_AlpinejsTable-AL.png?raw=true)

Alpinejs Table
==============

[](#alpinejs-table)

Alpinejs Table is a Laravel package to inject a simple table view component into any Laravel project.

Built with [Laravel](https://laravel.com/), [Alpine.js](https://github.com/alpinejs/alpine), [Moment.js](https://momentjs.com/), [@bevacqua/rome](https://github.com/bevacqua/rome), and [Tailwind CSS](https://tailwindcss.com/) .

### Main Features:

[](#main-features)

- Sorting rows by cell values (ascending & descending)
- Filtering data by text match or dropdown
- Filtering by date picker (if cell value is date format)
- Customizable pagination, header title, and cell values

### Jump to:

[](#jump-to)

- [Dependencies](#dependencies)
- [Installation](#installation)
    1. [Via Composer](#installation-via-composer)
    2. [Manual Installation](#installation-manual)
- [Basic Usage (bundled)](#basic-usage-bundled)
- [Basic Usage (standalone)](#basic-usage-standalone)
- [Integration with your own js/css](#integration-with-your-own)
- [Built-in Filters](#built-in-filter)
    1. [Text Filter](#built-in-filter-text)
    2. [Dropdown Filter](#built-in-filter-dropdown)
    3. [Date Filter](#built-in-filter-date)
- [Customization](#customization)
    1. [Customize Cell Width](#customization-cell-width)
    2. [Customize Pagination](#customization-pagination)
    3. [Customize Header Titles](#customization-header-titles)
    4. [Customize Cell Content](#customization-cell-content)
- [Extra Options:](#extra-options)
    1. [notVisible](#extra-options-not-visible)
    2. [notSortable](#extra-options-not-sortable)
    3. [notFilterable](#extra-options-not-filterable)
- [Appendix](#appendix)
    1. [Option Parameters](#appendix-parameters)
- [Notes](#note)
- [Contributors](#contributors)
- [License](#license)
- [Support](#ttt)

---

Dependencies
============

[](#dependencies)

**Recommended:**

- Laravel 5.7 or newer (which supports `ServiceProvider::loadViewsFrom()` )
- PHP 7.1 or newer

You can use this package in older versions of Laravel, but extra installation steps are required (as demonstrated below).

---

Installation
============

[](#installation)

1. Via composer
---------------

[](#1-via-composer)

```
composer require tttstudios/alpinejs-table
```

2. Manual Installation
----------------------

[](#2-manual-installation)

### For Laravel ≥ 5.7

[](#for-laravel--57)

1. Unzip the code and put it under `your-repo/packages/tttstudios/` folder, so it looks like this:

```
├── your-repo
│   ├── app
│   ├── config
│   ├── composer.json
│   ├── vendor
│   └── packages
│	   └── tttstudios
│		   └── alpinejs-table

```

2. Add one line to `your-repo/composer.json`:

```
"autoload": {
	"psr-4": {
		"Tttstudios\\AlpinejsTable\\": "packages/tttstudios/alpinejs-table/src/"
	},
}
```

3. Then, add one line to `your-repo/config/app.php`:

```
'providers' => [
	Tttstudios\AlpinejsTable\Providers\AlpinejsTableServiceProvider::class
]
```

4. Lastly, refresh composer's autoload file by running:

```
composer dump-autoload
```

### For Laravel < 5.7:

[](#for-laravel---57)

1. Copy all the source files under `alpinejs-table/resources/views` to your own repo's `views/alpinejs-table` folder.
2. Use Laravel Blade's `@include()` syntax to use them in view files. See [examples](#blade-call-include) below.

---

Basic Usage (Bundle)
====================

[](#basic-usage-bundle)

Alpinejs Table is shipped with 3 [Blade Aliases](https://laravel.com/docs/7.x/blade#including-subviews):

Blade AliasDescription`AlpinejsTableBundle`import a bundled javascript file with all its dependencies (including [Alpine.js](https://github.com/alpinejs/alpine) )`AlpinejsTableHtml`import a blade view file`AlpinejsTableCss`import all styles required by the table### For Laravel ≥ 5.7

[](#for-laravel---57-1)

You can use Alpinejs Table out of the box. Simply pass an array to AlpineHtml()'s `collection` in any blade view.

1. Format data into an array:

```
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	})->all();

	return view('example', compact('users'));
}
```

2. Pass array to blade view:

```

 @AlpinejsTableCss()

 @AlpinejsTableBundle()

@AlpinejsTableHtml(['collection' => $users])
```

And this is what you get:

[![2020-06-17_16.58.57.gif](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/2020-06-17_16.58.57.gif?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/2020-06-17_16.58.57.gif?raw=true)

### For Laravel < 5.7

[](#for-laravel---57-2)

Prerequisite: Copy all the files under `alpinejs-table/resources/views` to your own repo's `views/alpinejs-table` folder.

```
# in example.blade.php:

 @include('alpinejs-table.css')

 @include('alpinejs-table.js-bundle')

@include('alpinejs-table.html', ['collection' => $users])
```

---

Basic Usage (standalone)
========================

[](#basic-usage-standalone)

If your app already has [Alpine.js](https://github.com/alpinejs/alpine) imported, then you don't need to import the bundled javascript file. Instead, you can call `AlpineJsTableCore` . Example:

```
# in example.blade.php:

 @AlpinejsTableCss()

 @AlpinejsTableCore()

@AlpinejsTableHtml(['collection' => $users])
```

### For Laravel < 5.7

[](#for-laravel---57-3)

```
# in example.blade.php:

 @include('alpinejs-table.css')

 @include('alpinejs-table.js-core')

@include('alpinejs-table.html', ['collection' => $users])
```

---

Integration with your own js/css
================================

[](#integration-with-your-own-jscss)

You can tell that Alpinejs Table is using [moment.js](https://momentjs.com/) to parse date & time, and use [Tailwind CSS](https://tailwindcss.com/) to compose styles. If your app has imported them in global scope, or if you want to integrate Alpinejs Table's source code into your app's bundled js & css, simple follow these steps (Laravel ≥5.7 only):

1. Publish Alpinejs Table's assets by running:

```
php artisan vendor:publish --tag=alpinejs-table
```

2. The command above will copy these files into your repo:

```
# js:
/resources/js/plugins/rome-modified.js
/resources/js/plugins/alpinejs-table.js

# css:
/resources/sass/plugins/alpinejs-table.scss
```

3. Then you can import Alpinejs Table's core js into your own `app.js` :

```
// Source File: /resources/js/app.js

import 'alpinejs';

import AlpinejsTablePlugin from './plugins/alpinejs-table.js'

// Make it accessible in global ssope:
window.AlpinejsTablePlugin = AlpinejsTablePlugin;
```

4. And you can import Alpinejs Table's styles into your own `app.scss` :

```
/* Source File: /resources/sass/app.scss */

@tailwind base;

@tailwind components;

@import 'plugins/alpinejs-table';

@tailwind utilities;
```

5. Lastly, you only need to import `AlpinejsTableHtml` alone:

```

@AlpinejsTableHtml(['collection' => $users, 'options'=>$options])
```

---

Built-in Filters
================

[](#built-in-filters)

1. Text Filter
--------------

[](#1-text-filter)

Alpinejs Table generates a text filter for each column by default, which means, all columns can be filtered by text matching out of the box, unless you intentionally [disable it](#extra-options-not-filterable).

[![2020-06-24_13.59.26.gif](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/2020-06-24_13.59.26.gif?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/2020-06-24_13.59.26.gif?raw=true)

2. Dropdown Filter
------------------

[](#2-dropdown-filter)

For limited data types, you may need a dropdown filter. For example: `status` may only have 2 valid values: `Active` or `Pending` . In this case, you can set it as a dropdown filter.

**Example:**

1. Format data into an array:

```
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	})->all();

	$options=[
		 'dropdowns' => ['status'],
	];

	return view('example', compact('users', 'options'));
}
```

2. Pass array to blade view:

```

 @AlpinejsTableCss()

 @AlpinejsTableBundle()

@AlpinejsTableHtml(['collection' => $users, 'options' => $options])
```

And this is what you'll get:

[![Untitled.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Untitled.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Untitled.png?raw=true)

3. Date Filter
--------------

[](#3-date-filter)

If some column is in date format. You may find it useful to define `dates` in options.

**Example:**

```
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'status' => $user->status, // "Active" or "Pending"
			'name'   => $user->name,
			// must be in ISO 8601 format, e.g.: 2020-05-27T18:26:58+00:00
			'birthday'  => $user->birthday->toIso8601String()
		];
	})->all();

	$options=[
		'dropdowns' => ['status'],
		'dates' => ['birthday'],
	];

	return view('example', compact('users', 'options'));
}
```

Voila! The birthday column turns into a date picker automatically. Thank [@bevacqua/rome](https://github.com/bevacqua/rome) for this great date picker plugin.

[![2020-06-16_18.37.29.gif](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/2020-06-16_18.37.29.gif?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/2020-06-16_18.37.29.gif?raw=true)

You can even set your own date format:

```
$options=[
	'dates' => ['birthday'],
	'dateFormat' => 'YYYY/M/D',
  ];
```

[![2020-06-17_15.25.34.gif](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/2020-06-17_15.25.34.gif?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/2020-06-17_15.25.34.gif?raw=true)

---

Customizations
==============

[](#customizations)

1. Customize Cell Width
-----------------------

[](#1-customize-cell-width)

Alpinejs Table has a default cell width of `200px` for each column. You may customize the width of each cell by passing a javascript closure to `cellWidth(key)`

**Example:**

```
$options=[
		// make sure the syntax is for Javascript:

		'cellWidth(key)'=>'

		if(key=="status")
			return `120px`;

		if(key=="email")
			return `400px`;

		return `200px`;
	',
];
```

Refresh the page and you can get the new layout:

[![Untitled%201.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Untitled%201.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Untitled%201.png?raw=true)

2. Customize Pagination
-----------------------

[](#2-customize-pagination)

Alpinejs Table displays 10 entries per page by default. You can easily override it by setting `perPage` in `options`:

**Example:**

```
$options=[
	'perPage' => 24
];
```

You can also set the options to allow visitors on change perPage on the fly:

```
$options=[
	'perPageOptions' => [24, 48, 96]
];
```

Then You can see the settings in effect in bottom right of the table:

[![2020-06-16_18.54.55.gif](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/2020-06-16_18.54.55.gif?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/2020-06-16_18.54.55.gif?raw=true)

---

3. Customize Header Titles
--------------------------

[](#3-customize-header-titles)

By default, Alpinejs Table transforms `key` into title case and display in header. For example: `user_email` will be transformed into `User Email`.

In case you need to customize the title, you can use `titleRenderer(key)` :

**Example:**

```
// ExampleController.php:

	$options=[
		'titleRenderer(key)'=>'
			if(key=="id")
				return `User ID`;

			// by default: return nothing
		'
	];
```

**Result:**

[![Untitled%202.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Untitled%202.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Untitled%202.png?raw=true)

---

4. Customize Cell Content
-------------------------

[](#4-customize-cell-content)

Sometimes you need to display a transformed content for some cells. For example, you may want to show red font color for users with "Pending" status, or even add different action buttons for different cells .

Here comes the magic of `cellRenderer(key,cell,row)` :

**Example:**

```
// ExampleController.php:

public function index() {

	$users=\App\User::get()->map(function ($user) {
		return [
			'id'	 => $user->id,
			'status' => $user->status,
			'name'   => $user->name,
			'email'  => $user->email,
		];
	 })->all();

	$options=[
		'cellRenderer(key,cell,row)'=>'

			if(key == "status" && cell.value == "Pending")
				return `` + cell.value + ``;

			if(key == "name")
			{
				const isPending = row.status.value == "Pending";
				return cell.value
						+ ``
								+ (isPending ? "Approve" : "Details")
						+` `;
			}

			return cell.value; // default
		'
	];

	return view('example', compact('users', 'options'));
}
```

**Result:**

[![Untitled%203.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Untitled%203.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Untitled%203.png?raw=true)

---

Extra Options
=============

[](#extra-options)

1. notVisible:
--------------

[](#1-notvisible)

The column will not be displayed, but its value can still be accessed by `row` in closures.

**Example:**

```
// ExampleController.php:

	$options=[
		'notVisible' => ['id']
		'cellRenderer(key,cell,row)'=>'
			if(key=="name")
				return `ID #`
						+ row.id.value
						+ ": "
						+ cell.value;
			return cell.value;
		'
	];
```

**Result:**

[![Untitled%204.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Untitled%204.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Untitled%204.png?raw=true)

2. notSortable:
---------------

[](#2-notsortable)

The column can not be sorted, but its value can still be accessed by `row` in closures.

**Example:**

```
// ExampleController.php:

	$options=[
		'notSortable' => ['email']
	];
```

**Result:**

[![Pasted_Image_2020-06-17__4_25_PM.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Pasted_Image_2020-06-17__4_25_PM.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Pasted_Image_2020-06-17__4_25_PM.png?raw=true)

3. notFilterable:
-----------------

[](#3-notfilterable)

The column can not be filtered by text or dropdown, but its value can still be accessed by `row` in closures.

**Example:**

```
// ExampleController.php:

	$options=[
		'notFilterable' => ['email']
	];
```

**Result:**

[![Pasted_Image_2020-06-17__4_29_PM.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/Pasted_Image_2020-06-17__4_29_PM.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/Pasted_Image_2020-06-17__4_29_PM.png?raw=true)

---

Appendix
========

[](#appendix)

Option Parameters
-----------------

[](#option-parameters)

ParametertypeExample ValueDescriptiondropdownsarray\['status'\]Set dropdown filter to a columndatesarray\['birthday'\]Set date filter to a columndateFormatstring'YYYY/M/D'Set date format to a date filterperPageinteger24Set "per page" for paginationperPageOptionsarray\[24, 48, 96\]Set perPage options for paginationnotVisiblearray\['id', 'password'\]Hide columns from showing in tablenotSortablearray\['email'\]Hide sort button from columnsnotFilterablearray\['action'\]Hide filter from columnscellWidth(key)js closure'return `200px`; 'Customize cell width for any columntitleRenderer(key)js closure'if(key=="id") return `User ID`; 'Customize title width for column headercellRenderer(key,cell,row)js closure'return cell.value; 'Customize cell content
---

Notes
=====

[](#notes)

Alpinejs Table load all data into a single javascript instance. Performance can be compromised if there are too many data.

---

License
=======

[](#license)

Alpinejs Table is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

---

Contributors
============

[](#contributors)

[@haoluo-ttt](https://github.com/haoluo-ttt)

[@fpena](https://github.com/fpena)

---

Premium Support By TTT Studios
==============================

[](#premium-support-by-ttt-studios)

Alpinjs Table is presented by the web developing team at TTT Studios. We are a Digital Innovation Studio based out of Vancouver, Canada, delivering custom software and solutions that are designed and developed 100% in-house. The technologies we work with include AR & VR, IoT, AI, security & encryption, and cloud computing.

[![ttt-logo.png](https://github.com/haoluo-ttt/img-hosting/raw/master/emv-docs/ttt-logo.png?raw=true)](https://github.com/haoluo-ttt/img-hosting/blob/master/emv-docs/ttt-logo.png?raw=true)

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/de2fa4af103b350adb9db19524d854167636298a7b3a32bca34a09ea53ba8e67?d=identicon)[StreetYo](/maintainers/StreetYo)

---

Top Contributors

[![StreetYo](https://avatars.githubusercontent.com/u/36532182?v=4)](https://github.com/StreetYo "StreetYo (8 commits)")

### Embed Badge

![Health badge](/badges/tttstudios-alpinejs-table/health.svg)

```
[![Health](https://phpackages.com/badges/tttstudios-alpinejs-table/health.svg)](https://phpackages.com/packages/tttstudios-alpinejs-table)
```

###  Alternatives

[jeroennoten/laravel-adminlte

Easy AdminLTE integration with Laravel

4.0k4.8M43](/packages/jeroennoten-laravel-adminlte)[dmstr/yii2-adminlte-asset

AdminLTE backend theme asset bundle for Yii 2.0 Framework

1.1k1.8M67](/packages/dmstr-yii2-adminlte-asset)[dwij/laraadmin

LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like CRUD Generation, Module Manager, Media, Menus, Backups and much more

1.6k68.7k](/packages/dwij-laraadmin)[filament/spatie-laravel-media-library-plugin

Filament support for `spatie/laravel-medialibrary`.

1764.8M125](/packages/filament-spatie-laravel-media-library-plugin)[bezhansalleh/filament-exceptions

A Simple & Beautiful Pluggable Exception Viewer for FilamentPHP's Admin Panel

193195.9k13](/packages/bezhansalleh-filament-exceptions)[filament/infolists

Easily add beautiful read-only infolists to any Livewire component.

1220.8M36](/packages/filament-infolists)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)