PHPackages                             mystamyst/tablenice - 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. [Utility & Helpers](/categories/utility)
4. /
5. mystamyst/tablenice

ActiveLibrary[Utility & Helpers](/categories/utility)

mystamyst/tablenice
===================

Effortlessly create beautiful, interactive data tables for your Laravel applications with this intuitive Livewire component. Built with Tailwind CSS and Alpine.js, it delivers a seamless developer experience while providing users with responsive, feature-rich tables that enhance any web application.

1.0.3.5(9mo ago)023MITPHPPHP ^8.2

Since Sep 8Pushed 9mo agoCompare

[ Source](https://github.com/GitongaGeorge/tablenice)[ Packagist](https://packagist.org/packages/mystamyst/tablenice)[ RSS](/packages/mystamyst-tablenice/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (8)Versions (20)Used By (0)

TableNice by mystamyst
======================

[](#tablenice-by-mystamyst)

TableNice is a powerful, themeable, and highly configurable datatable and form system for Laravel, built on the modern TALL stack (Tailwind CSS, Alpine.js, Livewire, Laravel). It provides a fluent, object-oriented, and developer-friendly API to create beautiful and interactive data-driven UIs with minimal effort.

Features
--------

[](#features)

- 🚀 **Fluent & Declarative API**: Define your tables and forms entirely in PHP using expressive, chainable methods.
- 🎨 **Powerful Theming Engine**: Choose from multiple pre-built color themes or create your own. A single line of code changes the entire look and feel.
- **DataSource Agnostic**: Works seamlessly with Eloquent models, custom queries, and even API-driven collections.
- 🎛️ **Rich Column Types**: Includes Text, Number, DateTime, Image, Icon, and Relation columns out of the box, each with specialized formatters and options.
- ⚡ **Interactive Actions**: Create row, page, and bulk actions with built-in support for forms in modals and confirmation dialogs.
- 📈 **Data Visualization**: Display summary cards with dynamically generated charts (bar, line, pie, doughnut) to provide key insights at a glance.
- **Advanced Table Features**: Includes global searching, per-column filtering, sorting, grouping, summary rows, and customizable pagination.
- 🤖 **Code Generation**: Comes with a `make:datatable` command to instantly scaffold your tables and a `tablenice:install` command to get set up quickly.
- 🛡️ **Type-Safe by Design**: Leverages modern PHP Enums for icons and colors, providing autocompletion and preventing common errors.
- 🧩 **Component-Based**: Built with a clean separation of concerns using Livewire and Blade components for maximum flexibility and reusability.
- 📱 **Fully Responsive**: Designed with a mobile-first approach to ensure a seamless experience on any device.

Installation & Setup
------------------------

[](#installation--setup)

### 1. Require the Package

[](#1-require-the-package)

First, install the package via composer:

```
composer require mystamyst/tablenice -W
```

### 2. Run the Install Command

[](#2-run-the-install-command)

TableNice comes with a handy installation command that publishes the necessary assets and provides you with the next steps.

```
php artisan tablenice:install
```

This command will:

- Publish the `tablenice.php` configuration file to your `config/` directory.
- Publish a `DatatablePage.php` Livewire component and its corresponding view. These are required to use the `--route` option in the `make:datatable` command.
- Automatically detect your Tailwind CSS version and provide appropriate configuration instructions.
- Provide you with clear, copy-pasteable instructions for the final manual steps.

### 3. Frontend Dependencies

[](#3-frontend-dependencies)

The interactive elements of TableNice, like charts, calendars, and the rich text editor, require a few frontend packages. Install these via npm:

```
npm install -D chart.js dayjs litepicker trix @tailwindcss/typography @popperjs/core
```

Then, import them in your main JavaScript file (e.g., `resources/js/app.js`):

```
// resources/js/app.js
import Chart from 'chart.js/auto';
import 'litepicker/dist/plugins/mobilefriendly';
import Litepicker from 'litepicker';
import dayjs from 'dayjs';
import 'trix';

// Make libraries globally available for Alpine.js components
window.Chart = Chart;
window.Litepicker = Litepicker;
window.dayjs = dayjs;
```

### 4. Configure Tailwind CSS Typography Plugin

[](#4-configure-tailwind-css-typography-plugin)

TableNice requires the `@tailwindcss/typography` plugin for rich text formatting. The configuration depends on your Tailwind CSS version:

#### For Tailwind CSS v4

[](#for-tailwind-css-v4)

Add the following line to your `resources/css/app.css` file:

```
@plugin "@tailwindcss/typography";
```

#### For Tailwind CSS v3

[](#for-tailwind-css-v3)

Add the typography plugin to your `tailwind.config.js` file:

```
module.exports = {
  // ... other config
  plugins: [
    require('@tailwindcss/typography'),
    // ... other plugins
  ],
}
```

> **Note**: The `tablenice:install` command will automatically detect your Tailwind version and provide the appropriate instructions.

### 5. Update Your Main Layout

[](#5-update-your-main-layout)

For modals and alerts to work correctly across your entire application, you must add the global TableNice Livewire components to your main layout file (e.g., `resources/views/layouts/app.blade.php`). Place these tags just before the closing `` tag.

```
    ...
    {{-- This allows TableNice to display alerts and modals anywhere in your app --}}

    @stack('tablenice-scripts')

    @livewireScripts

```

Usage
-----

[](#usage)

### 1. Generate a Datatable

[](#1-generate-a-datatable)

Use the `make:datatable` command to generate a Table and its corresponding Form class.

```
php artisan make:datatable UserTable --model=User --route
```

#### Available Command Options

[](#available-command-options)

- `--model=User`: (Required) The Eloquent model to use for the table. The command will inspect this model to pre-fill columns and form fields.
- `--theme=indigo`: Specifies a color theme for the generated table class. Defaults to blue.
- `--route`: Automatically adds a full-page route for this datatable in `routes/web.php` using the published DatatablePage component.
- `--force`: Overwrites existing Table and Form files if they already exist.

### 2. Customize Your Table

[](#2-customize-your-table)

Open `app/DataTables/UserTable.php` to configure your columns, actions, and theme.

```