Yet another Livewire table component

Hi everyone,
I thought maybe it will be helpful for someone else. I have developed another Livewire table component that suppose to mimic/replace Datatables in my project. Now it becomes pretty advanced that maybe you can try it.
The default component rendering is based on a Bootstrap 4 styling, it is possible to redefine all parts of rendering, but if you do not use Bootstrap it would be a bit more complicated to have a quick start.

Here is an example of a rendered table:


The main features of the table component:

  • Pagination like in Datatables
  • Column sorting
  • Search
  • Flexible filtering via dropdown
  • Selecting rows with possibility attach actions
  • Detail row with expander
  • Predefined column formatters: number, date, link, string limitation
  • Column formatters via closures and special Flatform language

How to use install and use it

The table component is part of a Flatform package. You need to install the package and publish config:

composer require dimonka2/flatform
php artisan vendor:publish --provider="dimonka2\flatform\FlatformServiceProvider"

Here is a sample table component with a few columns:

    namespace App\Http\Livewire\User;

    use App\Models\User;
    use dimonka2\flatform\Livewire\TableComponent;
    use dimonka2\flatform\Form\Components\Table\Table;

    class UserList extends TableComponent
    {
    protected function getTable(): ?Table
        {
            $table = new Table([
                'class' => 'table table-hover',
                'columns' => [
                    ['name' => 'name'       , 'title'   => 'Name'       , 'search',    ],
                    ['name' => 'email'      , 'title'   => 'Email'      , 'search',    ],
                    ['name' => 'position'   , 'title'   => 'Position'   , 'search',    ],
                    ['name' => 'updated_at' , 'title'   => 'Last update', 'sort' => 'Desc'  , '_format' => "date", ],
                    ['name' => 'id', 'hide'],
                ],
                'order' => 'updated_at',
                'query' => User::whereNull('disabled_at'),
            ]);

            return $table;
        }
    }

As you see all table properties can be defined via arrays. It is possible to use a Fluent interface, but for me in most of the cases there is no benefit from it.

Table properties

  • lengthOptions - number of itmems per page in filter dropdown. Default: [10, 20, 30, 50, 100]
  • evenOddClasses - array with even/odd classes. Default: [‘even’, ‘odd’];
  • query - Laravel Builder query that might contain any kind of joins, whereExists or Counts
  • search - setting this property to false will disable search functionality
  • select - enable and define row select options as sub array options
  • actions - define table actions as sub array
  • columns - sub array with table column definitions
  • rows - sub array with table rows definitions. You can define content of rows and columns without setting up query property
  • details - define table row details as sub array options
  • formatters - lookup list for column formatters
  • formatFunction - this is a table td element format function
  • info - setting this property to false will hide info column
  • links - setting this property to false will hide pagination links
  • rowRenderCallback - callback required for a livewire table to separate table from rows rendering

Table Column properties

  • name - field name, that is queried from the query via select, also the row data will use field name as a key
  • title - column title used in a header. Title might be in Flatform rendering format.
  • search - setting this property to false will exclude this column from searching
  • sort - setting to false will disable sort by this column, setting column to “DESC” will make DESC as default (first) sort order
  • system - setting this property to true means a virtual (calculated) field with disabled sort and search
  • class - this class will be added to column’s TD and TH tag classes
  • hide - true denotes that this column is not displayed
  • raw - this option might be used when you need a calculated value and it used as DB:raw select statement
  • noSelect - setting this to true denotes a special case for some columns are in a select statement and there is no need to add an extra select, like “count”
  • as - this property specifies how this column will be mapped to the Model attributes. If this field is undefined for a column fields with table name like users.name will have a replacement of dot to ‘__’ e.g. users__name
  • format - column format: callable (IColumnFormat), container or template name
  • width - column width. Column width will be added to the header style and each TD tag style.

There are many other settings, I will try to describe those later when I have more time.
Let me know if you have any questions, concerns or ideas about this component.

4 Likes

It seems a solid work!

Thank you @Dimonka2 for sharing this, I’ll try it soon and gives you feedback.

I think you should make a new Gist in GitHub and share the link it will be better

Is it open source if yes can you please paste github link?